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();