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

e2e/dashboards-suite/new-constant-variable.spec.ts

@@ -1,6 +1,8 @@
 import { e2e } from '@grafana/e2e';
+import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 describe('Variables - Constant', () => {
   it('can add a new constant variable', () => {
@@ -21,7 +23,15 @@ describe('Variables - Constant', () => {
 
     // Navigate back to the homepage and change the selected variable value
     e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
-    e2e.components.BackButton.backArrow().click({ force: true });
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+        } else {
+          e2e.components.BackButton.backArrow().click({ force: true });
+        }
+      });
     e2e.components.RefreshPicker.runButtonV2().click();
 
     // Assert it was rendered

e2e/dashboards-suite/new-custom-variable.spec.ts

@@ -1,6 +1,8 @@
 import { e2e } from '@grafana/e2e';
+import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 function fillInCustomVariable(name: string, label: string, value: string) {
   e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().within(() => {
@@ -30,7 +32,15 @@ describe('Variables - Custom', () => {
 
     // Navigate back to the homepage and change the selected variable value
     e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
-    e2e.components.BackButton.backArrow().should('be.visible').click({ force: true });
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+        } else {
+          e2e.components.BackButton.backArrow().click({ force: true });
+        }
+      });
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('one').click();
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('two').click();
 
@@ -54,7 +64,15 @@ describe('Variables - Custom', () => {
 
     // Navigate back to the homepage and change the selected variable value
     e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
-    e2e.components.BackButton.backArrow().click({ force: true });
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.Breadcrumbs.breadcrumb('Test variable output').click();
+        } else {
+          e2e.components.BackButton.backArrow().click({ force: true });
+        }
+      });
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('One').click();
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('Two').click();
 

e2e/dashboards-suite/new-datasource-variable.spec.ts

@@ -1,6 +1,8 @@
 import { e2e } from '@grafana/e2e';
+import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 describe('Variables - Datasource', () => {
   it('can add a new datasource variable', () => {
@@ -29,7 +31,15 @@ describe('Variables - Datasource', () => {
 
     // Navigate back to the homepage and change the selected variable value
     e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
-    e2e.components.BackButton.backArrow().click({ force: true });
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+        } else {
+          e2e.components.BackButton.backArrow().click({ force: true });
+        }
+      });
     e2e.components.RefreshPicker.runButtonV2().click();
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('gdev-prometheus').click();

e2e/dashboards-suite/new-interval-variable.spec.ts

@@ -1,6 +1,8 @@
 import { e2e } from '@grafana/e2e';
+import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 function assertPreviewValues(expectedValues: string[]) {
   for (const expected of expectedValues) {
@@ -31,7 +33,15 @@ describe('Variables - Interval', () => {
 
     // Navigate back to the homepage and change the selected variable value
     e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
-    e2e.components.BackButton.backArrow().click({ force: true });
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+        } else {
+          e2e.components.BackButton.backArrow().click({ force: true });
+        }
+      });
     e2e.components.RefreshPicker.runButtonV2().click();
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('10s').click();

e2e/dashboards-suite/new-query-variable.spec.ts

@@ -1,6 +1,8 @@
 import { e2e } from '@grafana/e2e';
+import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = '-Y-tnEDWk/templating-nested-template-variables';
+const DASHBOARD_NAME = 'Templating - Nested Template Variables';
 
 describe('Variables - Query - Add variable', () => {
   it('query variable should be default and default fields should be correct', () => {
@@ -102,9 +104,15 @@ describe('Variables - Query - Add variable', () => {
 
     e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().scrollIntoView().should('be.visible').click();
 
-    e2e().wait(1500);
-
-    e2e.components.BackButton.backArrow().should('be.visible').click({ force: true });
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+        } else {
+          e2e.components.BackButton.backArrow().click({ force: true });
+        }
+      });
 
     e2e.pages.Dashboard.SubMenu.submenuItemLabels('a label').should('be.visible');
     e2e.pages.Dashboard.SubMenu.submenuItem()
@@ -112,7 +120,6 @@ describe('Variables - Query - Add variable', () => {
       .eq(3)
       .within(() => {
         e2e().get('.variable-link-wrapper').should('be.visible').click();
-        e2e().wait(500);
         e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
           .should('be.visible')
           .within(() => {
@@ -169,9 +176,15 @@ describe('Variables - Query - Add variable', () => {
 
     e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().scrollIntoView().should('be.visible').click();
 
-    e2e().wait(500);
-
-    e2e.components.BackButton.backArrow().should('be.visible').click({ force: true });
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+        } else {
+          e2e.components.BackButton.backArrow().click({ force: true });
+        }
+      });
 
     e2e.pages.Dashboard.SubMenu.submenuItemLabels('a label').should('be.visible');
     e2e.pages.Dashboard.SubMenu.submenuItem()
@@ -179,7 +192,6 @@ describe('Variables - Query - Add variable', () => {
       .eq(3)
       .within(() => {
         e2e().get('.variable-link-wrapper').should('be.visible').click();
-        e2e().wait(500);
         e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
           .should('be.visible')
           .within(() => {

e2e/dashboards-suite/new-text-box-variable.spec.ts

@@ -1,6 +1,8 @@
 import { e2e } from '@grafana/e2e';
+import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output';
+const DASHBOARD_NAME = 'Test variable output';
 
 describe('Variables - Text box', () => {
   it('can add a new text box variable', () => {
@@ -21,7 +23,15 @@ describe('Variables - Text box', () => {
 
     // Navigate back to the homepage and change the selected variable value
     e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
-    e2e.components.BackButton.backArrow().click({ force: true });
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+        } else {
+          e2e.components.BackButton.backArrow().click({ force: true });
+        }
+      });
     e2e().get('#var-VariableUnderTest').clear().type('dog-cat').blur();
 
     // Assert it was rendered

e2e/dashboards-suite/set-options-from-ui.spec.ts

@@ -1,7 +1,7 @@
 import { e2e } from '@grafana/e2e';
+import { GrafanaBootConfig } from '@grafana/runtime';
 
 const PAGE_UNDER_TEST = '-Y-tnEDWk/templating-nested-template-variables';
-const flakyTimeout = 5000;
 
 describe('Variables - Set options from ui', () => {
   it('clicking a value that is not part of dependents options should change these to All', () => {
@@ -12,12 +12,18 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible').click();
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible').click();
 
-    e2e.components.PageToolbar.container().click();
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.NavToolbar.container().click();
+        } else {
+          e2e.components.PageToolbar.container().click();
+        }
+      });
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B').scrollIntoView().should('be.visible');
 
-    e2e().wait(flakyTimeout);
-
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
       .should('have.length', 2)
       .eq(0)
@@ -35,8 +41,6 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').should('be.visible');
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').should('be.visible');
 
-    e2e().wait(flakyTimeout);
-
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('be.visible').click();
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
@@ -64,10 +68,17 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A').should('be.visible').click();
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible').click();
 
-    e2e.components.PageToolbar.container().click();
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.NavToolbar.container().click();
+        } else {
+          e2e.components.PageToolbar.container().click();
+        }
+      });
 
     e2e().wait('@query');
-    e2e().wait(500);
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A + B').scrollIntoView().should('be.visible');
 
@@ -115,10 +126,17 @@ describe('Variables - Set options from ui', () => {
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A + B').should('be.visible').click();
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible').click();
 
-    e2e.components.PageToolbar.container().click();
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.NavToolbar.container().click();
+        } else {
+          e2e.components.PageToolbar.container().click();
+        }
+      });
 
     e2e().wait('@query');
-    e2e().wait(500);
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B').scrollIntoView().should('be.visible');
 

e2e/dashboards-suite/templating-dashboard-links-and-variables.spec.ts

@@ -1,4 +1,5 @@
 import { e2e } from '@grafana/e2e';
+import { GrafanaBootConfig } from '@grafana/runtime';
 
 e2e.scenario({
   describeName: 'Templating',
@@ -24,13 +25,11 @@ e2e.scenario({
 
     // waiting for network requests first
     e2e().wait(['@tagsTemplatingSearch', '@tagsDemoSearch']);
-    // and then waiting for links to render
-    e2e().wait(1000);
 
     const verifyLinks = (variableValue: string) => {
       e2e.components.DashboardLinks.link()
         .should('be.visible')
-        .and((links) => {
+        .should((links) => {
           expect(links).to.have.length.greaterThan(13);
 
           for (let index = 0; index < links.length; index++) {
@@ -48,7 +47,15 @@ e2e.scenario({
 
     e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('p2').should('be.visible').click();
 
-    e2e.components.PageToolbar.container().click();
+    e2e()
+      .window()
+      .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+        if (win.grafanaBootData.settings.featureToggles.topnav) {
+          e2e.components.NavToolbar.container().click();
+        } else {
+          e2e.components.PageToolbar.container().click();
+        }
+      });
     e2e.components.DashboardLinks.dropDown()
       .scrollIntoView()
       .should('be.visible')

e2e/panels-suite/panelEdit_queries.spec.ts

@@ -29,6 +29,7 @@ e2e.scenario({
     e2e.components.QueryEditorRows.rows({ timeout: flakyTimeout }).should('have.length', 2);
 
     // Remove refId A
+    e2e.components.QueryEditorRow.actionButton('Remove query').eq(0).scrollIntoView();
     e2e.components.QueryEditorRow.actionButton('Remove query').eq(0).should('be.visible').click();
 
     // We expect row with refId B to exist and be visible

e2e/various-suite/query-editor.spec.ts

@@ -31,6 +31,7 @@ e2e.scenario({
     cy.contains(queryText).should('be.visible');
 
     cy.get('body').click();
+    e2e.components.Alert.alertV2('error').should('not.be.visible');
 
     cy.contains('label', 'Builder').click();
 

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -10,6 +10,9 @@
  * @alpha
  */
 export const Components = {
+  Breadcrumbs: {
+    breadcrumb: (title: string) => `data-testid ${title} breadcrumb`,
+  },
   TimePicker: {
     openButton: 'data-testid TimePicker Open Button',
     fromField: 'Time Range from field',
@@ -225,6 +228,9 @@ export const Components = {
     },
     searchInput: 'search transformations',
   },
+  NavToolbar: {
+    container: 'data-testid Nav toolbar',
+  },
   PageToolbar: {
     container: () => '.page-toolbar',
     item: (tooltip: string) => `${tooltip}`,

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