From 9bf3da1ad0d85807b6c3d1007a6da652285448d0 Mon Sep 17 00:00:00 2001
From: dathaquoc <dat.haquoc@ncc.asia>
Date: Fri, 26 Sep 2025 09:11:57 +0700
Subject: [PATCH 1/2] feat-63412

---
 .../src/lib/components/ChannelTopbar/index.tsx         |  7 +++++--
 .../src/lib/components/ChatWelcome/index.tsx           |  2 +-
 .../src/lib/components/SettingAccount/index.tsx        |  2 +-
 .../SettingProfile/SettingUserClanProfileCard.tsx      |  3 ++-
 libs/utils/src/lib/e2e-testing/constants.ts            | 10 ++++++++--
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/libs/components/src/lib/components/ChannelTopbar/index.tsx b/libs/components/src/lib/components/ChannelTopbar/index.tsx
index 0ed3135bcf..ee5743e42e 100644
--- a/libs/components/src/lib/components/ChannelTopbar/index.tsx
+++ b/libs/components/src/lib/components/ChannelTopbar/index.tsx
@@ -222,7 +222,10 @@ const TopBarChannelText = memo(() => {
 				)}
 
 				{currentClanId === '0' && (
-					<div className="flex items-center gap-3 flex-1 overflow-hidden">
+					<div
+						className="flex items-center gap-3 flex-1 overflow-hidden"
+						data-e2e={generateE2eId(`chat.direct_message.header.left_container`)}
+					>
 						<DmTopbarAvatar
 							isGroup={currentDmGroup?.type === ChannelType.CHANNEL_TYPE_GROUP}
 							avatar={dmUserAvatar}
@@ -446,7 +449,7 @@ const DmTopbarAvatar = ({ isGroup, avatar, avatarName }: { isGroup: boolean; ava
 	return (
 		<div className="flex items-center justify-center ">
 			{avatar ? (
-				<img className="w-8 h-8 rounded-full object-cover " src={createImgproxyUrl(avatar)} alt="" />
+				<img className="w-8 h-8 rounded-full object-cover " src={createImgproxyUrl(avatar)} alt="" data-e2e={generateE2eId(`avatar.image`)} />
 			) : (
 				<div className="w-8 h-8 rounded-full uppercase flex items-center justify-center font-semibold dark:bg-bgAvatarLight dark:text-bgAvatarDark text-bgAvatarLight">
 					{avatarName}
diff --git a/libs/components/src/lib/components/ChatWelcome/index.tsx b/libs/components/src/lib/components/ChatWelcome/index.tsx
index 3175bd1aad..bf2ba2356f 100644
--- a/libs/components/src/lib/components/ChatWelcome/index.tsx
+++ b/libs/components/src/lib/components/ChatWelcome/index.tsx
@@ -80,7 +80,7 @@ function ChatWelCome({ name, username, avatarDM, mode, isPrivate }: ChatWelComeP
 
 	return (
 		<div className="flex flex-col gap-3">
-			<div className="space-y-2 px-4 mb-0  flex-1 flex flex-col justify-end">
+			<div className="space-y-2 px-4 mb-0  flex-1 flex flex-col justify-end" data-e2e={generateE2eId('chat_welcome')}>
 				{
 					<>
 						{isChannel && (
diff --git a/libs/components/src/lib/components/SettingAccount/index.tsx b/libs/components/src/lib/components/SettingAccount/index.tsx
index ef44c2d3dd..92290df1ec 100644
--- a/libs/components/src/lib/components/SettingAccount/index.tsx
+++ b/libs/components/src/lib/components/SettingAccount/index.tsx
@@ -77,7 +77,7 @@ const SettingAccount = ({ onSettingProfile, menuIsOpen }: SettingAccountProps) =
 			<div className="w-full rounded-lg overflow-hidden bg-theme-setting-nav">
 				<div style={{ backgroundColor: color }} className="h-[100px]  "></div>
 				<div className="flex justify-between relative -top-5 px-4 flex-col sbm:flex-row sbm:items-center">
-					<div className="flex items-center gap-x-4">
+					<div className="flex items-center gap-x-4" data-e2e={generateE2eId(`user_setting.account.info`)}>
 						<AvatarImage
 							alt={userProfile?.user?.username || ''}
 							username={userProfile?.user?.username}
diff --git a/libs/components/src/lib/components/SettingProfile/SettingUserClanProfileCard.tsx b/libs/components/src/lib/components/SettingProfile/SettingUserClanProfileCard.tsx
index f57dc5861b..1f65bb3c0e 100644
--- a/libs/components/src/lib/components/SettingProfile/SettingUserClanProfileCard.tsx
+++ b/libs/components/src/lib/components/SettingProfile/SettingUserClanProfileCard.tsx
@@ -1,6 +1,7 @@
 import { useAuth, useMemberStatus } from '@mezon/core';
 import { selectAccountCustomStatus } from '@mezon/store';
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import AvatarProfile from '../ModalUserProfile/AvatarProfile';
@@ -57,7 +58,7 @@ const SettingUserClanProfileCard = (props: propProfilesform) => {
 			<div className="p-4 flex flex-col gap-4">
 				<div className="bg-theme-setting-primary text-theme-primary border-theme-primary shadow w-full p-4 rounded-[10px] flex flex-col gap-y-6 xl:gap-y-7">
 					<div className="w-[300px]">
-						<p className="font-bold tracking-wider text-xl one-line">
+						<p className="font-bold tracking-wider text-xl one-line" data-e2e={generateE2eId('user_setting.profile.user_profile.preview.display_name')}>
 							{profiles.displayName || currentDisplayName || userProfile?.user?.username}
 						</p>
 						<p className="font-medium tracking-wide text-sm">{userProfile?.user?.username}</p>
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index aa1c1e2410..ae660d7529 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -40,6 +40,7 @@ export const DATA_E2E_IDENTIFIER = {
 	panel: {
 		panel_item: ''
 	},
+	chat_welcome: '',
 	homepage: {
 		header: {
 			link: '',
@@ -258,6 +259,9 @@ export const DATA_E2E_IDENTIFIER = {
 	},
 	chat: {
 		direct_message: {
+			header: {
+				left_container: ''
+			},
 			chat_list: '',
 			chat_item: {
 				username: '',
@@ -402,14 +406,16 @@ export const DATA_E2E_IDENTIFIER = {
 			edit_display_name: '',
 			edit_username: '',
 			set_password: '',
-			tab_account: ''
+			tab_account: '',
+			info: ''
 		},
 		profile: {
 			button_setting: '',
 			tab_profile: '',
 			user_profile: {
 				preview: {
-					avatar: ''
+					avatar: '',
+					display_name: ''
 				},
 				input: {
 					display_name: '',

From 2b8663feca83ff74ca4848f8fd6802cafd593c4a Mon Sep 17 00:00:00 2001
From: dathaquoc <dat.haquoc@ncc.asia>
Date: Fri, 26 Sep 2025 11:08:53 +0700
Subject: [PATCH 2/2] feat-63412

---
 libs/components/src/lib/components/ChannelTopbar/index.tsx | 6 +++++-
 libs/utils/src/lib/e2e-testing/constants.ts                | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/libs/components/src/lib/components/ChannelTopbar/index.tsx b/libs/components/src/lib/components/ChannelTopbar/index.tsx
index ee5743e42e..caf843ffc2 100644
--- a/libs/components/src/lib/components/ChannelTopbar/index.tsx
+++ b/libs/components/src/lib/components/ChannelTopbar/index.tsx
@@ -685,7 +685,11 @@ const DmTopbarTools = memo(() => {
 						</button>
 					)}
 					{currentDmGroup?.type === ChannelType.CHANNEL_TYPE_DM && (
-						<button title={t('tooltips.showUserProfile')} onClick={() => setIsUseProfileDM(!isUseProfileDM)}>
+						<button
+							title={t('tooltips.showUserProfile')}
+							onClick={() => setIsUseProfileDM(!isUseProfileDM)}
+							data-e2e={generateE2eId(`chat.direct_message.header.right_container.user_profile`)}
+						>
 							<span>
 								<Icons.IconUserProfileDM defaultSize="size-5" />
 							</span>
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index e62ef211bd..a645978700 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -296,7 +296,10 @@ export const DATA_E2E_IDENTIFIER = {
 	chat: {
 		direct_message: {
 			header: {
-				left_container: ''
+				left_container: '',
+				right_container: {
+					user_profile: ''
+				}
 			},
 			chat_list: '',
 			chat_item: {