diff --git a/src/v4/social/components/Comment/Comment.tsx b/src/v4/social/components/Comment/Comment.tsx
index deca3ba4..e046343e 100644
--- a/src/v4/social/components/Comment/Comment.tsx
+++ b/src/v4/social/components/Comment/Comment.tsx
@@ -239,7 +239,10 @@ export const Comment = ({
                       {isLiked ? 'Liked' : 'Like'}
                     </Typography.CaptionBold>
                   </div>
-                  <div onClick={() => onClickReply(comment)}>
+                  <div
+                    data-qa-anchor={`${pageId}/${componentId}/reply_button`}
+                    onClick={() => onClickReply(comment)}
+                  >
                     <Typography.CaptionBold className={styles.postComment__secondRow__reply}>
                       Reply
                     </Typography.CaptionBold>
diff --git a/src/v4/social/components/CommentComposer/CommentComposer.tsx b/src/v4/social/components/CommentComposer/CommentComposer.tsx
index 182d150c..15d06113 100644
--- a/src/v4/social/components/CommentComposer/CommentComposer.tsx
+++ b/src/v4/social/components/CommentComposer/CommentComposer.tsx
@@ -33,6 +33,7 @@ export type CreateCommentParams = {
 };
 
 interface CommentComposerProps {
+  pageId?: string;
   referenceId: string;
   referenceType: Amity.CommentReferenceType;
   replyTo?: Amity.Comment;
@@ -42,6 +43,7 @@ interface CommentComposerProps {
 }
 
 export const CommentComposer = ({
+  pageId = '*',
   referenceId,
   referenceType,
   replyTo,
@@ -55,6 +57,7 @@ export const CommentComposer = ({
   const editorRef = useRef<CommentInputRef | null>(null);
   const composerRef = useRef<HTMLDivElement | null>(null);
   const composerInputRef = useRef<HTMLDivElement | null>(null);
+  const componentId = 'comment_composer_bar';
 
   const [composerHeight, setComposerHeight] = useState(0);
   const [mentionOffsetBottom, setMentionOffsetBottom] = useState(0);
@@ -129,7 +132,12 @@ export const CommentComposer = ({
       <div className={styles.commentComposer__avatar}>
         <Avatar avatarUrl={avatarUrl} defaultImage={<User />} />
       </div>
-      <div className={styles.commentComposer__input} ref={composerInputRef}>
+
+      <div
+        data-qa-anchor={`${pageId}/${componentId}/comment_composer`}
+        className={styles.commentComposer__input}
+        ref={composerInputRef}
+      >
         <CommentInput
           ref={editorRef}
           onChange={onChange}
@@ -142,6 +150,7 @@ export const CommentComposer = ({
         />
       </div>
       <Button
+        data-qa-anchor={`${pageId}/${componentId}/create_comment_button`}
         isDisabled={!textValue.data.text}
         className={styles.commentComposer__button}
         onPress={() => mutateAsync({ params: textValue })}
diff --git a/src/v4/social/components/CommentList/CommentList.tsx b/src/v4/social/components/CommentList/CommentList.tsx
index 92a1976c..e786e18d 100644
--- a/src/v4/social/components/CommentList/CommentList.tsx
+++ b/src/v4/social/components/CommentList/CommentList.tsx
@@ -117,6 +117,7 @@ export const CommentList = ({
           <CommentAd key={item.adId} ad={item} />
         ) : (
           <Comment
+            pageId={pageId}
             key={item.commentId}
             comment={item as Amity.Comment}
             onClickReply={(comment) => onClickReply?.(comment)}
diff --git a/src/v4/social/components/CommentTray/CommentTray.tsx b/src/v4/social/components/CommentTray/CommentTray.tsx
index bfde921a..a8cc0e41 100644
--- a/src/v4/social/components/CommentTray/CommentTray.tsx
+++ b/src/v4/social/components/CommentTray/CommentTray.tsx
@@ -46,6 +46,7 @@ export const CommentTray = ({
     >
       <div className={styles.commentListContainer}>
         <CommentList
+          pageId={pageId}
           referenceId={referenceId}
           referenceType={referenceType}
           community={community}
diff --git a/src/v4/social/components/CommunityFeed/CommunityFeed.tsx b/src/v4/social/components/CommunityFeed/CommunityFeed.tsx
index 2b29c8af..f37f6329 100644
--- a/src/v4/social/components/CommunityFeed/CommunityFeed.tsx
+++ b/src/v4/social/components/CommunityFeed/CommunityFeed.tsx
@@ -148,6 +148,7 @@ export const CommunityFeed = ({ pageId = '*', communityId }: CommunityFeedProps)
                 }
               >
                 <PostContent
+                  pageId={pageId}
                   key={post.postId}
                   post={post}
                   category={
diff --git a/src/v4/social/components/CommunityHeader/CommunityHeader.tsx b/src/v4/social/components/CommunityHeader/CommunityHeader.tsx
index ae034c8b..84d65e23 100644
--- a/src/v4/social/components/CommunityHeader/CommunityHeader.tsx
+++ b/src/v4/social/components/CommunityHeader/CommunityHeader.tsx
@@ -24,6 +24,7 @@ export const CommunityHeader: React.FC<CommunityProfileHeaderProps> = ({
   pageId = '*',
   community,
 }) => {
+  const componentId = 'community_header';
   const { onBack, onEditCommunity } = useNavigation();
   const { activeTab, setActiveTab } = useCommunityTabContext();
 
@@ -46,6 +47,7 @@ export const CommunityHeader: React.FC<CommunityProfileHeaderProps> = ({
     <div className={styles.container}>
       <CommunityCover
         pageId={pageId}
+        componentId={componentId}
         image={avatarFileUrl}
         onBack={onBack}
         onClickMenu={() => onEditCommunity(community.communityId)}
@@ -53,18 +55,33 @@ export const CommunityHeader: React.FC<CommunityProfileHeaderProps> = ({
       <div className={styles.content}>
         <div className={styles.name}>
           {!community.isPublic && <Lock className={styles.communityProfile__privateIcon} />}
-          <CommunityName pageId={pageId} name={community.displayName} />
+          <CommunityName pageId={pageId} componentId={componentId} name={community.displayName} />
           {community.isOfficial && <CommunityVerifyBadge />}
         </div>
 
-        <CommunityCategory pageId={pageId} categories={communityCategories} />
+        <CommunityCategory
+          pageId={pageId}
+          componentId={componentId}
+          categories={communityCategories}
+        />
 
-        <CommunityDescription pageId={pageId} description={community.description || ''} />
+        <CommunityDescription
+          pageId={pageId}
+          componentId={componentId}
+          description={community.description || ''}
+        />
 
         <div className={styles.communityProfile__communityInfo__container}>
-          <CommunityInfo count={community.postsCount} text="posts" />
+          <CommunityInfo
+            pageId={pageId}
+            componentId={componentId}
+            count={community.postsCount}
+            text="posts"
+          />
           <div className={styles.divider}></div>
           <CommunityInfo
+            pageId={pageId}
+            componentId={componentId}
             count={community.membersCount}
             text="members"
             onClick={() => onEditCommunity(community.communityId, 'MEMBERS')}
@@ -73,15 +90,19 @@ export const CommunityHeader: React.FC<CommunityProfileHeaderProps> = ({
 
         {!community.isJoined && community.isPublic && (
           <div className={styles.communityProfile__joinButton__container}>
-            <CommunityJoinButton onClick={joinCommunity} />
+            <CommunityJoinButton
+              pageId={pageId}
+              componentId={componentId}
+              onClick={joinCommunity}
+            />
           </div>
         )}
         <div>
-          <StoryTab type="communityFeed" communityId={community.communityId} />
+          <StoryTab type="communityFeed" pageId={pageId} communityId={community.communityId} />
         </div>
         {/* {isShowPendingPost && (
           <div className={styles.communityProfile__pendingPost__container}>
-            <CommunityPendingPost />
+            <CommunityPendingPost pageId={pageId} componentId={componentId}  />
           </div>
         )} */}
         <CommunityProfileTab pageId={pageId} activeTab={activeTab} onTabChange={handleTabChange} />
diff --git a/src/v4/social/components/PostContent/PostContent.tsx b/src/v4/social/components/PostContent/PostContent.tsx
index acabb03c..d359ef78 100644
--- a/src/v4/social/components/PostContent/PostContent.tsx
+++ b/src/v4/social/components/PostContent/PostContent.tsx
@@ -183,7 +183,7 @@ export const PostContent = ({
   style,
 }: PostContentProps) => {
   const componentId = 'post_content';
-  const { themeStyles } = useAmityComponent({
+  const { themeStyles, accessibilityId } = useAmityComponent({
     pageId,
     componentId,
   });
@@ -330,7 +330,12 @@ export const PostContent = ({
   }, [post, isVisible, page.type]);
 
   return (
-    <div ref={elementRef} className={styles.postContent} style={themeStyles}>
+    <div
+      data-qa-anchor={accessibilityId}
+      ref={elementRef}
+      className={styles.postContent}
+      style={themeStyles}
+    >
       {(category === AmityPostCategory.ANNOUNCEMENT ||
         category === AmityPostCategory.PIN_AND_ANNOUNCEMENT) && (
         <AnnouncementBadge pageId={pageId} componentId={componentId} />
diff --git a/src/v4/social/components/TopSearchBar/TopSearchBar.tsx b/src/v4/social/components/TopSearchBar/TopSearchBar.tsx
index a4d53a4c..1610b0c5 100644
--- a/src/v4/social/components/TopSearchBar/TopSearchBar.tsx
+++ b/src/v4/social/components/TopSearchBar/TopSearchBar.tsx
@@ -14,7 +14,7 @@ export interface TopSearchBarProps {
 
 export function TopSearchBar({ pageId = '*', search }: TopSearchBarProps) {
   const componentId = 'top_search_bar';
-  const { config, isExcluded, themeStyles } = useAmityComponent({
+  const { config, isExcluded, themeStyles, accessibilityId } = useAmityComponent({
     pageId,
     componentId,
   });
@@ -44,6 +44,7 @@ export function TopSearchBar({ pageId = '*', search }: TopSearchBarProps) {
           value={searchValue}
           placeholder={config.text}
           onChange={(ev) => setSearchValue(ev.target.value)}
+          data-qa-anchor={accessibilityId}
         />
         {searchValue != '' ? (
           <ClearButton
diff --git a/src/v4/social/elements/CommentButton/CommentButton.tsx b/src/v4/social/elements/CommentButton/CommentButton.tsx
index e51885c9..3a7e83c1 100644
--- a/src/v4/social/elements/CommentButton/CommentButton.tsx
+++ b/src/v4/social/elements/CommentButton/CommentButton.tsx
@@ -48,9 +48,8 @@ export function CommentButton({
   if (isExcluded) return null;
 
   return (
-    <Button onPress={onPress}>
+    <Button onPress={onPress} data-qa-anchor={accessibilityId}>
       <IconComponent
-        data-qa-anchor={accessibilityId}
         defaultIcon={() => (
           <div className={clsx(styles.commentButton)}>
             <CommentSvg className={clsx(styles.commentButton__icon, defaultIconClassName)} />
diff --git a/src/v4/social/elements/CreateNewPostButton/CreateNewPostButton.tsx b/src/v4/social/elements/CreateNewPostButton/CreateNewPostButton.tsx
index 0c2757c3..200bb20d 100644
--- a/src/v4/social/elements/CreateNewPostButton/CreateNewPostButton.tsx
+++ b/src/v4/social/elements/CreateNewPostButton/CreateNewPostButton.tsx
@@ -16,7 +16,7 @@ export function CreateNewPostButton({
   onSubmit,
 }: CreateNewPostButtonProps) {
   const elementId = 'create_new_post_button';
-  const { config, isExcluded, themeStyles } = useAmityElement({
+  const { config, isExcluded, themeStyles, accessibilityId } = useAmityElement({
     pageId,
     componentId,
     elementId,
@@ -30,6 +30,7 @@ export function CreateNewPostButton({
       disabled={!isValid}
       className={styles.createNewPostButton}
       type="submit"
+      data-qa-anchor={accessibilityId}
     >
       {config.text}
     </button>
diff --git a/src/v4/social/elements/EditPostButton/EditPostButton.tsx b/src/v4/social/elements/EditPostButton/EditPostButton.tsx
index cc62b1f8..32e3ea05 100644
--- a/src/v4/social/elements/EditPostButton/EditPostButton.tsx
+++ b/src/v4/social/elements/EditPostButton/EditPostButton.tsx
@@ -10,7 +10,7 @@ type EditPostButtonProps = ButtonProps & {
 
 export function EditPostButton({ pageId = '*', componentId = '*', ...props }: EditPostButtonProps) {
   const elementId = 'edit_post_button';
-  const { config, isExcluded, themeStyles } = useAmityElement({
+  const { config, isExcluded, themeStyles, accessibilityId } = useAmityElement({
     pageId,
     componentId,
     elementId,
@@ -18,7 +18,12 @@ export function EditPostButton({ pageId = '*', componentId = '*', ...props }: Ed
   if (isExcluded) return null;
 
   return (
-    <Button style={themeStyles} className={styles.editPostButton} {...props}>
+    <Button
+      data-qa-anchor={accessibilityId}
+      style={themeStyles}
+      className={styles.editPostButton}
+      {...props}
+    >
       {config.text}
     </Button>
   );
diff --git a/src/v4/social/elements/PostTextField/PostTextField.tsx b/src/v4/social/elements/PostTextField/PostTextField.tsx
index 9b1718a8..9ba25416 100644
--- a/src/v4/social/elements/PostTextField/PostTextField.tsx
+++ b/src/v4/social/elements/PostTextField/PostTextField.tsx
@@ -31,6 +31,8 @@ import useCommunity from '~/v4/core/hooks/collections/useCommunity';
 import { MentionItem } from '~/v4/social/internal-components/Lexical/MentionItem';
 
 interface PostTextFieldProps {
+  pageId?: string;
+  componentId?: string;
   communityId?: string | null;
   attachmentAmount?: number;
   mentionContainer: HTMLElement | null;
@@ -131,8 +133,11 @@ export const PostTextField = ({
   communityId,
   mentionContainer,
   dataValue,
+  pageId = '*',
+  componentId = '*',
 }: PostTextFieldProps) => {
   const [intersectionNode, setIntersectionNode] = useState<HTMLDivElement | null>(null);
+  const elementId = 'post_text_field';
 
   const editorConfig = getEditorConfig({
     namespace: 'PostTextField',
@@ -168,7 +173,10 @@ export const PostTextField = ({
             : {}),
         }}
       >
-        <div className={styles.editorContainer}>
+        <div
+          className={styles.editorContainer}
+          data-qa-anchor={`${pageId}/${componentId}/${elementId}`}
+        >
           <RichTextPlugin
             contentEditable={<ContentEditable />}
             placeholder={<div className={styles.editorPlaceholder}>What’s going on...</div>}
diff --git a/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx b/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx
index c1741b27..66e4e7e2 100644
--- a/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx
+++ b/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx
@@ -38,7 +38,7 @@ export const ShareStoryButton = ({
   onClick,
 }: ShareButtonProps) => {
   const elementId = 'share_story_button';
-  const { config, isExcluded } = useAmityElement({
+  const { config, isExcluded, accessibilityId } = useAmityElement({
     pageId,
     componentId,
     elementId,
@@ -50,7 +50,7 @@ export const ShareStoryButton = ({
     <button
       role="button"
       className={clsx(styles.shareStoryButton)}
-      data-qa-anchor="share_story_button"
+      data-qa-anchor={accessibilityId}
       onClick={onClick}
       data-hideAvatar={config?.hide_avatar}
     >
diff --git a/src/v4/social/internal-components/Comment/index.tsx b/src/v4/social/internal-components/Comment/index.tsx
index cb641b40..92a7f8a0 100644
--- a/src/v4/social/internal-components/Comment/index.tsx
+++ b/src/v4/social/internal-components/Comment/index.tsx
@@ -284,6 +284,7 @@ export const Comment = ({
           <div data-qa-anchor="comment">{renderedComment}</div>
           {comment.children.length > 0 && (
             <CommentList
+              pageId={pageId}
               componentId={componentId}
               parentId={comment.commentId}
               referenceType={comment.referenceType}
diff --git a/src/v4/social/internal-components/CreatePost/CreatePost.tsx b/src/v4/social/internal-components/CreatePost/CreatePost.tsx
index 9984902b..fcb9d1dc 100644
--- a/src/v4/social/internal-components/CreatePost/CreatePost.tsx
+++ b/src/v4/social/internal-components/CreatePost/CreatePost.tsx
@@ -305,6 +305,7 @@ export function CreatePost({ community, targetType, targetId }: AmityPostCompose
           />
         </div>
         <PostTextField
+          pageId={pageId}
           onChange={onChange}
           communityId={targetId}
           mentionContainer={mentionRef.current}
@@ -313,6 +314,7 @@ export function CreatePost({ community, targetType, targetId }: AmityPostCompose
           }}
         />
         <ImageThumbnail
+          pageId={pageId}
           files={incomingImages}
           uploadedFiles={postImages}
           uploadLoading={uploadLoading}
@@ -325,6 +327,7 @@ export function CreatePost({ community, targetType, targetId }: AmityPostCompose
           isErrorUpload={isErrorUpload}
         />
         <VideoThumbnail
+          pageId={pageId}
           files={incomingVideos}
           uploadedFiles={postVideos}
           uploadLoading={uploadLoading}
diff --git a/src/v4/social/internal-components/EditPost/EditPost.tsx b/src/v4/social/internal-components/EditPost/EditPost.tsx
index eedd0bfe..3ef72f98 100644
--- a/src/v4/social/internal-components/EditPost/EditPost.tsx
+++ b/src/v4/social/internal-components/EditPost/EditPost.tsx
@@ -161,6 +161,7 @@ export function EditPost({ post }: AmityPostComposerEditOptions) {
           />
         </div>
         <PostTextField
+          pageId={pageId}
           communityId={post.targetType === 'community' ? post.targetId : undefined}
           onChange={onChange}
           mentionContainer={mentionRef.current}
diff --git a/src/v4/social/internal-components/EditPost/Thumbnail.tsx b/src/v4/social/internal-components/EditPost/Thumbnail.tsx
index b3370ea3..c83a8db8 100644
--- a/src/v4/social/internal-components/EditPost/Thumbnail.tsx
+++ b/src/v4/social/internal-components/EditPost/Thumbnail.tsx
@@ -6,6 +6,8 @@ import { PostContentType } from '@amityco/ts-sdk';
 import { Button } from '~/v4/core/natives/Button';
 
 const MediaComponent = ({
+  pageId = '*',
+  componentId = '*',
   fieldId,
   onRemove,
   type,
@@ -13,14 +15,23 @@ const MediaComponent = ({
   fieldId: string;
   onRemove: () => void;
   type: 'image' | 'video';
+  pageId?: string;
+  componentId?: string;
 }) => {
   const thumbnailUrl = useImage({ fileId: fieldId });
 
+  const elementId = 'remove_thumbnail';
+
   if (!thumbnailUrl) return null;
   return (
     <>
       <img className={styles.thumbnail} src={thumbnailUrl} alt="thumbnail" />
-      <Button type="reset" onPress={() => onRemove()} className={styles.thumbnail__closeButton}>
+      <Button
+        data-qa-anchor={`${pageId}/${componentId}/${elementId}`}
+        type="reset"
+        onPress={() => onRemove()}
+        className={styles.thumbnail__closeButton}
+      >
         <CloseIcon className={styles.thumbnail__closeIcon} />
       </Button>
       {type === PostContentType.VIDEO && (
diff --git a/src/v4/social/internal-components/ImageThumbnail/ImageThumbnail.tsx b/src/v4/social/internal-components/ImageThumbnail/ImageThumbnail.tsx
index 790e9e10..f053d399 100644
--- a/src/v4/social/internal-components/ImageThumbnail/ImageThumbnail.tsx
+++ b/src/v4/social/internal-components/ImageThumbnail/ImageThumbnail.tsx
@@ -6,6 +6,7 @@ import useFileUpload from '~/v4/social/hooks/useFileUpload';
 import { FileRepository } from '@amityco/ts-sdk';
 
 interface ImageThumbnailProps {
+  pageId?: string;
   files: File[];
   uploadedFiles: Amity.File[];
   onChange: (data: { uploaded: Array<Amity.File>; uploading: Array<File> }) => void;
@@ -16,6 +17,7 @@ interface ImageThumbnailProps {
 }
 
 export function ImageThumbnail({
+  pageId = '*',
   files,
   uploadedFiles,
   onChange,
@@ -59,11 +61,16 @@ export function ImageThumbnail({
             ) : (
               <>
                 <img
+                  data-qa-anchor={`${pageId}/*/image_thumbnail`}
                   className={styles.thumbnail}
                   src={FileRepository.fileUrlWithSize((file as Amity.File)?.fileUrl, 'medium')}
                   alt={(file as Amity.File).attributes?.name}
                 />
-                <button type="reset" onClick={() => removeFile(file)}>
+                <button
+                  data-qa-anchor={`${pageId}/*/remove_thumbnail`}
+                  type="reset"
+                  onClick={() => removeFile(file)}
+                >
                   <CloseIcon className={styles.closeIcon} />
                 </button>
               </>
diff --git a/src/v4/social/internal-components/Lexical/nodes/MentionNode.ts b/src/v4/social/internal-components/Lexical/nodes/MentionNode.ts
index f4366ea5..dbf91919 100644
--- a/src/v4/social/internal-components/Lexical/nodes/MentionNode.ts
+++ b/src/v4/social/internal-components/Lexical/nodes/MentionNode.ts
@@ -89,6 +89,7 @@ export class MentionNode<T> extends TextNode {
   createDOM(config: EditorConfig): HTMLElement {
     const dom = super.createDOM(config);
     dom.className = styles.mention; //create css
+    dom.setAttribute('data-qa-anchor', 'mention-preview');
     return dom;
   }
 
diff --git a/src/v4/social/internal-components/PostMenu/PostMenu.tsx b/src/v4/social/internal-components/PostMenu/PostMenu.tsx
index 99862ac5..7ac2186a 100644
--- a/src/v4/social/internal-components/PostMenu/PostMenu.tsx
+++ b/src/v4/social/internal-components/PostMenu/PostMenu.tsx
@@ -183,6 +183,7 @@ export const PostMenu = ({
       ) : null}
       {showEditPostButton ? (
         <Button
+          data-qa-anchor={`${pageId}/${componentId}/edit_post`}
           className={styles.postMenu__item}
           onPress={() => {
             removeDrawerData();
@@ -197,7 +198,11 @@ export const PostMenu = ({
         </Button>
       ) : null}
       {showDeletePostButton ? (
-        <Button className={styles.postMenu__item} onPress={() => onDeleteClick()}>
+        <Button
+          data-qa-anchor={`${pageId}/${componentId}/delete_post`}
+          className={styles.postMenu__item}
+          onPress={() => onDeleteClick()}
+        >
           <TrashSvg className={styles.postMenu__deletePost__icon} />
           <Typography.Title className={styles.postMenu__deletePost__text}>
             Delete post
diff --git a/src/v4/social/internal-components/TabsBar/TabsBar.tsx b/src/v4/social/internal-components/TabsBar/TabsBar.tsx
index 8556a44d..0ba18f4a 100644
--- a/src/v4/social/internal-components/TabsBar/TabsBar.tsx
+++ b/src/v4/social/internal-components/TabsBar/TabsBar.tsx
@@ -37,7 +37,11 @@ export const TabsBar = ({
     >
       <Tabs.List className={styles.tabsList}>
         {tabs.map((tab) => (
-          <Tabs.Trigger value={tab.value} className={styles.tabsTrigger}>
+          <Tabs.Trigger
+            data-qa-anchor={`${pageId}/${componentId}/${tab.value}_tab`}
+            value={tab.value}
+            className={styles.tabsTrigger}
+          >
             <Typography.Title>{tab.label}</Typography.Title>
           </Tabs.Trigger>
         ))}
diff --git a/src/v4/social/internal-components/VideoThumbnail/VideoThumbnail.tsx b/src/v4/social/internal-components/VideoThumbnail/VideoThumbnail.tsx
index 918a1491..db3eb329 100644
--- a/src/v4/social/internal-components/VideoThumbnail/VideoThumbnail.tsx
+++ b/src/v4/social/internal-components/VideoThumbnail/VideoThumbnail.tsx
@@ -6,6 +6,7 @@ import { CloseIcon, ExclamationCircle, Play } from '~/icons';
 import { Spinner } from '~/v4/social/internal-components/Spinner';
 
 interface VideoThumbnailProps {
+  pageId?: string;
   files: File[];
   uploadedFiles: Amity.File[];
   onLoadingChange: (loading: boolean) => void;
@@ -18,6 +19,7 @@ interface VideoThumbnailProps {
 }
 
 export const VideoThumbnail = ({
+  pageId = '*',
   files,
   uploadedFiles,
   onLoadingChange,
@@ -69,8 +71,13 @@ export const VideoThumbnail = ({
             </div>
           ) : (
             <>
-              <img className={styles.thumbnail} src={file.thumbnail} />
+              <img
+                data-qa-anchor={`${pageId}/*/video_thumbnail`}
+                className={styles.thumbnail}
+                src={file.thumbnail}
+              />
               <button
+                data-qa-anchor={`${pageId}/*/remove_thumbnail`}
                 type="reset"
                 onClick={() => {
                   handleRemoveThumbnail(file.file, index);
diff --git a/src/v4/social/pages/CommunityProfilePage/CommunityProfilePage.tsx b/src/v4/social/pages/CommunityProfilePage/CommunityProfilePage.tsx
index c7b863cd..df2bee0d 100644
--- a/src/v4/social/pages/CommunityProfilePage/CommunityProfilePage.tsx
+++ b/src/v4/social/pages/CommunityProfilePage/CommunityProfilePage.tsx
@@ -82,7 +82,11 @@ export const CommunityProfilePage: React.FC<CommunityProfileProps> = ({ communit
         <RefreshSpinner className={styles.communityProfilePage__pullToRefresh__spinner} />
       </div>
 
-      {community ? <CommunityHeader community={community} /> : <CommunityProfileSkeleton />}
+      {community ? (
+        <CommunityHeader pageId={pageId} community={community} />
+      ) : (
+        <CommunityProfileSkeleton />
+      )}
 
       <div key={refreshKey}>{renderTabContent()}</div>
     </div>
diff --git a/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx b/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx
index 0af61570..ec9795cb 100644
--- a/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx
+++ b/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx
@@ -60,6 +60,7 @@ export function PostDetailPage({ id, hideTarget, category }: PostDetailPageProps
         <div className={styles.postDetailPage__comments}>
           {post && (
             <CommentList
+              pageId={pageId}
               referenceId={post.postId}
               referenceType="post"
               onClickReply={(comment: Amity.Comment) => setReplyComment(comment)}
@@ -97,6 +98,7 @@ export function PostDetailPage({ id, hideTarget, category }: PostDetailPageProps
       ) : (
         post && (
           <CommentComposer
+            pageId={pageId}
             referenceId={post.postId}
             referenceType={'post'}
             replyTo={replyComment}
diff --git a/src/v4/social/pages/SocialGlobalSearchPage/SocialGlobalSearchPage.tsx b/src/v4/social/pages/SocialGlobalSearchPage/SocialGlobalSearchPage.tsx
index 7e326d07..642754a2 100644
--- a/src/v4/social/pages/SocialGlobalSearchPage/SocialGlobalSearchPage.tsx
+++ b/src/v4/social/pages/SocialGlobalSearchPage/SocialGlobalSearchPage.tsx
@@ -106,6 +106,7 @@ export function SocialGlobalSearchPage() {
       {searchValue.length > 0 && (
         <TabsBar
           pageId={pageId}
+          componentId="top_search_bar"
           tabs={tabs}
           activeTab={activeTab}
           onTabChange={(newTab) => {