diff --git a/e2e/dashboards-suite/new-constant-variable.spec.ts b/e2e/dashboards-suite/new-constant-variable.spec.ts index 928cfb62a61..a96189a9748 100644 --- a/e2e/dashboards-suite/new-constant-variable.spec.ts +++ b/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 diff --git a/e2e/dashboards-suite/new-custom-variable.spec.ts b/e2e/dashboards-suite/new-custom-variable.spec.ts index f5f8018015e..52fcafc0082 100644 --- a/e2e/dashboards-suite/new-custom-variable.spec.ts +++ b/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(); diff --git a/e2e/dashboards-suite/new-datasource-variable.spec.ts b/e2e/dashboards-suite/new-datasource-variable.spec.ts index 8493c03a008..a85e99da0a4 100644 --- a/e2e/dashboards-suite/new-datasource-variable.spec.ts +++ b/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(); diff --git a/e2e/dashboards-suite/new-interval-variable.spec.ts b/e2e/dashboards-suite/new-interval-variable.spec.ts index a3c50d9ec86..7fe862da976 100644 --- a/e2e/dashboards-suite/new-interval-variable.spec.ts +++ b/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(); diff --git a/e2e/dashboards-suite/new-query-variable.spec.ts b/e2e/dashboards-suite/new-query-variable.spec.ts index 79cbfc9a8c4..40956de18f4 100644 --- a/e2e/dashboards-suite/new-query-variable.spec.ts +++ b/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(() => { diff --git a/e2e/dashboards-suite/new-text-box-variable.spec.ts b/e2e/dashboards-suite/new-text-box-variable.spec.ts index 20b34080900..961cda55279 100644 --- a/e2e/dashboards-suite/new-text-box-variable.spec.ts +++ b/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 diff --git a/e2e/dashboards-suite/set-options-from-ui.spec.ts b/e2e/dashboards-suite/set-options-from-ui.spec.ts index cacbb1dd007..f62eee52e3e 100644 --- a/e2e/dashboards-suite/set-options-from-ui.spec.ts +++ b/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'); diff --git a/e2e/dashboards-suite/templating-dashboard-links-and-variables.spec.ts b/e2e/dashboards-suite/templating-dashboard-links-and-variables.spec.ts index c2eb79f780c..272da3a5916 100644 --- a/e2e/dashboards-suite/templating-dashboard-links-and-variables.spec.ts +++ b/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') diff --git a/e2e/panels-suite/panelEdit_queries.spec.ts b/e2e/panels-suite/panelEdit_queries.spec.ts index e8505eaca80..03479c3703a 100644 --- a/e2e/panels-suite/panelEdit_queries.spec.ts +++ b/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 diff --git a/e2e/various-suite/query-editor.spec.ts b/e2e/various-suite/query-editor.spec.ts index 5a7e9d52025..7c73ea39154 100644 --- a/e2e/various-suite/query-editor.spec.ts +++ b/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(); diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 28df5e9f7fe..77086cd9c4a 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/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}`, diff --git a/public/app/core/components/AppChrome/NavToolbar.tsx b/public/app/core/components/AppChrome/NavToolbar.tsx index 59cc55b552e..9fe8ef5a13e 100644 --- a/public/app/core/components/AppChrome/NavToolbar.tsx +++ b/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 ( -