chore(app): fix e2e tests (#7154)

app/portainer/components/PageHeader/HeaderTitle.html

@@ -4,17 +4,17 @@
 </div>
 
 <span class="pull-right myaccount-container" uib-dropdown on-toggle="toggled(open)">
-  <a href class="myaccount-dropdown" uib-dropdown-toggle>
+  <a href class="myaccount-dropdown" uib-dropdown-toggle data-cy="userMenu-button" aria-label="User menu toggle">
     <span class="pull-right user-box" ng-if="$ctrl.username">
       <i class="fa fa-user-circle" aria-hidden="true"></i> {{ $ctrl.username }} <i class="fa fa-angle-down myaccount-icon" aria-hidden="true"></i>
     </span>
   </a>
-  <ul class="dropdown-menu" uib-dropdown-menu>
+  <ul class="dropdown-menu" uib-dropdown-menu aria-label="User Menu" data-cy="userMenu">
     <li>
-      <a ui-sref="portainer.account">My account</a>
+      <a ui-sref="portainer.account" data-cy="userMenu-myAccount">My account</a>
     </li>
     <li>
-      <a ui-sref="portainer.logout({performApiLogout: true})" data-cy="template-logoutButton">Log out</a>
+      <a ui-sref="portainer.logout({performApiLogout: true})" data-cy="userMenu-logOut">Log out</a>
     </li>
   </ul>
 </span>

app/react/components/PageHeader/HeaderTitle.tsx

@@ -7,9 +7,10 @@ import {
 } from '@reach/menu-button';
 import clsx from 'clsx';
 import { User, ChevronDown } from 'react-feather';
-import { useSref } from '@uirouter/react';
+import { UISrefProps, useSref } from '@uirouter/react';
 
 import { useUser } from '@/portainer/hooks/useUser';
+import { AutomationTestingProps } from '@/types';
 
 import { useHeaderContext } from './HeaderContainer';
 import styles from './HeaderTitle.module.css';
@@ -32,37 +33,59 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
             'pull-right flex items-center gap-1',
             styles.menuButton
           )}
+          data-cy="userMenu-button"
+          aria-label="User menu toggle"
         >
           <User className="icon-nested-gray" />
           {user && <span>{user.Username}</span>}
           <ChevronDown className={styles.arrowDown} />
         </MenuButton>
 
-        <MenuList className={styles.menuList}>
+        <MenuList
+          className={styles.menuList}
+          aria-label="User Menu"
+          data-cy="userMenu"
+        >
           {!window.ddExtension && (
-            <MenuLink to="portainer.account" label="My account" />
+            <MenuLink
+              to="portainer.account"
+              label="My account"
+              data-cy="userMenu-myAccount"
+            />
           )}
 
-          <MenuLink to="portainer.logout" label="Log out" />
+          <MenuLink
+            to="portainer.logout"
+            label="Log out"
+            data-cy="userMenu-logOut"
+            params={{ performApiLogout: true }}
+          />
         </MenuList>
       </Menu>
     </div>
   );
 }
 
-interface MenuLinkProps {
-  to: string;
+interface MenuLinkProps extends AutomationTestingProps, UISrefProps {
   label: string;
 }
 
-function MenuLink({ to, label }: MenuLinkProps) {
-  const anchorProps = useSref(to);
+function MenuLink({
+  to,
+  label,
+  params,
+  options,
+  'data-cy': dataCy,
+}: MenuLinkProps) {
+  const anchorProps = useSref(to, params, options);
 
   return (
     <ReachMenuLink
       href={anchorProps.href}
       onClick={anchorProps.onClick}
       className={styles.menuLink}
+      aria-label={label}
+      data-cy={dataCy}
     >
       {label}
     </ReachMenuLink>