Navigation: Update e2e tests to work with topnav (#60910)

* turn on topnav toggle in e2e tests

* fix variable e2e tests

* fix remaining tests + remove some hardcoded waits

* speculative fixes

* wait for error to disappear

* use new selector, turn toggle back off

public/app/core/components/AppChrome/NavToolbar.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
+import { Components } from '@grafana/e2e-selectors';
 import { Icon, IconButton, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { HOME_NAV_ID } from 'app/core/reducers/navModel';
 import { useSelector } from 'app/types';
@@ -36,7 +37,7 @@ export function NavToolbar({
   const breadcrumbs = buildBreadcrumbs(sectionNav, pageNav, homeNav);
 
   return (
-    <div className={styles.pageToolbar}>
+    <div data-testid={Components.NavToolbar.container} className={styles.pageToolbar}>
       <div className={styles.menuButton}>
         <IconButton name="bars" tooltip="Toggle menu" tooltipPlacement="bottom" size="xl" onClick={onToggleMegaMenu} />
       </div>

public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { Components } from '@grafana/e2e-selectors';
 import { Icon, useStyles2 } from '@grafana/ui';
 
 import { Breadcrumb } from './types';
@@ -10,18 +11,22 @@ type Props = Breadcrumb & {
   isCurrent: boolean;
 };
 
-export function BreadcrumbItem(props: Props) {
+export function BreadcrumbItem({ href, isCurrent, text }: Props) {
   const styles = useStyles2(getStyles);
   return (
     <li className={styles.breadcrumbWrapper}>
-      {props.isCurrent ? (
-        <span className={styles.breadcrumb} aria-current="page">
-          {props.text}
+      {isCurrent ? (
+        <span data-testid={Components.Breadcrumbs.breadcrumb(text)} className={styles.breadcrumb} aria-current="page">
+          {text}
         </span>
       ) : (
         <>
-          <a className={cx(styles.breadcrumb, styles.breadcrumbLink)} href={props.href}>
-            {props.text}
+          <a
+            data-testid={Components.Breadcrumbs.breadcrumb(text)}
+            className={cx(styles.breadcrumb, styles.breadcrumbLink)}
+            href={href}
+          >
+            {text}
           </a>
           <div className={styles.separator} aria-hidden={true}>
             <Icon name="angle-right" />