Fix e2e auth logic + add namespace a11y playwright tests

e2e-tests/package.json

@@ -12,6 +12,7 @@
     "@types/node": "^20.12.2"
   },
   "dependencies": {
+    "@axe-core/playwright": "^4.10.1",
     "yaml": "^2.3.4"
   }
 }

e2e-tests/tests/headlampPage.ts

@@ -9,8 +9,6 @@ export class HeadlampPage {
   }
 
   async authenticate(token?: string) {
-    await this.page.waitForSelector('h1:has-text("Authentication")');
-
     // Check to see if already authenticated
     if (await this.page.isVisible('button:has-text("Authenticate")')) {
       this.hasToken(token || '');
@@ -24,10 +22,16 @@ export class HeadlampPage {
         this.page.click('button:has-text("Authenticate")'),
       ]);
     }
+
+    await this.page.waitForLoadState('load');
   }
 
   async navigateToCluster(name: string, token?: string) {
-    await this.navigateTopage(`/c/${name}`);
+    // Since we are using multi cluster structure we need to have a full reset navigation
+    await this.page.goto(`${this.testURL}`);
+    await this.page.waitForLoadState('load');
+    await this.page.getByRole('link', { name: name, exact: true }).click();
+    await this.page.waitForLoadState('load');
     await this.authenticate(token);
   }
 
@@ -75,11 +79,16 @@ export class HeadlampPage {
 
   async logout() {
     // Click on the account button to open the user menu
-    await this.page.click('button[aria-label="Account of current user"]');
+    const userButton = await this.page.waitForSelector('[data-testid="user-account-button"]', {
+      state: 'visible',
+    });
+
+    await userButton.click();
 
     // Wait for the logout option to be visible and click on it
-    await this.page.waitForSelector('a.MuiMenuItem-root:has-text("Log out")');
-    await this.page.click('a.MuiMenuItem-root:has-text("Log out")');
+    await this.page.waitForSelector('[data-testid="logout-menu-item"]');
+    await this.page.click('[data-testid="logout-menu-item"]');
+
     await this.page.waitForLoadState('load');
 
     // Expects the URL to contain c/test/token

e2e-tests/tests/namespaces.spec.ts

@@ -1,4 +1,5 @@
-import { test } from '@playwright/test';
+import { AxeBuilder } from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
 import { HeadlampPage } from './headlampPage';
 import { NamespacesPage } from './namespacesPage';
 
@@ -15,6 +16,17 @@ test('create a namespace with the minimal editor then delete it', async ({ page
 
   const namespacesPage = new NamespacesPage(page);
   await namespacesPage.navigateToNamespaces();
+
+  const axeBuilder = new AxeBuilder({ page });
+
+  const accessibilityResults = await axeBuilder.analyze();
+
+  expect(accessibilityResults.violations.length).toBe(0);
+
   await namespacesPage.createNamespace(name);
+  const postCreationScanResults = await axeBuilder.analyze();
+
+  expect(postCreationScanResults.violations.length).toBe(0);
+
   await namespacesPage.deleteNamespace(name);
 });

frontend/src/components/App/TopBar.tsx

@@ -269,6 +269,7 @@ export const PureTopBar = memo(
             <Icon icon="mdi:logout" />
           </ListItemIcon>
           <ListItemText
+            data-testid="logout-menu-item"
             primary={t('Log out')}
             secondary={hasToken ? null : t('(No token set up)')}
           />
@@ -328,6 +329,7 @@ export const PureTopBar = memo(
         action: !!isClusterContext && (
           <MenuItem>
             <IconButton
+              data-testid="user-account-button"
               aria-label={t('Account of current user')}
               aria-controls={userMenuId}
               aria-haspopup="true"
@@ -386,6 +388,7 @@ export const PureTopBar = memo(
         id: DefaultAppBarAction.USER,
         action: !!isClusterContext && (
           <IconButton
+            data-testid="user-account-button"
             aria-label={t('Account of current user')}
             aria-controls={userMenuId}
             aria-haspopup="true"

frontend/src/components/App/__snapshots__/TopBar.OneCluster.stories.storyshot

@@ -124,6 +124,7 @@
           aria-haspopup="true"
           aria-label="Account of current user"
           class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-1jcv3fz-MuiButtonBase-root-MuiIconButton-root"
+          data-testid="user-account-button"
           tabindex="0"
           type="button"
         >

frontend/src/components/App/__snapshots__/TopBar.TwoCluster.stories.storyshot

@@ -143,6 +143,7 @@
           aria-haspopup="true"
           aria-label="Account of current user"
           class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-1jcv3fz-MuiButtonBase-root-MuiIconButton-root"
+          data-testid="user-account-button"
           tabindex="0"
           type="button"
         >

frontend/src/components/common/CreateResourceButton.tsx

@@ -36,6 +36,7 @@ export function CreateResourceButton(props: CreateResourceButtonProps) {
         errorMessage={errorMessage}
         onEditorChanged={() => setErrorMessage('')}
         title={t('translation|Create {{ name }}', { name })}
+        aria-label={t('translation|Create {{ name }}', { name })}
       />
     </AuthVisible>
   );