e2e tests: Add selector to close dashboard settings and use it in e2e tests (#65625)

* add selector to close dashboard settings and use it in e2e tests

* check visibility of add panel button

* check visibility of add new panel button before clicking

e2e/cloud-plugins-suite/azure-monitor.spec.ts

@@ -2,6 +2,7 @@ import { load } from 'js-yaml';
 import { v4 as uuidv4 } from 'uuid';
 
 import { e2e } from '@grafana/e2e';
+import { GrafanaBootConfig } from '@grafana/runtime';
 
 import { selectors } from '../../public/app/plugins/datasource/azuremonitor/e2e/selectors';
 import {
@@ -96,7 +97,15 @@ const addAzureMonitorVariable = (
       break;
   }
   e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
-  e2e.components.PageToolbar.item('Go Back').click();
+  e2e()
+    .window()
+    .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
+      if (win.grafanaBootData.settings.featureToggles.topnav) {
+        e2e.pages.Dashboard.Settings.Actions.close().click();
+      } else {
+        e2e.components.PageToolbar.item('Go Back').click();
+      }
+    });
 };
 
 e2e.scenario({

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

@@ -2,7 +2,6 @@ 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', () => {
@@ -27,7 +26,7 @@ describe('Variables - Constant', () => {
       .window()
       .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
         if (win.grafanaBootData.settings.featureToggles.topnav) {
-          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+          e2e.pages.Dashboard.Settings.Actions.close().click();
         } else {
           e2e.components.BackButton.backArrow().click({ force: true });
         }

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

@@ -2,7 +2,6 @@ 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(() => {
@@ -36,7 +35,7 @@ describe('Variables - Custom', () => {
       .window()
       .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
         if (win.grafanaBootData.settings.featureToggles.topnav) {
-          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+          e2e.pages.Dashboard.Settings.Actions.close().click();
         } else {
           e2e.components.BackButton.backArrow().click({ force: true });
         }
@@ -68,7 +67,7 @@ describe('Variables - Custom', () => {
       .window()
       .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
         if (win.grafanaBootData.settings.featureToggles.topnav) {
-          e2e.components.Breadcrumbs.breadcrumb('Test variable output').click();
+          e2e.pages.Dashboard.Settings.Actions.close().click();
         } else {
           e2e.components.BackButton.backArrow().click({ force: true });
         }

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

@@ -2,7 +2,6 @@ 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', () => {
@@ -35,7 +34,7 @@ describe('Variables - Datasource', () => {
       .window()
       .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
         if (win.grafanaBootData.settings.featureToggles.topnav) {
-          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+          e2e.pages.Dashboard.Settings.Actions.close().click();
         } else {
           e2e.components.BackButton.backArrow().click({ force: true });
         }

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

@@ -2,7 +2,6 @@ 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) {
@@ -37,7 +36,7 @@ describe('Variables - Interval', () => {
       .window()
       .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
         if (win.grafanaBootData.settings.featureToggles.topnav) {
-          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+          e2e.pages.Dashboard.Settings.Actions.close().click();
         } else {
           e2e.components.BackButton.backArrow().click({ force: true });
         }

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

@@ -2,7 +2,6 @@ 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', () => {
@@ -108,7 +107,7 @@ describe('Variables - Query - Add variable', () => {
       .window()
       .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
         if (win.grafanaBootData.settings.featureToggles.topnav) {
-          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+          e2e.pages.Dashboard.Settings.Actions.close().click();
         } else {
           e2e.components.BackButton.backArrow().click({ force: true });
         }
@@ -180,7 +179,7 @@ describe('Variables - Query - Add variable', () => {
       .window()
       .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
         if (win.grafanaBootData.settings.featureToggles.topnav) {
-          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+          e2e.pages.Dashboard.Settings.Actions.close().click();
         } else {
           e2e.components.BackButton.backArrow().click({ force: true });
         }

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

@@ -2,7 +2,6 @@ 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', () => {
@@ -27,7 +26,7 @@ describe('Variables - Text box', () => {
       .window()
       .then((win: Cypress.AUTWindow & { grafanaBootData: GrafanaBootConfig['bootData'] }) => {
         if (win.grafanaBootData.settings.featureToggles.topnav) {
-          e2e.components.Breadcrumbs.breadcrumb(DASHBOARD_NAME).click();
+          e2e.pages.Dashboard.Settings.Actions.close().click();
         } else {
           e2e.components.BackButton.backArrow().click({ force: true });
         }

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

@@ -67,6 +67,9 @@ export const Pages = {
         `data-testid Dashboard template variables Variable Value DropDown option text ${item}`,
     },
     Settings: {
+      Actions: {
+        close: 'data-testid dashboard-settings-close',
+      },
       General: {
         deleteDashBoard: 'Dashboard settings page delete dashboard button',
         sectionItems: (item: string) => `Dashboard settings section item ${item}`,

packages/grafana-e2e/src/flows/configurePanel.ts

@@ -91,12 +91,14 @@ export const configurePanel = (config: PartialAddPanelConfig | PartialEditPanelC
       e2e.components.Panels.Panel.headerItems('Edit').click();
     } else {
       try {
+        e2e.components.PageToolbar.item('Add panel').should('be.visible');
         e2e.components.PageToolbar.item('Add panel').click();
       } catch (e) {
         // Depending on the screen size, the "Add panel" button might be hidden
         e2e.components.PageToolbar.item('Show more items').click();
         e2e.components.PageToolbar.item('Add panel').last().click();
       }
+      e2e.pages.AddDashboard.addNewPanel().should('be.visible');
       e2e.pages.AddDashboard.addNewPanel().click();
     }
 

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { locationUtil, NavModel, NavModelItem } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { locationService } from '@grafana/runtime';
 import { Button, PageToolbar, ToolbarButtonRow } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
@@ -59,7 +60,14 @@ export function DashboardSettings({ dashboard, editview, pageNav, sectionNav }:
 
   const actions = [
     config.featureToggles.topnav && (
-      <Button variant="secondary" key="close" fill="outline" size={size} onClick={onClose}>
+      <Button
+        data-testid={selectors.pages.Dashboard.Settings.Actions.close}
+        variant="secondary"
+        key="close"
+        fill="outline"
+        size={size}
+        onClick={onClose}
+      >
         Close
       </Button>
     ),