diff --git a/web/src/routes/Main/Content/Group/Sidebar.tsx b/web/src/routes/Main/Content/Group/Sidebar.tsx
index 670d7c61..4c5c87f4 100644
--- a/web/src/routes/Main/Content/Group/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Group/Sidebar.tsx
@@ -35,7 +35,7 @@ export const Sidebar: React.FC = React.memo(() => {
     );
 
   return (
-    <div>
+    <div data-tc-role="sidebar-group">
       <GroupHeader groupId={groupId} />
 
       <div className="p-2 space-y-1">
diff --git a/web/src/routes/Main/Content/Group/index.tsx b/web/src/routes/Main/Content/Group/index.tsx
index 22638ff6..6cce469a 100644
--- a/web/src/routes/Main/Content/Group/index.tsx
+++ b/web/src/routes/Main/Content/Group/index.tsx
@@ -7,7 +7,7 @@ import { Sidebar } from './Sidebar';
 
 export const Group: React.FC = React.memo(() => {
   return (
-    <PageContent sidebar={<Sidebar />}>
+    <PageContent data-tc-role="content-group" sidebar={<Sidebar />}>
       <Switch>
         <Route
           path="/main/group/:groupId/:panelId"
diff --git a/web/src/routes/Main/Content/PageContent.tsx b/web/src/routes/Main/Content/PageContent.tsx
index 9ee91814..8904248b 100644
--- a/web/src/routes/Main/Content/PageContent.tsx
+++ b/web/src/routes/Main/Content/PageContent.tsx
@@ -9,10 +9,6 @@ const PageContentRoot: React.FC = (props) => (
   <div className="flex flex-row flex-1 overflow-hidden">{props.children}</div>
 );
 
-interface PageContentProps {
-  sidebar?: React.ReactNode;
-}
-
 const PageGestureWrapper: React.FC = React.memo((props) => {
   const { setShowSidebar } = useSidebarContext();
 
@@ -36,6 +32,10 @@ const PageGestureWrapper: React.FC = React.memo((props) => {
 });
 PageGestureWrapper.displayName = 'PageGestureWrapper';
 
+interface PageContentProps {
+  sidebar?: React.ReactNode;
+  'data-tc-role'?: string;
+}
 /**
  * 用于渲染实际页面的组件，即除了导航栏剩余的内容
  */
@@ -85,7 +85,10 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
     <>
       {sidebarEl}
 
-      <div className="flex flex-auto bg-content-light dark:bg-content-dark relative overflow-auto">
+      <div
+        className="flex flex-auto bg-content-light dark:bg-content-dark relative overflow-auto"
+        data-tc-role={props['data-tc-role']}
+      >
         {contentMaskEl}
         {contentEl}
       </div>
diff --git a/web/src/routes/Main/Content/Personal/Sidebar.tsx b/web/src/routes/Main/Content/Personal/Sidebar.tsx
index da469d7e..1a656006 100644
--- a/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Personal/Sidebar.tsx
@@ -32,7 +32,7 @@ export const PersonalSidebar: React.FC = React.memo(() => {
   const userInfo = useUserInfo();
 
   return (
-    <div>
+    <div data-tc-role="sidebar-personal">
       <SectionHeader>{userInfo?.nickname}</SectionHeader>
 
       <div className="p-2">
diff --git a/web/src/routes/Main/Content/Personal/index.tsx b/web/src/routes/Main/Content/Personal/index.tsx
index 7f90b26b..16a0ccda 100644
--- a/web/src/routes/Main/Content/Personal/index.tsx
+++ b/web/src/routes/Main/Content/Personal/index.tsx
@@ -8,7 +8,7 @@ import { PersonalSidebar } from './Sidebar';
 
 export const Personal: React.FC = React.memo(() => {
   return (
-    <PageContent sidebar={<PersonalSidebar />}>
+    <PageContent data-tc-role="content-personal" sidebar={<PersonalSidebar />}>
       <Switch>
         <Route path="/main/personal/friends" component={FriendPanel} />
 
diff --git a/web/src/routes/Main/Navbar/GroupNav.tsx b/web/src/routes/Main/Navbar/GroupNav.tsx
index 71ece9fa..69c71faa 100644
--- a/web/src/routes/Main/Navbar/GroupNav.tsx
+++ b/web/src/routes/Main/Navbar/GroupNav.tsx
@@ -38,7 +38,7 @@ export const GroupNav: React.FC = React.memo(() => {
   }, []);
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2" data-tc-role="navbar-groups">
       {Array.isArray(groups) &&
         groups.map((group) => (
           <div key={group._id}>
diff --git a/web/src/routes/Main/Navbar/PersonalNav.tsx b/web/src/routes/Main/Navbar/PersonalNav.tsx
index dfa5e14f..33b45685 100644
--- a/web/src/routes/Main/Navbar/PersonalNav.tsx
+++ b/web/src/routes/Main/Navbar/PersonalNav.tsx
@@ -16,19 +16,21 @@ export const PersonalNav: React.FC = React.memo(() => {
   const unread = usePersonalUnread();
 
   return (
-    <NavbarNavItem
-      name={t('我')}
-      to={'/main/personal'}
-      showPill={true}
-      badge={unread}
-    >
-      <Avatar
-        shape="square"
-        size={48}
-        name={userInfo?.nickname}
-        src={userInfo?.avatar}
-      />
-    </NavbarNavItem>
+    <div data-tc-role="navbar-personal">
+      <NavbarNavItem
+        name={t('我')}
+        to={'/main/personal'}
+        showPill={true}
+        badge={unread}
+      >
+        <Avatar
+          shape="square"
+          size={48}
+          name={userInfo?.nickname}
+          src={userInfo?.avatar}
+        />
+      </NavbarNavItem>
+    </div>
   );
 });
 PersonalNav.displayName = 'PersonalNav';
diff --git a/web/src/routes/Main/Navbar/index.tsx b/web/src/routes/Main/Navbar/index.tsx
index 298110c3..0d47c9c8 100644
--- a/web/src/routes/Main/Navbar/index.tsx
+++ b/web/src/routes/Main/Navbar/index.tsx
@@ -10,7 +10,10 @@ import { PersonalNav } from './PersonalNav';
  */
 export const Navbar: React.FC = React.memo(() => {
   return (
-    <div className="w-18 bg-navbar-light dark:bg-navbar-dark flex flex-col justify-start items-center pt-4 pb-4">
+    <div
+      data-tc-role="navbar"
+      className="w-18 bg-navbar-light dark:bg-navbar-dark flex flex-col justify-start items-center pt-4 pb-4"
+    >
       <MobileMenuBtn />
 
       {/* Navbar */}
@@ -24,7 +27,7 @@ export const Navbar: React.FC = React.memo(() => {
         <GroupNav />
       </div>
 
-      <div>
+      <div data-tc-role="navbar-settings">
         <SettingBtn />
       </div>
     </div>