✅(e2e) fix broken e2e tests by updating selectors

selectors were updated to stabilize and fix the failing e2e tests

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

src/frontend/apps/e2e/__tests__/app-impress/auth.setup.ts

@@ -23,7 +23,7 @@ const saveStorageState = async (
       page.locator('header').first().getByRole('button', {
         name: 'Logout',
       }),
-    ).toBeVisible();
+    ).toBeVisible({ timeout: 10000 });
 
     await page.context().storageState({
       path: storageState as string,

src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts

@@ -26,10 +26,7 @@ test.describe('Document search', () => {
     );
     await verifyDocName(page, doc2Title);
     await page.goto('/');
-    await page
-      .getByTestId('left-panel-desktop')
-      .getByRole('button', { name: 'search' })
-      .click();
+    await page.getByTestId('search-docs-button').click();
 
     await expect(
       page.getByRole('img', { name: 'No active search' }),
@@ -104,9 +101,7 @@ test.describe('Document search', () => {
     browserName,
   }) => {
     // Doc grid filters are not visible
-    const searchButton = page
-      .getByTestId('left-panel-desktop')
-      .getByRole('button', { name: 'search', exact: true });
+    const searchButton = page.getByTestId('search-docs-button');
 
     const filters = page.getByTestId('doc-search-filters');
 
@@ -170,9 +165,7 @@ test.describe('Document search', () => {
       1,
     );
 
-    const searchButton = page
-      .getByTestId('left-panel-desktop')
-      .getByRole('button', { name: 'search' });
+    const searchButton = page.getByTestId('search-docs-button');
 
     await searchButton.click();
     await page.getByRole('combobox', { name: 'Quick search input' }).click();

src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts

@@ -25,7 +25,7 @@ test.describe('Doc Tree', () => {
       1,
     );
     await verifyDocName(page, titleParent);
-    const addButton = page.getByRole('button', { name: 'New doc' });
+    const addButton = page.getByTestId('new-doc-button');
     const docTree = page.getByTestId('doc-tree');
 
     await expect(addButton).toBeVisible();
@@ -63,7 +63,7 @@ test.describe('Doc Tree', () => {
 
   test('check the reorder of sub pages', async ({ page, browserName }) => {
     await createDoc(page, 'doc-tree-content', browserName, 1);
-    const addButton = page.getByRole('button', { name: 'New doc' });
+    const addButton = page.getByTestId('new-doc-button');
     await expect(addButton).toBeVisible();
 
     const docTree = page.getByTestId('doc-tree');
@@ -201,7 +201,7 @@ test.describe('Doc Tree', () => {
     ).not.toHaveText(docChild);
 
     const header = page.locator('header').first();
-    await header.locator('h2').getByText('Docs').click();
+    await header.locator('h1').getByText('Docs').click();
     await expect(page.getByText(docChild)).toBeVisible();
   });
 

src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts

@@ -242,8 +242,8 @@ test.describe('Doc Visibility: Public', () => {
       cardContainer.getByText('Public document', { exact: true }),
     ).toBeVisible();
 
-    await expect(page.getByRole('button', { name: 'search' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
+    await expect(page.getByTestId('search-docs-button')).toBeVisible();
+    await expect(page.getByTestId('new-doc-button')).toBeVisible();
 
     const urlDoc = page.url();
 
@@ -258,8 +258,8 @@ test.describe('Doc Visibility: Public', () => {
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
-    await expect(page.getByRole('button', { name: 'search' })).toBeHidden();
-    await expect(page.getByRole('button', { name: 'New doc' })).toBeHidden();
+    await expect(page.getByTestId('search-docs-button')).toBeHidden();
+    await expect(page.getByTestId('new-doc-button')).toBeHidden();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
     const card = page.getByLabel('It is the card information');
     await expect(card).toBeVisible();

src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts

@@ -13,7 +13,7 @@ test.describe('Header', () => {
     const header = page.locator('header').first();
 
     await expect(header.getByLabel('Back to homepage')).toBeVisible();
-    await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
+    await expect(header.locator('h1').getByText('Docs')).toHaveCSS(
       'font-family',
       /Roboto/i,
     );
@@ -37,8 +37,8 @@ test.describe('Header', () => {
 
     const header = page.locator('header').first();
 
-    await expect(header.getByLabel('Docs Logo')).toBeVisible();
-    await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
+    await expect(header.getByTestId('header-icon-docs')).toBeVisible();
+    await expect(header.locator('h1').getByText('Docs')).toHaveCSS(
       'font-family',
       /Marianne/i,
     );
@@ -106,7 +106,7 @@ test.describe('Header mobile', () => {
     const header = page.locator('header').first();
 
     await expect(header.getByLabel('Open the header menu')).toBeVisible();
-    await expect(header.getByRole('link', { name: 'Docs Logo' })).toBeVisible();
+    await expect(header.getByTestId('header-icon-docs')).toBeVisible();
     await expect(
       header.getByRole('button', {
         name: 'Les services de La Suite numérique',

src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts

@@ -8,8 +8,8 @@ test.describe('Left panel desktop', () => {
   test('checks all the elements are visible', async ({ page }) => {
     await expect(page.getByTestId('left-panel-desktop')).toBeVisible();
     await expect(page.getByTestId('left-panel-mobile')).toBeHidden();
-    await expect(page.getByRole('button', { name: 'house' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
+    await expect(page.getByTestId('home-button')).toBeVisible();
+    await expect(page.getByTestId('new-doc-button')).toBeVisible();
   });
 });
 
@@ -27,8 +27,8 @@ test.describe('Left panel mobile', () => {
     await expect(page.getByTestId('left-panel-mobile')).not.toBeInViewport();
 
     const header = page.locator('header').first();
-    const homeButton = page.getByRole('button', { name: 'house' });
-    const newDocButton = page.getByRole('button', { name: 'New doc' });
+    const homeButton = page.getByTestId('home-button');
+    const newDocButton = page.getByTestId('new-doc-button');
     const languageButton = page.getByRole('button', { name: /Language/ });
     const logoutButton = page.getByRole('button', { name: 'Logout' });
 

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -49,6 +49,7 @@ export const Header = () => {
           $margin={{ top: 'auto' }}
         >
           <IconDocs
+            data-testid="header-icon-docs"
             aria-label={t('Back to homepage')}
             width={32}
             color={colorsTokens['primary-text']}

src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx

@@ -62,6 +62,7 @@ export const HomeHeader = () => {
           $height="fit-content"
         >
           <IconDocs
+            data-testid="header-icon-docs"
             aria-label={t('Docs Logo')}
             width={32}
             color={colorsTokens['primary-text']}

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx

@@ -54,6 +54,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
           >
             <Box $direction="row" $gap="2px">
               <Button
+                data-testid="home-button"
                 onClick={goToHome}
                 aria-label={t('Back to homepage')}
                 size="medium"
@@ -69,6 +70,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
               />
               {authenticated && (
                 <Button
+                  data-testid="search-docs-button"
                   onClick={openSearchModal}
                   size="medium"
                   color="tertiary-text"

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx

@@ -19,6 +19,7 @@ export const LeftPanelHeaderButton = () => {
   });
   return (
     <Button
+      data-testid="new-doc-button"
       color="primary"
       onClick={() => createDoc()}
       icon={<Icon $variation="000" iconName="add" aria-hidden="true" />}