Plugin E2E: Expose variable list page as fixture

packages/plugin-e2e/src/e2e-selectors/types.ts

@@ -92,7 +92,7 @@ export type Components = {
   };
   PageToolbar: {
     item: (tooltip: string) => string;
-    shotMoreItems: string;
+    showMoreItems: string;
     itemButton: (title: string) => string;
     itemButtonTitle: string;
   };
@@ -196,9 +196,23 @@ export type Pages = {
             generalTypeSelectV2: string;
             previewOfValuesOption: string;
             submitButton: string;
+            generalNameInputV2: string;
+            applyButton: string;
           };
         };
       };
+      Close: string;
+    };
+    TemplateVariables: {
+      submenuItemLabels: (item: string) => string;
+      submenuItemValueDropDownValueLinkTexts: (item: string) => string;
+      submenuItemValueDropDownDropDown: string;
+      submenuItemValueDropDownOptionTexts: (item: string) => string;
+    };
+    Save: {
+      saveButton: string;
+      titleInput: string;
+      saveDashboardButton: string;
     };
   };
   Explore: {

packages/plugin-e2e/src/e2e-selectors/versioned/apis.ts

@@ -29,7 +29,7 @@ export const versionedAPIs = {
   },
   Dashboard: {
     delete: {
-      [MIN_GRAFANA_VERSION]: (uid: string) => `/api/datasources/uid/${uid}`,
+      [MIN_GRAFANA_VERSION]: (uid: string) => `/api/dashboards/uid/${uid}`,
     },
   },
   Plugin: {

packages/plugin-e2e/src/e2e-selectors/versioned/components.ts

@@ -145,7 +145,7 @@ export const versionedComponents = {
     item: {
       [MIN_GRAFANA_VERSION]: (tooltip: string) => `${tooltip}`,
     },
-    shotMoreItems: {
+    showMoreItems: {
       [MIN_GRAFANA_VERSION]: 'Show more items',
     },
     itemButton: {

packages/plugin-e2e/src/e2e-selectors/versioned/pages.ts

@@ -123,9 +123,45 @@ export const versionedPages = {
             selectionOptionsIncludeAllSwitch: {
               [MIN_GRAFANA_VERSION]: 'Variable editor Form IncludeAll switch',
             },
+            generalNameInputV2: {
+              '8.5.0': 'data-testid Variable editor Form Name field',
+              [MIN_GRAFANA_VERSION]: 'Variable editor Form Name field',
+            },
+            applyButton: {
+              '9.3.0': 'data-testid Variable editor Apply button',
+            },
           },
         },
       },
+      Close: {
+        [MIN_GRAFANA_VERSION]: 'Go Back button',
+        '9.5.0': 'data-testid dashboard-settings-close',
+      },
+    },
+    TemplateVariables: {
+      submenuItemLabels: {
+        [MIN_GRAFANA_VERSION]: (item: string) => `data-testid Dashboard template variables submenu Label ${item}`,
+      },
+      submenuItemValueDropDownValueLinkTexts: {
+        [MIN_GRAFANA_VERSION]: (item: string) =>
+          `data-testid Dashboard template variables Variable Value DropDown value link text ${item}`,
+      },
+      submenuItemValueDropDownDropDown: { [MIN_GRAFANA_VERSION]: 'Variable options' },
+      submenuItemValueDropDownOptionTexts: {
+        [MIN_GRAFANA_VERSION]: (item: string) =>
+          `data-testid Dashboard template variables Variable Value DropDown option text ${item}`,
+      },
+    },
+    Save: {
+      saveButton: {
+        [MIN_GRAFANA_VERSION]: 'Save dashboard',
+      },
+      titleInput: {
+        [MIN_GRAFANA_VERSION]: 'Save dashboard title field',
+      },
+      saveDashboardButton: {
+        [MIN_GRAFANA_VERSION]: 'Save dashboard button',
+      },
     },
   },
   Explore: {

packages/plugin-e2e/src/fixtures/commands/gotoVariablePage.ts

@@ -0,0 +1,17 @@
+import { TestFixture } from '@playwright/test';
+import { DashboardPageArgs, PlaywrightArgs } from '../../types';
+import { VariablePage } from '../../models/pages/VariablePage';
+
+type GotoVariablePageFixture = TestFixture<(args: DashboardPageArgs) => Promise<VariablePage>, PlaywrightArgs>;
+
+export const gotoVariablePage: GotoVariablePageFixture = async (
+  { request, page, selectors, grafanaVersion },
+  use,
+  testInfo
+) => {
+  await use(async (args) => {
+    const variablePage = new VariablePage({ page, selectors, grafanaVersion, request, testInfo }, args);
+    await variablePage.goto();
+    return variablePage;
+  });
+};

packages/plugin-e2e/src/fixtures/variablePage.ts

@@ -0,0 +1,15 @@
+import { TestFixture } from '@playwright/test';
+import { PlaywrightArgs } from '../types';
+import { VariablePage } from '../models/pages/VariablePage';
+
+type VariablePageFixture = TestFixture<VariablePage, PlaywrightArgs>;
+
+export const variablePage: VariablePageFixture = async (
+  { page, selectors, grafanaVersion, request },
+  use,
+  testInfo
+) => {
+  const variablePage = new VariablePage({ page, selectors, grafanaVersion, request, testInfo });
+  await variablePage.goto();
+  await use(variablePage);
+};

packages/plugin-e2e/src/index.ts

@@ -29,6 +29,8 @@ import { toDisplayPreviews } from './matchers/toDisplayPreviews';
 import { toBeOK } from './matchers/toBeOK';
 import { GrafanaPage } from './models/pages/GrafanaPage';
 import { VariableEditPage } from './models/pages/VariableEditPage';
+import { variablePage } from './fixtures/variablePage';
+import { gotoVariablePage } from './fixtures/commands/gotoVariablePage';
 
 // models
 export { DataSourcePicker } from './models/components/DataSourcePicker';
@@ -63,6 +65,7 @@ export const test = base.extend<PluginFixture, PluginOptions>({
   dashboardPage,
   panelEditPage,
   variableEditPage,
+  variablePage,
   annotationEditPage,
   explorePage,
   createDataSource,
@@ -73,6 +76,7 @@ export const test = base.extend<PluginFixture, PluginOptions>({
   gotoDashboardPage,
   gotoPanelEditPage,
   gotoVariableEditPage,
+  gotoVariablePage,
   gotoAnnotationEditPage,
   gotoDataSourceConfigPage,
   gotoAppConfigPage,

packages/plugin-e2e/src/models/pages/DashboardPage.ts

@@ -110,4 +110,22 @@ export class DashboardPage extends GrafanaPage {
   async refreshDashboard() {
     await this.ctx.page.getByTestId(this.ctx.selectors.components.RefreshPicker.runButtonV2).click();
   }
+
+  /**
+   * Saves the dashboard
+   */
+  async saveDashboard(title?: string): Promise<string | undefined> {
+    await this.ctx.page.getByLabel(this.ctx.selectors.pages.Dashboard.Save.saveButton).click();
+    if (title) {
+      await this.ctx.page.getByLabel(this.ctx.selectors.pages.Dashboard.Save.titleInput).fill(title);
+    }
+    await this.ctx.page.getByLabel(this.ctx.selectors.pages.Dashboard.Save.saveDashboardButton).click();
+
+    const resp = await this.ctx.page.waitForResponse(
+      (response) => response.url().includes('/api/dashboards/db') && response.status() === 200
+    );
+    const body = await resp.json();
+
+    return body.uid || undefined;
+  }
 }

packages/plugin-e2e/src/models/pages/ExplorePage.ts

@@ -75,7 +75,7 @@ export class ExplorePage extends GrafanaPage {
       });
     } catch (_) {
       // handle the case when the run button is hidden behind the "Show more items" button
-      await this.getByGrafanaSelector(components.PageToolbar.item(components.PageToolbar.shotMoreItems)).click();
+      await this.getByGrafanaSelector(components.PageToolbar.item(components.PageToolbar.showMoreItems)).click();
       await this.getByGrafanaSelector(components.RefreshPicker.runButtonV2).last().click();
     }
     return responsePromise;

packages/plugin-e2e/src/models/pages/VariablePage.ts

@@ -5,6 +5,7 @@ import { VariableEditPage } from './VariableEditPage';
 export class VariablePage extends GrafanaPage {
   constructor(readonly ctx: PluginTestCtx, readonly dashboard?: DashboardPageArgs) {
     super(ctx);
+    this.dashboard = dashboard;
   }
 
   /**
@@ -22,11 +23,11 @@ export class VariablePage extends GrafanaPage {
   /**
    * Clicks the add new variable button and returns the variable edit page
    */
-  async clickAddNew() {
+  async clickAddNew(first?: boolean) {
     const { addVariableCTAV2, addVariableCTAV2Item, newButton } =
       this.ctx.selectors.pages.Dashboard.Settings.Variables.List;
 
-    if (!this.dashboard?.uid) {
+    if (!this.dashboard?.uid || first) {
       await this.getByGrafanaSelector(addVariableCTAV2(addVariableCTAV2Item)).click();
     } else {
       await this.getByGrafanaSelector(newButton).click();

packages/plugin-e2e/src/types.ts

@@ -17,6 +17,7 @@ import { DataSourceConfigPage } from './models/pages/DataSourceConfigPage';
 import { ExplorePage } from './models/pages/ExplorePage';
 import { PanelEditPage } from './models/pages/PanelEditPage';
 import { VariableEditPage } from './models/pages/VariableEditPage';
+import { VariablePage } from './models/pages/VariablePage';
 
 export type PluginOptions = {
   /**
@@ -200,6 +201,14 @@ export type PluginFixture = {
    */
   variableEditPage: VariableEditPage;
 
+  /**
+   * Isolated {@link VariablePage} instance for each test.
+   *
+   * When using this fixture in a test, you will get a new dashboard page with a new empty variable edit page
+   * To load an existing dashboard with an existing variable, use the {@link gotoVariableEditPage} fixture.
+   */
+  variablePage: VariablePage;
+
   /**
    * Isolated {@link AnnotationEditPage} instance for each test.
    *
@@ -236,6 +245,11 @@ export type PluginFixture = {
    */
   gotoVariableEditPage: (args: DashboardEditViewArgs<string>) => Promise<VariableEditPage>;
 
+  /**
+   * Fixture command that navigates a variable edit page for an already existing variable query in a dashboard.
+   */
+  gotoVariablePage: (args: DashboardPageArgs) => Promise<VariablePage>;
+
   /**
    * Fixture command that navigates an annotation edit page for an already existing annotation query in a dashboard.
    */