diff --git a/libs/components/src/lib/components/ChannelList/ChannelListComponents/index.tsx b/libs/components/src/lib/components/ChannelList/ChannelListComponents/index.tsx
index 61b0ff6dd0..1db92e93b0 100644
--- a/libs/components/src/lib/components/ChannelList/ChannelListComponents/index.tsx
+++ b/libs/components/src/lib/components/ChannelList/ChannelListComponents/index.tsx
@@ -19,7 +19,7 @@ import {
 	useAppDispatch
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { DONE_ONBOARDING_STATUS, EPermission } from '@mezon/utils';
+import { DONE_ONBOARDING_STATUS, EPermission, generateE2eId } from '@mezon/utils';
 import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useModal } from 'react-modal-hook';
@@ -128,6 +128,7 @@ export const Events = memo(() => {
 			<div
 				className="self-stretch  items-center inline-flex cursor-pointer px-2 rounded-lg h-[34px] bg-item-hover  text-theme-primary text-theme-primary-hover"
 				onClick={openModal}
+				data-e2e={generateE2eId('clan_page.side_bar.button.events')}
 			>
 				<div className="grow w-5 flex-row items-center gap-2 flex">
 					<div className="h-5 relative flex justify-center gap-2  items-center">
diff --git a/libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/eventInfoModal.tsx b/libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/eventInfoModal.tsx
index 99ad345b5e..dcabc6a8b5 100644
--- a/libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/eventInfoModal.tsx
+++ b/libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/eventInfoModal.tsx
@@ -3,7 +3,7 @@ import { selectCurrentChannelId, selectCurrentClanId, selectTheme } from '@mezon
 import { handleUploadFile, useMezon } from '@mezon/transport';
 import { TextArea, TimePicker } from '@mezon/ui';
 import type { ContenSubmitEventProps } from '@mezon/utils';
-import { ERepeatType, MAX_FILE_SIZE_1MB, fileTypeImage } from '@mezon/utils';
+import { ERepeatType, MAX_FILE_SIZE_1MB, fileTypeImage, generateE2eId } from '@mezon/utils';
 import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -296,7 +296,7 @@ const EventInfoModal = (props: EventInfoModalProps) => {
 					>
 						{t('actions.uploadImage')}
 					</div>
-					<input type="file" hidden onChange={(e) => handleFile(e)} className="w-full text-sm text-slate-500 " />
+					<input type="file" hidden onChange={(e) => handleFile(e)} className="w-full text-sm text-slate-500 " data-e2e={generateE2eId('clan_page.modal.create_event.upload.image_cover_input')} />
 				</label>
 				{contentSubmit.logo && <img src={contentSubmit.logo} alt="logo" className="max-h-[180px] rounded w-full object-cover" />}
 			</div>
diff --git a/libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/index.tsx b/libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/index.tsx
index 3f652905c5..b16b0b2e1d 100644
--- a/libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/index.tsx
+++ b/libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/index.tsx
@@ -11,7 +11,7 @@ import {
 	useAppDispatch,
 	useAppSelector
 } from '@mezon/store';
-import { ContenSubmitEventProps, ERepeatType, OptionEvent, Tabs_Option } from '@mezon/utils';
+import { ContenSubmitEventProps, ERepeatType, generateE2eId, OptionEvent, Tabs_Option } from '@mezon/utils';
 import isEqual from 'lodash.isequal';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -401,6 +401,7 @@ const ModalCreate = (props: ModalCreateProps) => {
 						<button
 							className={`px-4 py-2 rounded font-semibold text-white bg-primary ${(!buttonWork || errorTime || errorOption) && ' bg-opacity-50'}`}
 							onClick={() => handleNext(currentModal)}
+							data-e2e={generateE2eId('clan_page.modal.create_event.next')}
 						>
 							{t('actions.next')}
 						</button>
diff --git a/libs/components/src/lib/components/ChannelList/EventChannelModal/StartEvent/StartEvent.tsx b/libs/components/src/lib/components/ChannelList/EventChannelModal/StartEvent/StartEvent.tsx
index 236a056d6f..540c221815 100644
--- a/libs/components/src/lib/components/ChannelList/EventChannelModal/StartEvent/StartEvent.tsx
+++ b/libs/components/src/lib/components/ChannelList/EventChannelModal/StartEvent/StartEvent.tsx
@@ -4,6 +4,7 @@ import { Icons } from '@mezon/ui';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import ListEventManagement from './ListEventManagement';
+import { generateE2eId } from '@mezon/utils';
 
 type StartEventModalProps = {
 	onClose: () => void;
@@ -31,7 +32,7 @@ export const StartEventModal = (props: StartEventModalProps) => {
 						</h4>
 					</div>
 					<div className="w-[0.1px] h-4 bg-gray-400"></div>
-					<div className="btn-primary btn-primary-hover  px-2 py-1 rounded-lg text-white font-medium cursor-pointer" onClick={onOpenCreate}>
+					<div className="btn-primary btn-primary-hover  px-2 py-1 rounded-lg text-white font-medium cursor-pointer" onClick={onOpenCreate} data-e2e={generateE2eId('clan_page.modal.create_event.button_create')}>
 						{t('actions.create')}
 					</div>
 				</div>
diff --git a/libs/components/src/lib/components/ChannelSetting/channelSettingItem.tsx b/libs/components/src/lib/components/ChannelSetting/channelSettingItem.tsx
index 74079a162c..ad95cee01e 100644
--- a/libs/components/src/lib/components/ChannelSetting/channelSettingItem.tsx
+++ b/libs/components/src/lib/components/ChannelSetting/channelSettingItem.tsx
@@ -1,7 +1,7 @@
 import { useChannels, usePermissionChecker } from '@mezon/core';
 import { ChannelsEntity, selectChannelById, selectWelcomeChannelByClanId, useAppSelector } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { EPermission, IChannel, checkIsThread } from '@mezon/utils';
+import { EPermission, IChannel, checkIsThread, generateE2eId } from '@mezon/utils';
 import { ChannelType } from 'mezon-js';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -98,7 +98,12 @@ const ChannelSettingItem = (props: ChannelSettingItemProps) => {
 					</p>
 				</div>
 
-				<ChannelSettingItemButton tabName={EChannelSettingTab.OVERVIEW} handleOnClick={handleButtonClick} selectedButton={selectedButton} getTabTranslation={getTabTranslation} />
+				<ChannelSettingItemButton
+					tabName={EChannelSettingTab.OVERVIEW}
+					handleOnClick={handleButtonClick}
+					selectedButton={selectedButton}
+					getTabTranslation={getTabTranslation}
+				/>
 				{!isThread && (
 					<>
 						<ChannelSettingItemButton
@@ -186,6 +191,7 @@ const ChannelSettingItemButton = ({
 		<button
 			className={`text-theme-primary text-[16px] font-medium rounded-[5px] text-left ml-[-8px] p-2 mt-2 bg-item-theme-hover ${selectedButton === tabName ? 'bg-item-theme text-theme-primary-active' : ''}`}
 			onClick={handleOnClickTabChannelSetting}
+			data-e2e={generateE2eId('channel_setting_page.side_bar.item')}
 		>
 			{getTabTranslation ? getTabTranslation(tabName) : tabName}
 		</button>
diff --git a/libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanBannerBackground/index.tsx b/libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanBannerBackground/index.tsx
index 6a9d3b1dfb..4e8c168528 100644
--- a/libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanBannerBackground/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanBannerBackground/index.tsx
@@ -1,7 +1,7 @@
 import { selectCurrentChannelId, selectCurrentClanId } from '@mezon/store';
 import { handleUploadFile, useMezon } from '@mezon/transport';
 import { Icons } from '@mezon/ui';
-import { MAX_FILE_SIZE_10MB, fileTypeImage } from '@mezon/utils';
+import { MAX_FILE_SIZE_10MB, fileTypeImage, generateE2eId } from '@mezon/utils';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -95,7 +95,14 @@ const ClanBannerBackground = ({ onUpload, urlImage }: ClanBannerBackgroundProps)
 						>
 							{!urlImage && <p className="text-xl font-semibold text-center pt-[25%]">{t('clanBanner.chooseImage')}</p>}
 						</div>
-						<input ref={fileInputRef} id="upload_banner_background" onChange={(e) => handleFile(e)} type="file" className="hidden" />
+						<input
+							ref={fileInputRef}
+							id="upload_banner_background"
+							onChange={(e) => handleFile(e)}
+							type="file"
+							className="hidden"
+							data-e2e={generateE2eId('clan_page.settings.upload.clan_banner_input')}
+						/>
 					</label>
 					<button onClick={handleCloseFile} className="absolute top-4 right-4 w-7 h-7 rounded-full  flex items-center justify-center">
 						{urlImage ? <Icons.Close /> : <Icons.ImageUploadIcon />}
diff --git a/libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanLogoName/index.tsx b/libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanLogoName/index.tsx
index eb9db9d332..e7760ad413 100644
--- a/libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanLogoName/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanLogoName/index.tsx
@@ -112,7 +112,14 @@ const ClanLogoName = ({ onUpload, onGetClanName }: ClanLogoNameProps) => {
 										</span>
 									)}
 								</div>
-								<input ref={fileInputRef} id="upload_logo" onChange={(e) => handleFile(e)} type="file" className="hidden" />
+								<input
+									ref={fileInputRef}
+									id="upload_logo"
+									onChange={(e) => handleFile(e)}
+									type="file"
+									className="hidden"
+									data-e2e={generateE2eId('clan_page.settings.upload.clan_logo_input')}
+								/>
 							</label>
 							<div className="absolute right-[-10px] top-0 p-[5px] text-theme-primary rounded-full z-50 shadow-xl border-theme-primary">
 								<Icons.SelectFileIcon />
diff --git a/libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/ClanWebhookItemModal/index.tsx b/libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/ClanWebhookItemModal/index.tsx
index 3ac542d953..d8bb2acfc0 100644
--- a/libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/ClanWebhookItemModal/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/ClanWebhookItemModal/index.tsx
@@ -1,7 +1,7 @@
 import { selectCurrentClanId, selectMemberClanByUserId, settingClanStickerActions, updateClanWebhookById, useAppDispatch } from '@mezon/store';
 import { handleUploadFile, useMezon } from '@mezon/transport';
 import { Icons } from '@mezon/ui';
-import { MAX_FILE_SIZE_8MB, fileTypeImage } from '@mezon/utils';
+import { MAX_FILE_SIZE_8MB, fileTypeImage, generateE2eId } from '@mezon/utils';
 import type { ApiClanWebhook, ApiMessageAttachment, MezonUpdateClanWebhookByIdBody } from 'mezon-js/api.gen';
 import type { ChangeEvent } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -46,6 +46,7 @@ const ClanWebhookItemModal = ({ webhookItem }: IClanWebhookItemModalProps) => {
 					<div
 						onClick={() => setIsExpand(!isExpand)}
 						className={`cursor-pointer transition duration-100 ease-in-out ${isExpand ? '' : '-rotate-90'}`}
+						data-e2e={generateE2eId('clan_page.settings.integrations.navigate_webhook_button')}
 					>
 						<Icons.ArrowDown defaultSize="h-[30px] w-[30px] dark:text-[#b5bac1] text-black" />
 					</div>
@@ -200,7 +201,7 @@ const ExpendedClanWebhookModal = ({ webhookItem }: IExpendedClanWebhookModal) =>
 			<div ref={modalRef} tabIndex={-1} className="pt-[20px] mt-[12px] border-t dark:border-[#3b3d44]">
 				<div className="flex gap-2">
 					<div className="w-3/12 dark:text-[#b5bac1] text-textLightTheme">
-						<input onChange={handleChooseFile} ref={avatarRef} type="file" hidden />
+						<input onChange={handleChooseFile} ref={avatarRef} type="file" hidden data-e2e={generateE2eId('clan_page.settings.upload.clan_webhook_avatar_input')}  />
 						<div className="relative w-fit">
 							<div
 								onClick={() => avatarRef.current?.click()}
diff --git a/libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/index.tsx b/libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/index.tsx
index 3d2801ede5..58d1873531 100644
--- a/libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/index.tsx
@@ -1,5 +1,6 @@
 import { generateClanWebhook, selectCurrentClanId, useAppDispatch } from '@mezon/store';
 import { Image } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import { ApiClanWebhook, ApiGenerateClanWebhookRequest } from 'mezon-js/api.gen';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -54,6 +55,7 @@ const ClanWebhooks = ({ allClanWebhooks }: IClanWebhooksProps) => {
 					<div
 						onClick={handleAddWebhook}
 						className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer "
+						data-e2e={generateE2eId('clan_page.settings.integrations.new_clan_webhook_button')}
 					>
 						{t('newClanWebhook')}
 					</div>
@@ -65,7 +67,8 @@ const ClanWebhooks = ({ allClanWebhooks }: IClanWebhooksProps) => {
 					<div className="font-medium ">{t('noWebhooks')}</div>
 					<div
 						onClick={handleAddWebhook}
-							className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer "
+						className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer "
+						data-e2e={generateE2eId('clan_page.settings.integrations.new_clan_webhook_button')}
 					>
 						{t('newClanWebhook')}
 					</div>
diff --git a/libs/components/src/lib/components/ClanSettings/Integrations/MainClanIntegration/index.tsx b/libs/components/src/lib/components/ClanSettings/Integrations/MainClanIntegration/index.tsx
index cfe38da7c0..e8404d14d1 100644
--- a/libs/components/src/lib/components/ClanSettings/Integrations/MainClanIntegration/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/Integrations/MainClanIntegration/index.tsx
@@ -1,4 +1,5 @@
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import { ApiClanWebhook } from 'mezon-js/api.gen';
 import { useTranslation } from 'react-i18next';
 
@@ -22,21 +23,20 @@ const MainClanIntegrations = ({ setIsOpenClanWebhooks, allClanWebhooks }: IClanI
 				<Icons.WebhooksIcon />
 				<div>
 					<div className="pb-[3px] font-semibold break-all text-theme-primary">{t('clanWebhooks')}</div>
-					<div className="text-[12px] text-theme-primary">
-						{t('webhook', { count: allClanWebhooks?.length || 0 })}
-					</div>
+					<div className="text-[12px] text-theme-primary">{t('webhook', { count: allClanWebhooks?.length || 0 })}</div>
 				</div>
 			</div>
 			{allClanWebhooks && allClanWebhooks?.length === 0 ? (
 				<div
 					onClick={setIsOpenClanWebhooks}
 					className="bg-[#5865f2] hover:bg-[#4752c4] text-white rounded-md py-2 px-3 cursor-pointer font-semibold"
+					data-e2e={generateE2eId('clan_page.settings.integrations.create_clan_webhook_button')}
 				>
 					{t('createClanWebhook')}
 				</div>
 			) : (
 				<div className="items-center cursor-pointer text-[14px] flex gap-[4px]">
-						<div className="text-theme-primary">{t('viewClanWebhook')}</div>
+					<div className="text-theme-primary">{t('viewClanWebhook')}</div>
 					<Icons.ArrowDown defaultSize="h-[15px] w-[15px] -rotate-90" />
 				</div>
 			)}
diff --git a/libs/components/src/lib/components/ClanSettings/Integrations/MainIntegrations/index.tsx b/libs/components/src/lib/components/ClanSettings/Integrations/MainIntegrations/index.tsx
index 07fbe238fa..bf8f84c4f9 100644
--- a/libs/components/src/lib/components/ClanSettings/Integrations/MainIntegrations/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/Integrations/MainIntegrations/index.tsx
@@ -1,4 +1,5 @@
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import type { ApiWebhook } from 'mezon-js/api.gen';
 import { useTranslation } from 'react-i18next';
 
@@ -37,6 +38,7 @@ const MainIntegrations = ({ setIsOpenWebhooks, allWebhooks }: IIntegrationProps)
 					<div
 						onClick={setIsOpenWebhooks}
 						className="bg-[#5865f2] hover:bg-[#4752c4] text-white rounded-md py-2 px-3 cursor-pointer font-semibold"
+						data-e2e={generateE2eId('channel_setting_page.webhook.button.create_webhook')}
 					>
 						{t('createWebhook')}
 					</div>
diff --git a/libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/WebhookItemModal/index.tsx b/libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/WebhookItemModal/index.tsx
index 8a826657aa..2b1e6bf599 100644
--- a/libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/WebhookItemModal/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/WebhookItemModal/index.tsx
@@ -13,7 +13,7 @@ import {
 import { handleUploadFile, useMezon } from '@mezon/transport';
 import { Icons, Menu } from '@mezon/ui';
 import type { IChannel } from '@mezon/utils';
-import { ChannelIsNotThread, MAX_FILE_SIZE_8MB, fileTypeImage } from '@mezon/utils';
+import { ChannelIsNotThread, MAX_FILE_SIZE_8MB, fileTypeImage, generateE2eId } from '@mezon/utils';
 import type { ApiMessageAttachment, ApiWebhook, MezonUpdateWebhookByIdBody } from 'mezon-js/api.gen';
 import type { ChangeEvent, ReactElement } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -59,6 +59,7 @@ const WebhookItemModal = ({ webhookItem, currentChannel, isClanSetting }: IWebho
 					<div
 						onClick={() => setIsExpand(!isExpand)}
 						className={`cursor-pointer transition duration-100 ease-in-out ${isExpand ? '' : '-rotate-90'}`}
+						data-e2e={generateE2eId('channel_setting_page.webhook.button.view_webhook')}
 					>
 						<Icons.ArrowDown defaultSize="h-[30px] w-[30px] dark:text-[#b5bac1] text-black" />
 					</div>
@@ -204,7 +205,7 @@ const ExpendedWebhookModal = ({ webhookItem, currentChannel, isClanSetting }: IE
 			<div ref={modalRef} tabIndex={-1} className="pt-[20px] mt-[12px] border-t dark:border-[#3b3d44]">
 				<div className="flex gap-2">
 					<div className="w-3/12 dark:text-[#b5bac1] text-textLightTheme">
-						<input onChange={handleChooseFile} ref={avatarRef} type="file" hidden />
+						<input onChange={handleChooseFile} ref={avatarRef} type="file" hidden data-e2e={generateE2eId('channel_setting_page.webhook.input.avatar_channel_webhook')} />
 						<div className="relative w-fit">
 							<div
 								onClick={() => avatarRef.current?.click()}
diff --git a/libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/index.tsx b/libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/index.tsx
index f82bc6a9f9..b273a3e518 100644
--- a/libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/index.tsx
@@ -1,6 +1,6 @@
 import { generateWebhook, selectCurrentClanId, useAppDispatch } from '@mezon/store';
 import { Image } from '@mezon/ui';
-import { IChannel } from '@mezon/utils';
+import { generateE2eId, IChannel } from '@mezon/utils';
 import { ApiWebhook, ApiWebhookCreateRequest } from 'mezon-js/api.gen';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -57,6 +57,7 @@ const Webhooks = ({ allWebhooks, currentChannel, isClanSetting }: IWebhooksProps
 					<div
 						onClick={handleAddWebhook}
 						className="py-2 px-4 btn-primary btn-primary-hover  rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer "
+						data-e2e={generateE2eId('channel_setting_page.webhook.button.new_webhook')}
 					>
 						{t('newWebhook')}
 					</div>
@@ -71,7 +72,8 @@ const Webhooks = ({ allWebhooks, currentChannel, isClanSetting }: IWebhooksProps
 					<div className="font-medium ">{t('noWebhooks')}</div>
 					<div
 						onClick={handleAddWebhook}
-							className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer"
+						className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer"
+						data-e2e={generateE2eId('channel_setting_page.webhook.button.new_webhook')}
 					>
 						{t('newWebhook')}
 					</div>
diff --git a/libs/components/src/lib/components/ClanSettings/SettingEmoji/index.tsx b/libs/components/src/lib/components/ClanSettings/SettingEmoji/index.tsx
index 6ea2b615fd..f04162120b 100644
--- a/libs/components/src/lib/components/ClanSettings/SettingEmoji/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/SettingEmoji/index.tsx
@@ -1,4 +1,5 @@
 import { selectCurrentClanId, selectEmojiByClanId, settingClanStickerActions, useAppDispatch, useAppSelector } from '@mezon/store';
+import { generateE2eId } from '@mezon/utils';
 import type { ClanEmoji } from 'mezon-js';
 import type { RefObject } from 'react';
 import { useCallback, useState } from 'react';
@@ -54,6 +55,7 @@ const SettingEmoji = ({ parentRef }: { parentRef: RefObject<HTMLDivElement> }) =
 				<div
 					onClick={handleCreateEmoji}
 					className="h-[38px] font-semibold rounded-lg btn-primary btn-primary-hover w-28 relative flex flex-row items-center justify-center cursor-pointer"
+					data-e2e={generateE2eId('clan_page.settings.emoji.upload')}
 				>
 					{t('emoji.uploadEmoji')}
 				</div>
diff --git a/libs/components/src/lib/components/ClanSettings/SettingItem/index.tsx b/libs/components/src/lib/components/ClanSettings/SettingItem/index.tsx
index df0d3dc1d4..a910091612 100644
--- a/libs/components/src/lib/components/ClanSettings/SettingItem/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/SettingItem/index.tsx
@@ -1,6 +1,7 @@
 import { selectCloseMenu, selectCurrentClan } from '@mezon/store';
+import { generateE2eId } from '@mezon/utils';
 import { useSelector } from 'react-redux';
-import { ItemObjProps } from '../ItemObj';
+import type { ItemObjProps } from '../ItemObj';
 
 type SettingItemProps = {
 	name: string;
@@ -23,6 +24,7 @@ const SettingItem = ({ name, active, onClick, handleMenu, setting }: SettingItem
 					handleMenu(false);
 				}
 			}}
+			data-e2e={generateE2eId('clan_page.settings.sidebar.item')}
 		>
 			{setting?.id === 'on-boarding' && <div className="absolute top-[4px] right-[8px] ">{currentClan?.is_onboarding ? 'ON' : 'OFF'}</div>}
 			{name}
diff --git a/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ClanGuideSetting.tsx b/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ClanGuideSetting.tsx
index 9e11159473..100133a624 100644
--- a/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ClanGuideSetting.tsx
+++ b/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ClanGuideSetting.tsx
@@ -8,7 +8,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { titleMission } from '@mezon/utils';
+import { generateE2eId, titleMission } from '@mezon/utils';
 import { ApiOnboardingItem } from 'mezon-js/api.gen';
 import { ReactNode, useEffect } from 'react';
 import { useModal } from 'react-modal-hook';
@@ -141,6 +141,7 @@ function ClanGuideSetting({ setOpenModalSaveChanges }: ClanGuideSettingProps = {
 					<button
 						className="flex items-center justify-center p-4 text-primary text-base gap-1 border-dashed border-2 border-gray-400 dark:border-channelTextLabel rounded-md hover:bg-gray-100 dark:hover:bg-bgSecondaryHover transition-colors"
 						onClick={openModalAddRules}
+						data-e2e={generateE2eId('clan_page.settings.onboarding.button.add_resources')}
 					>
 						<Icons.AddIcon className="w-4 h-4" /> Add a resource
 					</button>
diff --git a/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ModalAddRule.tsx b/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ModalAddRule.tsx
index 5e5c7d4e81..98d4511c9d 100644
--- a/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ModalAddRule.tsx
+++ b/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ModalAddRule.tsx
@@ -1,6 +1,6 @@
 import { editOnboarding, EGuideType, onboardingActions, useAppDispatch } from '@mezon/store';
 import { handleUploadEmoticon, useMezon } from '@mezon/transport';
-import { fileTypeImage, MAX_FILE_SIZE_10MB } from '@mezon/utils';
+import { fileTypeImage, generateE2eId, MAX_FILE_SIZE_10MB } from '@mezon/utils';
 import { Snowflake } from '@theinternetfolks/snowflake';
 import type { ApiOnboardingItem } from 'mezon-js/api.gen';
 import type { ChangeEvent } from 'react';
@@ -192,6 +192,7 @@ const ModalAddRules = ({ onClose, ruleEdit, tempId }: { onClose: () => void; rul
 								tabIndex={0}
 								accept=".jpg,.jpeg,.png,.gif"
 								onChange={handleAddImage}
+								data-e2e={generateE2eId('clan_page.settings.upload.onboarding_resource_input')}
 							/>
 						</button>
 						<div className="h-12 aspect-square rounded-md flex overflow-hidden bg-white dark:bg-bgSecondaryHover border border-gray-200 dark:border-transparent">
diff --git a/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/index.tsx b/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/index.tsx
index 2cbf5ca4a9..1fa34140a0 100644
--- a/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/SettingOnBoarding/index.tsx
@@ -13,6 +13,7 @@ import ModalSaveChanges from '../ClanSettingOverview/ModalSaveChanges';
 import GuideItemLayout from './GuideItemLayout';
 import ClanGuideSetting from './Mission/ClanGuideSetting';
 import Questions from './Questions/Questions';
+import { generateE2eId } from '@mezon/utils';
 
 export enum EOnboardingStep {
 	QUESTION,
@@ -350,6 +351,7 @@ const MainIndex = ({ handleGoToPage, onCloseSetting, showOnboardingHighlight }:
 							<div
 								className="w-[60px] h-[32px] flex justify-center items-center rounded-lg border-theme-primary bg-secondary-button-hover  cursor-pointer"
 								onClick={() => handleGoToPage(EOnboardingStep.MISSION)}
+								data-e2e={generateE2eId('clan_page.settings.onboarding.button.clan_guide')}
 							>
 								{t('buttons.edit')}
 							</div>
diff --git a/libs/components/src/lib/components/ClanSettings/SettingSoundEffect/ModalUploadSound.tsx b/libs/components/src/lib/components/ClanSettings/SettingSoundEffect/ModalUploadSound.tsx
index f1c50fd08a..8c2335ea1a 100644
--- a/libs/components/src/lib/components/ClanSettings/SettingSoundEffect/ModalUploadSound.tsx
+++ b/libs/components/src/lib/components/ClanSettings/SettingSoundEffect/ModalUploadSound.tsx
@@ -3,6 +3,7 @@ import type React from 'react';
 import { MediaType, selectCurrentClanId, soundEffectActions, useAppDispatch } from '@mezon/store';
 import { handleUploadEmoticon, useMezon } from '@mezon/transport';
 import { Icons, Modal } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import { Snowflake } from '@theinternetfolks/snowflake';
 import { useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -214,6 +215,7 @@ const ModalUploadSound = ({ sound, onSuccess, onClose }: ModalUploadSoundProps)
 											accept="audio/mp3,audio/mpeg,audio/wav"
 											className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
 											onChange={handleFileChange}
+											data-e2e={generateE2eId('clan_page.settings.upload.voice_sticker_input')}
 										/>
 
 										<div
@@ -292,7 +294,7 @@ const ModalUploadSound = ({ sound, onSuccess, onClose }: ModalUploadSoundProps)
 										<Icons.AppHelpIcon className="w-4 h-4 text-[#f04747]" />
 									</div>
 									<div>
-										<p className="text-xs text-[#f04747]">{error}</p>
+										<p className="text-xs text-[#f04747]" data-e2e={generateE2eId('clan_page.settings.upload.voice_sticker_input.error')}>{error}</p>
 									</div>
 								</div>
 							)}
diff --git a/libs/components/src/lib/components/ClanSettings/SettingSoundEffect/index.tsx b/libs/components/src/lib/components/ClanSettings/SettingSoundEffect/index.tsx
index 7f7efc072f..cd1ca3966d 100644
--- a/libs/components/src/lib/components/ClanSettings/SettingSoundEffect/index.tsx
+++ b/libs/components/src/lib/components/ClanSettings/SettingSoundEffect/index.tsx
@@ -11,6 +11,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import type { ClanSticker } from 'mezon-js';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -94,9 +95,7 @@ const SettingSoundEffect = () => {
 				<div className="flex items-center text-theme-primary-active gap-2 font-bold text-xs uppercase">
 					<span>{t('main.uploadInstructions')}</span>
 				</div>
-				<p className="text-theme-primary">
-					{t('main.fileRequirements')}
-				</p>
+				<p className="text-theme-primary">{t('main.fileRequirements')}</p>
 			</div>
 			<div className="flex p-4 bg-theme-setting-nav rounded-lg shadow-sm hover:shadow-md transition duration-200  border-theme-primary">
 				<div className="flex-1 w-full flex flex-col">
@@ -111,6 +110,7 @@ const SettingSoundEffect = () => {
 						setSelectedSound(null);
 						setShowModal(true);
 					}}
+					data-e2e={generateE2eId('clan_page.settings.voice_sticker.button_upload')}
 				>
 					<span className="flex items-center gap-2">{t('main.uploadSound')}</span>
 				</button>
diff --git a/libs/components/src/lib/components/ClanSettings/SettingSticker/ModalEditSticker.tsx b/libs/components/src/lib/components/ClanSettings/SettingSticker/ModalEditSticker.tsx
index 6ea4a0f742..01553f61a1 100644
--- a/libs/components/src/lib/components/ClanSettings/SettingSticker/ModalEditSticker.tsx
+++ b/libs/components/src/lib/components/ClanSettings/SettingSticker/ModalEditSticker.tsx
@@ -3,7 +3,7 @@ import { createSticker, emojiSuggestionActions, selectCurrentClanId, updateStick
 import { handleUploadEmoticon, useMezon } from '@mezon/transport';
 
 import { Button, ButtonLoading, Checkbox, Icons, InputField } from '@mezon/ui';
-import { LIMIT_SIZE_UPLOAD_IMG, fileTypeImage, resizeFileImage, sanitizeUrlSecure } from '@mezon/utils';
+import { LIMIT_SIZE_UPLOAD_IMG, fileTypeImage, generateE2eId, resizeFileImage, sanitizeUrlSecure } from '@mezon/utils';
 import { Snowflake } from '@theinternetfolks/snowflake';
 import type { ClanEmoji, ClanSticker } from 'mezon-js';
 import type { ApiClanStickerAddRequest, MezonUpdateClanEmojiByIdBody } from 'mezon-js/api.gen';
@@ -299,6 +299,7 @@ const ModalSticker = ({ graphic, handleCloseModal, type }: ModalEditStickerProps
 											onChange={handleChooseFile}
 											ref={fileRef}
 											onKeyDown={handleOnEnter}
+											data-e2e={generateE2eId('clan_page.settings.upload.emoji_input')}
 										/>
 									</button>
 								)}
diff --git a/libs/components/src/lib/components/DragAndDrop/TooManyUpload.tsx b/libs/components/src/lib/components/DragAndDrop/TooManyUpload.tsx
index e04318b5b5..eada144f72 100644
--- a/libs/components/src/lib/components/DragAndDrop/TooManyUpload.tsx
+++ b/libs/components/src/lib/components/DragAndDrop/TooManyUpload.tsx
@@ -1,6 +1,6 @@
 import { useEscapeKey } from '@mezon/core';
 import { Icons } from '@mezon/ui';
-import { MAX_FILE_ATTACHMENTS, UploadLimitReason } from '@mezon/utils';
+import { MAX_FILE_ATTACHMENTS, UploadLimitReason, generateE2eId } from '@mezon/utils';
 import { useMemo } from 'react';
 
 interface ITooManyUploadProps {
@@ -24,7 +24,7 @@ const TooManyUpload = ({ togglePopup, limitReason, limitSize }: ITooManyUploadPr
 		};
 	}, [limitReason]);
 	return (
-		<div className="w-screen h-screen flex justify-center items-center fixed top-0 left-0 z-30">
+		<div className="w-screen h-screen flex justify-center items-center fixed top-0 left-0 z-30" data-e2e={generateE2eId('modal.validate_file')}>
 			<div className="fixed inset-0 bg-black opacity-80" onClick={togglePopup} />
 			<div className="w-[25rem] h-[15rem] bg-red-500 flex flex-row justify-center  items-center rounded-lg z-50 relative">
 				<Icons.FileAndFolder />
@@ -32,10 +32,10 @@ const TooManyUpload = ({ togglePopup, limitReason, limitSize }: ITooManyUploadPr
 				<div className="border-2 border-white w-[90%] h-[86%] rounded-lg border-dashed">
 					<div className="flex flex-col justify-center mt-14">
 						<div className=" w-full flex flex-row justify-center">
-							<h1 className=" font-bold text-2xl mt-[1rem] text-center">{title}</h1>
+							<h1 className=" font-bold text-2xl mt-[1rem] text-center" data-e2e={generateE2eId('modal.validate_file.title')}>{title}</h1>
 						</div>
 						<div className=" w-full flex flex-row justify-center text-center mt-[1rem]">
-							<p className="w-[85%]">{content}</p>
+							<p className="w-[85%]" data-e2e={generateE2eId('modal.validate_file.content')}>{content}</p>
 						</div>
 					</div>
 				</div>
diff --git a/libs/components/src/lib/components/EnableComunityClan/index.tsx b/libs/components/src/lib/components/EnableComunityClan/index.tsx
index 5372155baa..53052678c9 100644
--- a/libs/components/src/lib/components/EnableComunityClan/index.tsx
+++ b/libs/components/src/lib/components/EnableComunityClan/index.tsx
@@ -1,4 +1,5 @@
 import { selectIsCommunityEnabled, useAppSelector } from '@mezon/store';
+import { generateE2eId } from '@mezon/utils';
 import { useTranslation } from 'react-i18next';
 
 const EnableComunity = ({ onEnable, clanId }: { onEnable: () => void; clanId?: string }) => {
@@ -32,6 +33,7 @@ const EnableComunity = ({ onEnable, clanId }: { onEnable: () => void; clanId?: s
 				<button
 					onClick={onEnable}
 					className="group relative px-10 py-4 bg-white text-[#5865F2] font-bold text-lg rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-out hover:bg-gray-50 active:scale-95"
+					data-e2e={generateE2eId('clan_page.settings.community.button.enable_community')}
 				>
 					<span className="relative z-10">{t('enableCommunity.button')}</span>
 					<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
diff --git a/libs/components/src/lib/components/EnableOnboarding/index.tsx b/libs/components/src/lib/components/EnableOnboarding/index.tsx
index 7ac74639ab..78eb0707ea 100644
--- a/libs/components/src/lib/components/EnableOnboarding/index.tsx
+++ b/libs/components/src/lib/components/EnableOnboarding/index.tsx
@@ -1,3 +1,4 @@
+import { generateE2eId } from '@mezon/utils';
 import { useTranslation } from 'react-i18next';
 
 const EnableOnboarding = ({ onEnable }: { onEnable: () => void }) => {
@@ -26,6 +27,7 @@ const EnableOnboarding = ({ onEnable }: { onEnable: () => void }) => {
 				<button
 					onClick={onEnable}
 					className="group relative px-10 py-4 bg-white text-[#5865F2] font-bold text-lg rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-out hover:bg-gray-50 active:scale-95"
+					data-e2e={generateE2eId('clan_page.settings.onboarding.button.enable_onboarding')}
 				>
 					<span className="relative z-10">{t('enableOnboarding.button')}</span>
 					<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
diff --git a/libs/components/src/lib/components/ModalValidateFile/index.tsx b/libs/components/src/lib/components/ModalValidateFile/index.tsx
index 227d295d5d..85af79a247 100644
--- a/libs/components/src/lib/components/ModalValidateFile/index.tsx
+++ b/libs/components/src/lib/components/ModalValidateFile/index.tsx
@@ -1,4 +1,5 @@
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import { ModalLayout } from '../../components';
 
 export enum ELimitSize {
@@ -22,11 +23,15 @@ const ModalValidateFile = ({ title, content, onClose, open = true }: ModalValida
 	}
 	return (
 		<ModalLayout onClose={onClose}>
-			<div className="bg-red-500 rounded-lg relative p-3">
+			<div className="bg-red-500 rounded-lg relative p-3" data-e2e={generateE2eId('modal.validate_file')}>
 				<div className="space-y-6 h-52 border-dashed border-2 flex text-center justify-center flex-col p-6">
 					<Icons.FileAndFolder />
-					<h3 className="text-white text-3xl font-semibold">{title}</h3>
-					<h4 className="text-white text-xl">{content}</h4>
+					<h3 className="text-white text-3xl font-semibold" data-e2e={generateE2eId('modal.validate_file.title')}>
+						{title}
+					</h3>
+					<h4 className="text-white text-xl" data-e2e={generateE2eId('modal.validate_file.content')}>
+						{content}
+					</h4>
 				</div>
 			</div>
 		</ModalLayout>
diff --git a/libs/components/src/lib/components/PanelChannel/ItemPanel.tsx b/libs/components/src/lib/components/PanelChannel/ItemPanel.tsx
index 832b5e2dd6..6a2e0dadd8 100644
--- a/libs/components/src/lib/components/PanelChannel/ItemPanel.tsx
+++ b/libs/components/src/lib/components/PanelChannel/ItemPanel.tsx
@@ -1,4 +1,5 @@
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 
 type ItemPanelProps = {
 	children: string;
@@ -36,6 +37,7 @@ const ItemPanel = ({
 			disabled={disabled}
 			onClick={onClick}
 			className={`flex flex-col justify-center w-full rounded-sm bg-item-hover pr-2 ${danger ? 'hover:bg-[#f67e882a]' : ''}`}
+			data-e2e={generateE2eId('clan_page.channel_list.panel.item')}
 		>
 			<div className={'flex flex-row items-center justify-between w-full'}>
 				<li
diff --git a/libs/components/src/lib/components/SettingComunity/index.tsx b/libs/components/src/lib/components/SettingComunity/index.tsx
index 4b3819fd58..3b29e7db7e 100644
--- a/libs/components/src/lib/components/SettingComunity/index.tsx
+++ b/libs/components/src/lib/components/SettingComunity/index.tsx
@@ -13,7 +13,7 @@ import {
 } from '@mezon/store';
 import { handleUploadEmoticon, useMezon } from '@mezon/transport';
 import { Icons } from '@mezon/ui';
-import { MAX_FILE_SIZE_10MB, fileTypeImage } from '@mezon/utils';
+import { MAX_FILE_SIZE_10MB, fileTypeImage, generateE2eId } from '@mezon/utils';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
@@ -395,7 +395,7 @@ const SettingComunity = ({
 								)}
 							</div>
 
-							<input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleBannerChange} />
+							<input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleBannerChange} data-e2e={generateE2eId('clan_page.settings.upload.community_banner_input')} />
 						</div>
 
 						<div className="space-y-4">
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index 9a47388de9..1673cf4a7b 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -85,7 +85,8 @@ export const DATA_E2E_IDENTIFIER = {
 			},
 			button: {
 				add_clan: '',
-				add_channel: ''
+				add_channel: '',
+				events: ''
 			}
 		},
 		modal: {
@@ -125,11 +126,42 @@ export const DATA_E2E_IDENTIFIER = {
 					confirm: '',
 					cancel: ''
 				}
+			},
+			create_event: {
+				button_create: '',
+				next: '',
+				upload: {
+					image_cover_input: ''
+				}
 			}
 		},
 		settings: {
+			integrations: {
+				create_clan_webhook_button: '',
+				new_clan_webhook_button: '',
+				navigate_webhook_button: ''
+			},
 			sidebar: {
-				delete: ''
+				delete: '',
+				item: ''
+			},
+			onboarding: {
+				button: {
+					enable_onboarding: '',
+					add_resources: '',
+					clan_guide: ''
+				}
+			},
+			community: {
+				button: {
+					enable_community: ''
+				}
+			},
+			emoji: {
+				upload: ''
+			},
+			voice_sticker: {
+				button_upload: ''
 			},
 			modal: {
 				delete_clan: {
@@ -146,6 +178,17 @@ export const DATA_E2E_IDENTIFIER = {
 				input: {
 					clan_name: ''
 				}
+			},
+			upload: {
+				clan_logo_input: '',
+				clan_banner_input: '',
+				emoji_input: '',
+				clan_webhook_avatar_input: '',
+				onboarding_resource_input: '',
+				community_banner_input: '',
+				voice_sticker_input: {
+					error: ''
+				}
 			}
 		},
 		channel_list: {
@@ -159,6 +202,24 @@ export const DATA_E2E_IDENTIFIER = {
 			},
 			thread_item: {
 				name: ''
+			},
+			panel: {
+				item: ''
+			}
+		}
+	},
+	channel_setting_page: {
+		side_bar: {
+			item: ''
+		},
+		webhook: {
+			button: {
+				create_webhook: '',
+				new_webhook: '',
+				view_webhook: ''
+			},
+			input: {
+				avatar_channel_webhook: ''
 			}
 		}
 	},
@@ -323,6 +384,13 @@ export const DATA_E2E_IDENTIFIER = {
 			username: ''
 		},
 		pin_message: ''
+	},
+	modal: {
+		too_many_upload: '',
+		validate_file: {
+			title: '',
+			content: ''
+		}
 	}
 };
 type DotNestedKeys<T> = T extends object