e2e: Fix authenticate token hang up and cluster navigation

since we now use a multi cluster structure to run our tests,
the cluster navigation step must be its own full nav step, different from navigateToPage, if it is tied to an auth step.

Signed-off-by: Vincent T <vtaylor@microsoft.com>

Author: vyncent-t

e2e-tests/tests/headlampPage.ts

@@ -22,6 +22,8 @@ export class HeadlampPage {
         this.page.click('button:has-text("Authenticate")'),
       ]);
     }
+
+    await this.page.waitForLoadState('load');
   }
 
   async navigateToCluster(name: string, token?: string) {
@@ -77,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

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"
         >