diff --git a/src/frontend/apps/impress/src/components/BoxButton.tsx b/src/frontend/apps/impress/src/components/BoxButton.tsx
index c40d5741..3b8d7751 100644
--- a/src/frontend/apps/impress/src/components/BoxButton.tsx
+++ b/src/frontend/apps/impress/src/components/BoxButton.tsx
@@ -44,6 +44,7 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
           ${$css || ''}
         `}
         {...props}
+        className={`--docs--box-button ${props.className || ''}`}
         onClick={(event: React.MouseEvent<HTMLDivElement>) => {
           if (props.disabled) {
             return;
diff --git a/src/frontend/apps/impress/src/components/Card.tsx b/src/frontend/apps/impress/src/components/Card.tsx
index 5e3d5ed7..08aec938 100644
--- a/src/frontend/apps/impress/src/components/Card.tsx
+++ b/src/frontend/apps/impress/src/components/Card.tsx
@@ -14,6 +14,7 @@ export const Card = ({
 
   return (
     <Box
+      className={`--docs--card ${props.className || ''}`}
       $background="white"
       $radius="4px"
       $css={css`
diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx
index 2dbb26f8..5dfc1054 100644
--- a/src/frontend/apps/impress/src/components/DropButton.tsx
+++ b/src/frontend/apps/impress/src/components/DropButton.tsx
@@ -71,6 +71,7 @@ export const DropButton = ({
         onPress={() => onOpenChangeHandler(true)}
         aria-label={label}
         $css={buttonCss}
+        className="--docs--drop-button"
       >
         {button}
       </StyledButton>
@@ -79,6 +80,7 @@ export const DropButton = ({
         triggerRef={triggerRef}
         isOpen={isLocalOpen}
         onOpenChange={onOpenChangeHandler}
+        className="--docs--drop-button-popover"
       >
         {children}
       </StyledPopover>
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
index 224f87b6..0b602f7b 100644
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -36,6 +36,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
       $padding="4px"
       $margin="auto"
       {...textProps}
+      className={`--docs--icon-bg ${textProps.className || ''}`}
     >
       {iconName}
     </Text>
diff --git a/src/frontend/apps/impress/src/components/InfiniteScroll.tsx b/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
index 5ad4ffd0..5a0ee14b 100644
--- a/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
+++ b/src/frontend/apps/impress/src/components/InfiniteScroll.tsx
@@ -30,7 +30,10 @@ export const InfiniteScroll = ({
   };
 
   return (
-    <Box {...boxProps}>
+    <Box
+      {...boxProps}
+      className={`--docs--infinite-scroll ${boxProps.className || ''}`}
+    >
       {children}
       <InView onChange={loadMore}>
         {!isLoading && hasMore && (
diff --git a/src/frontend/apps/impress/src/components/LoadMoreText.tsx b/src/frontend/apps/impress/src/components/LoadMoreText.tsx
index 2b715b5b..4caa811a 100644
--- a/src/frontend/apps/impress/src/components/LoadMoreText.tsx
+++ b/src/frontend/apps/impress/src/components/LoadMoreText.tsx
@@ -20,6 +20,7 @@ export const LoadMoreText = ({
       $align="center"
       $gap="0.4rem"
       $padding={{ horizontal: '2xs', vertical: 'sm' }}
+      className="--docs--load-more"
     >
       <Icon
         $theme="primary"
diff --git a/src/frontend/apps/impress/src/components/TextErrors.tsx b/src/frontend/apps/impress/src/components/TextErrors.tsx
index fb6215d7..baf22a2d 100644
--- a/src/frontend/apps/impress/src/components/TextErrors.tsx
+++ b/src/frontend/apps/impress/src/components/TextErrors.tsx
@@ -28,7 +28,12 @@ export const TextErrors = ({
   const { t } = useTranslation();
 
   return (
-    <AlertStyled canClose={canClose} type={VariantType.ERROR} icon={icon}>
+    <AlertStyled
+      canClose={canClose}
+      type={VariantType.ERROR}
+      icon={icon}
+      className="--docs--text-errors"
+    >
       <Box $direction="column" $gap="0.2rem">
         {causes &&
           causes.map((cause, i) => (
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
index 27967b2f..b6fa0ad6 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
@@ -119,8 +119,6 @@ export const QuickSearchStyle = createGlobalStyle`
   }
 }
 
-
-
 .c__modal__scroller:has(.quick-search-container),
 .c__modal__scroller:has(.noPadding) {
   padding: 0 !important;
@@ -138,6 +136,4 @@ export const QuickSearchStyle = createGlobalStyle`
     margin-bottom: 0;
   }
 }
-
-
 `;
diff --git a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
index cd617985..4b98621a 100644
--- a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
+++ b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
@@ -28,6 +28,7 @@ export const HorizontalSeparator = ({
           ? '#e5e5e533'
           : colorsTokens()['greyscale-100']
       }
+      className="--docs--horizontal-separator"
     />
   );
 };
diff --git a/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx b/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
index c03fbcc1..e3c123da 100644
--- a/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
+++ b/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx
@@ -18,6 +18,7 @@ export const ButtonLogin = () => {
         onClick={() => gotoLogin()}
         color="primary-text"
         aria-label={t('Login')}
+        className="--docs--button-login"
       >
         {t('Login')}
       </Button>
@@ -25,7 +26,12 @@ export const ButtonLogin = () => {
   }
 
   return (
-    <Button onClick={gotoLogout} color="primary-text" aria-label={t('Logout')}>
+    <Button
+      onClick={gotoLogout}
+      color="primary-text"
+      aria-label={t('Logout')}
+      className="--docs--button-logout"
+    >
       {t('Logout')}
     </Button>
   );
@@ -45,6 +51,7 @@ export const ProConnectButton = () => {
         }
       `}
       $radius="4px"
+      className="--docs--proconnect-button"
     >
       <ProConnectImg />
     </BoxButton>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
index 8f104c13..e39bbf6f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -133,6 +133,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       $padding={{ top: 'md' }}
       $background="white"
       $css={cssEditor(readOnly)}
+      className="--docs--editor-container"
     >
       {errorAttachment && (
         <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
@@ -192,7 +193,7 @@ export const BlockNoteEditorVersion = ({
   }, [setEditor, editor]);
 
   return (
-    <Box $css={cssEditor(readOnly)}>
+    <Box $css={cssEditor(readOnly)} className="--docs--editor-container">
       <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
     </Box>
   );
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx
index 485f7a09..a008372e 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx
@@ -104,7 +104,7 @@ export function AIGroupButton() {
     <Components.Generic.Menu.Root>
       <Components.Generic.Menu.Trigger>
         <Components.FormattingToolbar.Button
-          className="bn-button bn-menu-item"
+          className="bn-button bn-menu-item --docs--ai-actions-menu-trigger"
           data-test="ai-actions"
           label="AI"
           mainTooltip={t('AI Actions')}
@@ -116,7 +116,7 @@ export function AIGroupButton() {
         />
       </Components.Generic.Menu.Trigger>
       <Components.Generic.Menu.Dropdown
-        className="bn-menu-dropdown bn-drag-handle-menu"
+        className="bn-menu-dropdown bn-drag-handle-menu --docs--ai-actions-menu"
         sub={true}
       >
         {canAITransform && (
@@ -193,7 +193,7 @@ export function AIGroupButton() {
           <Components.Generic.Menu.Root position="right" sub={true}>
             <Components.Generic.Menu.Trigger sub={false}>
               <Components.Generic.Menu.Item
-                className="bn-menu-item"
+                className="bn-menu-item --docs--ai-translate-menu-trigger"
                 subTrigger={true}
               >
                 <Box $direction="row" $gap="0.6rem">
@@ -206,7 +206,7 @@ export function AIGroupButton() {
             </Components.Generic.Menu.Trigger>
             <Components.Generic.Menu.Dropdown
               sub={true}
-              className="bn-menu-dropdown"
+              className="bn-menu-dropdown --docs--ai-translate-menu"
             >
               {languages.map((language) => (
                 <AIMenuItemTranslate
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
index d85ef096..75dacd3d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx
@@ -94,7 +94,7 @@ export const FileDownloadButton = ({
   return (
     <>
       <Components.FormattingToolbar.Button
-        className="bn-button"
+        className="bn-button --docs--editor-file-download-button"
         label={
           dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
           dict.formatting_toolbar.file_download.tooltip['file']
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
index 52c786f7..35895621 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
@@ -82,6 +82,7 @@ export function MarkdownButton() {
     <Components.FormattingToolbar.Button
       mainTooltip={t('Convert Markdown')}
       onClick={handleConvertMarkdown}
+      className="--docs--editor-markdown-button"
     >
       M
     </Components.FormattingToolbar.Button>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
index da4d5e43..19d9fa31 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx
@@ -59,7 +59,10 @@ export const ModalConfirmDownloadUnsafe = ({
         </Text>
       }
     >
-      <Box aria-label={t('Modal confirmation to download the attachment')}>
+      <Box
+        aria-label={t('Modal confirmation to download the attachment')}
+        className="--docs--modal-confirm-download-unsafe"
+      >
         <Box>
           <Box $direction="column" $gap="0.35rem" $margin={{ top: 'sm' }}>
             <Text $variation="700">{t('This file is flagged as unsafe.')}</Text>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
index d8a3533a..41a2467d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -49,8 +49,16 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           <TableContent />
         </Box>
       )}
-      <Box $maxWidth="868px" $width="100%" $height="100%">
-        <Box $padding={{ horizontal: isDesktop ? '54px' : 'base' }}>
+      <Box
+        $maxWidth="868px"
+        $width="100%"
+        $height="100%"
+        className="--docs--doc-editor"
+      >
+        <Box
+          $padding={{ horizontal: isDesktop ? '54px' : 'base' }}
+          className="--docs--doc-editor-header"
+        >
           {isVersion ? (
             <DocVersionHeader title={doc.title} />
           ) : (
@@ -64,6 +72,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           $width="100%"
           $css="overflow-x: clip; flex: 1;"
           $position="relative"
+          className="--docs--doc-editor-content"
         >
           <Box $css="flex:1;" $position="relative" $width="100%">
             {isVersion ? (
@@ -115,7 +124,7 @@ export const DocVersionEditor = ({
     }
 
     return (
-      <Box $margin="large">
+      <Box $margin="large" className="--docs--doc-version-editor-error">
         <TextErrors
           causes={error.cause}
           icon={
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
index f33d5b4a..e576c8c6 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
@@ -155,6 +155,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         $margin={{ bottom: 'xl' }}
         aria-label={t('Content modal to export the document')}
         $gap="1rem"
+        className="--docs--modal-export-content"
       >
         <Text $variation="600" $size="sm">
           {t('Download your document in a .docx or .pdf format.')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
index 2f58b271..87656a79 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
@@ -38,6 +38,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
         $padding={{ top: isDesktop ? '4xl' : 'md' }}
         $gap={spacings['base']}
         aria-label={t('It is the card information about the document.')}
+        className="--docs--doc-header"
       >
         {(docIsPublic || docIsAuth) && (
           <Box
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
index 82463ccd..faad51db 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
@@ -107,6 +107,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
       <Box
         as="span"
         role="textbox"
+        className="--docs--doc-title-input"
         contentEditable
         defaultValue={titleDisplay || undefined}
         onKeyDownCapture={handleKeyDown}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
index 5f6c47e4..f9b399de 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -176,6 +176,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       $align="center"
       $gap="0.5rem 1.5rem"
       $wrap={isSmallMobile ? 'wrap' : 'nowrap'}
+      className="--docs--doc-toolbox"
     >
       <Box
         $direction="row"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
index b1c8dc8a..c5a2259c 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx
@@ -22,6 +22,7 @@ export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
         $padding={{ vertical: 'base' }}
         $gap={spacings['base']}
         aria-label={t('It is the document title')}
+        className="--docs--doc-version-header"
       >
         <DocTitleText title={title} />
         <HorizontalSeparator />
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
index 38e6a2f3..c3ff4b5b 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
@@ -84,7 +84,10 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
         </Text>
       }
     >
-      <Box aria-label={t('Content modal to delete document')}>
+      <Box
+        aria-label={t('Content modal to delete document')}
+        className="--docs--modal-remove-doc"
+      >
         {!isError && (
           <Text $size="sm" $variation="600">
             {t('Are you sure you want to delete this document ?')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
index ea966c2e..7d741407 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
@@ -11,7 +11,11 @@ type DocSearchItemProps = {
 export const DocSearchItem = ({ doc }: DocSearchItemProps) => {
   const { isDesktop } = useResponsiveStore();
   return (
-    <Box data-testid={`doc-search-item-${doc.id}`} $width="100%">
+    <Box
+      data-testid={`doc-search-item-${doc.id}`}
+      $width="100%"
+      className="--docs--doc-search-item"
+    >
       <QuickSearchItemContent
         left={
           <Box $direction="row" $align="center" $gap="10px" $width="100%">
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
index 2f7db61d..48fbbf48 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
@@ -71,6 +71,7 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
         aria-label={t('Search modal')}
         $direction="column"
         $justify="space-between"
+        className="--docs--doc-search-modal"
       >
         <QuickSearch
           placeholder={t('Type the name of a document')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
index cb353b33..861fc0c7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx
@@ -122,6 +122,7 @@ export const DocShareAddMemberList = ({
       $css={css`
         border: 1px solid ${color['greyscale-200']};
       `}
+      className="--docs--doc-share-add-member-list"
     >
       <Box
         $direction="row"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
index 1164c828..86601be9 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx
@@ -34,6 +34,7 @@ export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
         color: ${color['greyscale-1000']};
         font-size: ${fontSize['xs']};
       `}
+      className="--docs--doc-share-add-member-list-item"
     >
       <Text $variation="1000" $size="xs">
         {user.full_name || user.email}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx
index 1a6151e1..6a186e43 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx
@@ -84,6 +84,7 @@ export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
     <Box
       $width="100%"
       data-testid={`doc-share-invitation-row-${invitation.email}`}
+      className="--docs--doc-share-invitation-item"
     >
       <SearchUserRow
         isInvitation={true}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx
index 52f4ac0c..36da656d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx
@@ -72,6 +72,7 @@ export const DocShareMemberItem = ({ doc, access }: Props) => {
     <Box
       $width="100%"
       data-testid={`doc-share-member-row-${access.user.email}`}
+      className="--docs--doc-share-member-item"
     >
       <SearchUserRow
         alwaysShowRight={true}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
index 80dccad7..bc5a805d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
@@ -195,7 +195,7 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
           aria-label={t('Share modal')}
           $height={canViewAccesses ? modalContentHeight : 'auto'}
           $overflow="hidden"
-          className="noPadding"
+          className="--docs--doc-share-modal noPadding "
           $justify="space-between"
         >
           <Box
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
index 3b4e12af..181c6044 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
@@ -20,6 +20,7 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => {
       $css={css`
         flex-shrink: 0;
       `}
+      className="--docs--doc-share-modal-footer"
     >
       <HorizontalSeparator $withPadding={true} />
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx
index 0727b92c..35f741fa 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx
@@ -12,7 +12,11 @@ type Props = {
 export const DocShareModalInviteUserRow = ({ user }: Props) => {
   const { t } = useTranslation();
   return (
-    <Box $width="100%" data-testid={`search-user-row-${user.email}`}>
+    <Box
+      $width="100%"
+      data-testid={`search-user-row-${user.email}`}
+      className="--docs--doc-share-modal-invite-user-row"
+    >
       <SearchUserRow
         user={user}
         right={
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
index 55138ff9..38dcd63e 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
@@ -91,6 +91,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
       $padding={{ horizontal: 'base' }}
       aria-label={t('Doc visibility card')}
       $gap={spacing['base']}
+      className="--docs--doc-visibility"
     >
       <Text $weight="700" $size="sm" $variation="700">
         {t('Link parameters')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
index f967a3bc..b7c14aa6 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx
@@ -31,7 +31,12 @@ export const SearchUserRow = ({
       right={right}
       alwaysShowRight={alwaysShowRight}
       left={
-        <Box $direction="row" $align="center" $gap={spacings['xs']}>
+        <Box
+          $direction="row"
+          $align="center"
+          $gap={spacings['xs']}
+          className="--docs--search-user-row"
+        >
           <UserAvatar
             user={user}
             background={isInvitation ? colors['greyscale-400'] : undefined}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
index 99036b6a..76dd73c7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx
@@ -49,6 +49,7 @@ export const UserAvatar = ({ user, background }: Props) => {
         color: rgba(255, 255, 255, 0.9);
         border: 1px solid rgba(255, 255, 255, 0.5);
       `}
+      className="--docs--user-avatar"
     >
       <Box
         $direction="row"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
index a3fd67e9..4865f892 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx
@@ -60,6 +60,7 @@ export const Heading = ({
       $radius="4px"
       $background={isActive ? `${colorsTokens()['greyscale-100']}` : 'none'}
       $css="text-align: left;"
+      className="--docs--table-content-heading"
     >
       <Text
         $width="100%"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
index 3ed76781..d4e793c0 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
@@ -122,6 +122,7 @@ export const TableContent = () => {
           gap: var(--c--theme--spacings--2xs);
         `}
       `}
+      className="--docs--table-content"
     >
       {!isHover && (
         <BoxButton onClick={onOpen} $justify="center" $align="center">
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
index 7959ed35..b2431b5e 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx
@@ -107,7 +107,10 @@ export const ModalConfirmationVersion = ({
         </Text>
       }
     >
-      <Box aria-label={t('Modal confirmation to restore the version')}>
+      <Box
+        aria-label={t('Modal confirmation to restore the version')}
+        className="--docs--modal-confirmation-version"
+      >
         <Box>
           <Text $variation="600">
             {t('Your current document will revert to this version.')}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
index 92d94598..c6c5562d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
@@ -51,7 +51,7 @@ export const ModalSelectVersion = ({
         <NoPaddingStyle />
         <Box
           aria-label="version history modal"
-          className="noPadding"
+          className="--docs--modal-select-version noPadding"
           $direction="row"
           $height="100%"
           $maxHeight="calc(100vh - 2em - 12px)"
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
index afbb0347..7c50fe53 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx
@@ -44,6 +44,7 @@ export const VersionItem = ({
         `}
         $hasTransition
         $minWidth="13rem"
+        className="--docs--version-item"
       >
         <Box
           $padding={{ vertical: '0.7rem', horizontal: 'small' }}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx
index e401ec76..89bbd054 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx
@@ -109,7 +109,10 @@ export const VersionList = ({
   }, [] as Versions[]);
 
   return (
-    <Box $css="overflow-y: auto; overflow-x: hidden;">
+    <Box
+      $css="overflow-y: auto; overflow-x: hidden;"
+      className="--docs--version-list"
+    >
       <InfiniteScroll
         hasMore={hasNextPage}
         isLoading={isFetchingNextPage}
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index 101a2bf4..53425210 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -60,6 +60,7 @@ export const DocsGrid = ({
       $maxWidth="960px"
       $maxHeight="calc(100vh - 52px - 2rem)"
       $align="center"
+      className="--docs--doc-grid"
     >
       <DocsGridLoader isLoading={isRefetching || loading} />
       <Card
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
index 47bab960..b0650a00 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
@@ -49,6 +49,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
             background-color: var(--c--theme--colors--greyscale-100);
           }
         `}
+        className="--docs--doc-grid-item"
       >
         <StyledLink
           $css={css`
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
index 3f169d6c..7bf0b223 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx
@@ -26,6 +26,7 @@ export const DocsGridItemSharedButton = ({ doc, handleClick }: Props) => {
         </Text>
       }
       placement="top"
+      className="--docs--doc-tooltip-grid-item-shared-button"
     >
       <Button
         style={{ minWidth: '50px', justifyContent: 'center' }}
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx
index 7ac17a92..71fa1828 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx
@@ -31,6 +31,7 @@ export const DocsGridLoader = ({ isLoading }: DocsGridLoaderProps) => {
         $background="rgba(255, 255, 255, 0.5)"
         $zIndex={998}
         $position="absolute"
+        className="--docs--doc-grid-loader"
       >
         <Loader />
       </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
index fdc82567..f5fda2db 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
@@ -38,7 +38,12 @@ export const SimpleDocItem = ({
   const { untitledDocument } = useTrans();
 
   return (
-    <Box $direction="row" $gap={spacings.sm} $overflow="auto">
+    <Box
+      $direction="row"
+      $gap={spacings.sm}
+      $overflow="auto"
+      className="--docs--simple-doc-item"
+    >
       <Box
         $direction="row"
         $align="center"
diff --git a/src/frontend/apps/impress/src/features/footer/Footer.tsx b/src/frontend/apps/impress/src/features/footer/Footer.tsx
index ff653734..28fa3543 100644
--- a/src/frontend/apps/impress/src/features/footer/Footer.tsx
+++ b/src/frontend/apps/impress/src/features/footer/Footer.tsx
@@ -21,7 +21,7 @@ export const Footer = () => {
   const logo = themeTokens().logo;
 
   return (
-    <Box $position="relative" as="footer">
+    <Box $position="relative" as="footer" className="--docs--footer">
       <BlueStripe />
       <Box $padding={{ top: 'large', horizontal: 'big', bottom: 'small' }}>
         <Box
@@ -31,7 +31,7 @@ export const Footer = () => {
           $justify="space-between"
           $css="flex-wrap: wrap;"
         >
-          <Box>
+          <Box className="--docs--footer-logo">
             <Box $align="center" $gap="6rem" $direction="row">
               {logo && (
                 <Image
@@ -52,6 +52,7 @@ export const Footer = () => {
               row-gap: .5rem;
               flex-wrap: wrap;
             `}
+            className="--docs--footer-external-links"
           >
             {[
               {
@@ -99,6 +100,7 @@ export const Footer = () => {
             column-gap: 1rem;
             row-gap: .5rem;
           `}
+          className="--docs--footer-internal-links"
         >
           {[
             {
@@ -145,6 +147,7 @@ export const Footer = () => {
           $margin={{ top: 'big' }}
           $variation="600"
           $display="inline"
+          className="--docs--footer-licence"
         >
           {t('Unless otherwise stated, all content on this site is under')}{' '}
           <StyledLink
diff --git a/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx b/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
index 8504674e..c11fab07 100644
--- a/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx
@@ -21,6 +21,7 @@ export const ButtonTogglePanel = () => {
           iconName={isPanelOpen ? 'close' : 'menu'}
         />
       }
+      className="--docs--button-toggle-panel"
     />
   );
 };
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index bacf39e8..b808f5ce 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -39,6 +39,7 @@ export const Header = () => {
         background-color: ${colors['greyscale-000']};
         border-bottom: 1px solid ${colors['greyscale-200']};
       `}
+      className="--docs--header"
     >
       {!isDesktop && <ButtonTogglePanel />}
       <StyledLink href="/">
diff --git a/src/frontend/apps/impress/src/features/header/components/Title.tsx b/src/frontend/apps/impress/src/features/header/components/Title.tsx
index fcfcb915..b1117ed8 100644
--- a/src/frontend/apps/impress/src/features/header/components/Title.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Title.tsx
@@ -10,7 +10,12 @@ export const Title = () => {
   const spacings = theme.spacingsTokens();
 
   return (
-    <Box $direction="row" $align="center" $gap={spacings['2xs']}>
+    <Box
+      $direction="row"
+      $align="center"
+      $gap={spacings['2xs']}
+      className="--docs--title"
+    >
       <Text
         $margin="none"
         as="h2"
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx b/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
index fff8abf9..37ffc727 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx
@@ -29,6 +29,7 @@ export default function HomeBanner() {
       $height="100vh"
       $margin={{ top: `-${getHeaderHeight(isSmallMobile)}px` }}
       $position="relative"
+      className="--docs--home-banner"
     >
       <Box
         $width="100%"
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx b/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
index 16f4285f..d0d307df 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx
@@ -30,6 +30,7 @@ function HomeProConnect() {
     <Box
       $justify="center"
       $height={!isMobile ? `calc(100vh - ${parentGap})` : 'auto'}
+      className="--docs--home-proconnect"
     >
       <Box
         $gap={spacings['md']}
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
index 871ac250..30a95b1b 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
@@ -33,10 +33,10 @@ export function HomeContent() {
   const isFrLanguage = i18n.resolvedLanguage === 'fr';
 
   return (
-    <Box as="main">
+    <Box as="main" className="--docs--home-content">
       <HomeHeader />
       {isSmallMobile && (
-        <Box $css="& .panel-header{display: none;}">
+        <Box $css="& .--docs--left-panel-header{display: none;}">
           <LeftPanel />
         </Box>
       )}
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
index 202d5c8c..2fce7c68 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx
@@ -31,6 +31,7 @@ export const HomeHeader = () => {
       $width="100%"
       $padding={{ horizontal: 'small' }}
       $height={`${isSmallMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px`}
+      className="--docs--home-header"
     >
       <Box
         $align="center"
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
index dfe7e164..1204fd28 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx
@@ -93,6 +93,7 @@ export const HomeSection = ({
         opacity: ${isVisible ? 1 : 0};
         ${$css}
       `}
+      className="--docs--home-section"
     >
       <Box
         $direction={direction}
diff --git a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
index 6bef7995..bc264303 100644
--- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
@@ -70,6 +70,7 @@ export const LanguagePicker = () => {
         aria-label={t('Language')}
         $direction="row"
         $gap="0.5rem"
+        className="--docs--language-picker-text"
       >
         <Text $isMaterialIcon $color="inherit" $size="xl">
           translate
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
index f86cd602..e61c7736 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
@@ -53,6 +53,7 @@ export const LeftPanelTargetFilters = () => {
       $justify="center"
       $padding={{ horizontal: 'sm' }}
       $gap={spacing['2xs']}
+      className="--docs--left-panel-target-filters"
     >
       {defaultQueries.map((query) => {
         const isActive = target === query.targetQuery;
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
index 309fe24b..9c613509 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
@@ -45,7 +45,8 @@ export const LeftPanel = () => {
             min-width: 300px;
             overflow: hidden;
             border-right: 1px solid ${colors['greyscale-200']};
-        `}
+          `}
+          className="--docs--left-panel-desktop"
         >
           <Box
             $css={css`
@@ -72,6 +73,7 @@ export const LeftPanel = () => {
               transform: translateX(${isPanelOpen ? '0' : '-100dvw'});
               background-color: var(--c--theme--colors--greyscale-000);
             `}
+            className="--docs--left-panel-mobile"
           >
             <Box
               data-testid="left-panel-mobile"
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
index b621e1c5..98f04e8b 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
@@ -21,6 +21,7 @@ export const LeftPanelContent = () => {
             $css={css`
               flex: 0 0 auto;
             `}
+            className="--docs--home-left-panel-content"
           >
             <SeparatedSection showSeparator={false}>
               <LeftPanelTargetFilters />
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
index c14edf9f..dc0b2acc 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
@@ -18,6 +18,7 @@ export const LeftPanelDocContent = () => {
       $flex={1}
       $width="100%"
       $css="width: 100%; overflow-y: auto; overflow-x: hidden;"
+      className="--docs--left-panel-doc-content"
     >
       <SeparatedSection showSeparator={false}>
         <Box $padding={{ horizontal: 'sm' }}>
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
index 3615254c..641a6290 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx
@@ -38,6 +38,7 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
         }
       `}
       key={doc.id}
+      className="--docs--left-panel-favorite-item"
     >
       <StyledLink href={`/docs/${doc.id}`} $css="overflow: auto;">
         <SimpleDocItem showAccesses doc={doc} />
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
index bc2d7b14..f05832bc 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
@@ -24,7 +24,7 @@ export const LeftPanelFavorites = () => {
   }
 
   return (
-    <Box>
+    <Box className="--docs--left-panel-favorites">
       <HorizontalSeparator $withPadding={false} />
       <Box
         $justify="center"
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
index e2358f22..7177bc2c 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
@@ -51,7 +51,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
 
   return (
     <>
-      <Box $width="100%" className="panel-header">
+      <Box $width="100%" className="--docs--left-panel-header">
         <SeparatedSection>
           <Box
             $padding={{ horizontal: 'sm' }}
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index 3d55315b..ca185459 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -23,7 +23,7 @@ export function MainLayout({
   const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;
 
   return (
-    <div>
+    <Box className="--docs--main-layout">
       <Header />
       <Box
         $direction="row"
@@ -54,6 +54,6 @@ export function MainLayout({
           {children}
         </Box>
       </Box>
-    </div>
+    </Box>
   );
 }
diff --git a/src/frontend/apps/impress/src/layouts/PageLayout.tsx b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
index c6e2150b..a3d96929 100644
--- a/src/frontend/apps/impress/src/layouts/PageLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
@@ -20,6 +20,7 @@ export function PageLayout({
     <Box
       $minHeight={`calc(100vh - ${HEADER_HEIGHT}px)`}
       $margin={{ top: `${HEADER_HEIGHT}px` }}
+      className="--docs--page-layout"
     >
       <Header />
       <Box as="main" $width="100%" $css="flex-grow:1;">