@grafana/plugin-e2e 0.25.1 → 0.26.1

package/dist/e2e-selectors/types.d.ts

@@ -11,7 +11,7 @@ export type APIs = {
         query: string;
         health: (uid: string, id: string) => string;
         datasourceByUID: (uid: string) => string;
-        proxy: (uid: string) => string;
+        proxy: (uid: string, id: string) => string;
     };
     Dashboard: {
         delete: (uid: string) => string;
@@ -175,10 +175,12 @@ export type Pages = {
                     newButton: string;
                     addVariableCTAV2: (variableName: string) => string;
                     addVariableCTAV2Item: string;
+                    table: string;
                 };
                 Edit: {
                     url: (dashboardUid: string, editIndex: string) => string;
                     General: {
+                        selectionOptionsIncludeAllSwitch: string;
                         generalTypeSelectV2: string;
                         previewOfValuesOption: string;
                         submitButton: string;

package/dist/e2e-selectors/versioned/apis.d.ts

@@ -21,7 +21,8 @@ export declare const versionedAPIs: {
             "8.0.0": (uid: string) => string;
         };
         proxy: {
-            "8.0.0": (uid: string) => string;
+            '9.4.0': (uid: string, _: string) => string;
+            "8.0.0": (_: string, id: string) => string;
         };
     };
     Dashboard: {

package/dist/e2e-selectors/versioned/apis.js

@@ -25,7 +25,8 @@ exports.versionedAPIs = {
             [constants_1.MIN_GRAFANA_VERSION]: (uid) => `/api/datasources/uid/${uid}`,
         },
         proxy: {
-            [constants_1.MIN_GRAFANA_VERSION]: (uid) => `api/datasources/proxy/uid/${uid}`,
+            '9.4.0': (uid, _) => `api/datasources/proxy/uid/${uid}`,
+            [constants_1.MIN_GRAFANA_VERSION]: (_, id) => `/api/datasources/proxy/${id}`,
         },
     },
     Dashboard: {

package/dist/e2e-selectors/versioned/pages.d.ts

@@ -112,6 +112,9 @@ export declare const versionedPages: {
                             '10.4.0': string;
                             "8.0.0": string;
                         };
+                        selectionOptionsIncludeAllSwitch: {
+                            "8.0.0": string;
+                        };
                     };
                 };
             };

package/dist/e2e-selectors/versioned/pages.js

@@ -118,6 +118,9 @@ exports.versionedPages = {
                             '10.4.0': 'data-testid Variable editor Run Query button',
                             [constants_1.MIN_GRAFANA_VERSION]: 'Variable editor Submit button',
                         },
+                        selectionOptionsIncludeAllSwitch: {
+                            [constants_1.MIN_GRAFANA_VERSION]: 'Variable editor Form IncludeAll switch',
+                        },
                     },
                 },
             },

package/dist/index.js

@@ -110,7 +110,7 @@ exports.expect = test_1.expect.extend({
 });
 /** Register a custom selector engine that resolves locators for Grafana E2E selectors
  *
- * The same functionality is available in the {@link GrafanaPage.getByTestIdOrAriaLabel} method. However,
+ * The same functionality is available in the {@link GrafanaPage.getByGrafanaSelector} method. However,
  * by registering the selector engine, one can resolve locators by Grafana E2E selectors also within a locator.
  *
  * Example:

package/dist/matchers/toDisplayPreviews.js

@@ -8,7 +8,7 @@ const toDisplayPreviews = async (variableEditPage, previewTexts, options) => {
     let actual;
     let message = `To find preview of values: ${previewTexts.join(', ')}}`;
     try {
-        await (0, test_1.expect)(variableEditPage.getByTestIdOrAriaLabel(variableEditPage.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption)).toContainText(previewTexts, options);
+        await (0, test_1.expect)(variableEditPage.getByGrafanaSelector(variableEditPage.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption)).toContainText(previewTexts, options);
         return {
             pass: true,
             actual: false,

package/dist/matchers/toHaveAlert.js

@@ -8,7 +8,7 @@ const toHaveAlert = async (grafanaPage, severity, options) => {
     let message = `An alert of variant ${severity} to be displayed on the page`;
     try {
         const filteredAlerts = grafanaPage
-            .getByTestIdOrAriaLabel(grafanaPage.ctx.selectors.components.Alert.alertV2(severity))
+            .getByGrafanaSelector(grafanaPage.ctx.selectors.components.Alert.alertV2(severity))
             .filter({
             hasText: options?.hasText,
             hasNotText: options?.hasNotText,

package/dist/models/components/DataSourcePicker.js

@@ -10,7 +10,7 @@ class DataSourcePicker extends GrafanaPage_1.GrafanaPage {
      * Sets the data source picker to the provided name
      */
     async set(name) {
-        await this.getByTestIdOrAriaLabel(this.ctx.selectors.components.DataSourcePicker.container)
+        await this.getByGrafanaSelector(this.ctx.selectors.components.DataSourcePicker.container)
             .locator('input')
             .fill(name);
         // this is a hack to get the selection to work in 10.ish versions of Grafana.

package/dist/models/components/Panel.js

@@ -64,7 +64,7 @@ class Panel extends GrafanaPage_1.GrafanaPage {
         if (semver.lte(this.ctx.grafanaVersion, '9.4.3')) {
             selector = this.ctx.selectors.components.Panels.Panel.headerCornerInfo(ERROR_STATUS);
         }
-        return this.getByTestIdOrAriaLabel(selector, {
+        return this.getByGrafanaSelector(selector, {
             root: this.locator,
         });
     }

package/dist/models/components/TimeRange.js

@@ -36,7 +36,7 @@ class TimeRange extends GrafanaPage_1.GrafanaPage {
     async set({ from, to, zone }) {
         const { TimeZonePicker, TimePicker } = this.ctx.selectors.components;
         try {
-            await this.getByTestIdOrAriaLabel(TimePicker.openButton).click();
+            await this.getByGrafanaSelector(TimePicker.openButton).click();
         }
         catch (e) {
             // seems like in older versions of Grafana the time picker markup is rendered twice
@@ -44,19 +44,19 @@ class TimeRange extends GrafanaPage_1.GrafanaPage {
         }
         if (zone) {
             const changeTimeSettingsButton = semver.gte(this.ctx.grafanaVersion, '11.0.0')
-                ? this.getByTestIdOrAriaLabel(TimeZonePicker.changeTimeSettingsButton)
+                ? this.getByGrafanaSelector(TimeZonePicker.changeTimeSettingsButton)
                 : this.ctx.page.getByRole('button', { name: 'Change time settings' });
             await changeTimeSettingsButton.click();
-            await this.getByTestIdOrAriaLabel(TimeZonePicker.containerV2).fill(zone);
+            await this.getByGrafanaSelector(TimeZonePicker.containerV2).fill(zone);
         }
-        await this.getByTestIdOrAriaLabel(TimePicker.absoluteTimeRangeTitle).click();
-        const fromField = await this.getByTestIdOrAriaLabel(TimePicker.fromField);
+        await this.getByGrafanaSelector(TimePicker.absoluteTimeRangeTitle).click();
+        const fromField = await this.getByGrafanaSelector(TimePicker.fromField);
         await fromField.clear();
         await fromField.fill(from);
-        const toField = await this.getByTestIdOrAriaLabel(TimePicker.toField);
+        const toField = await this.getByGrafanaSelector(TimePicker.toField);
         await toField.clear();
         await toField.fill(to);
-        await this.getByTestIdOrAriaLabel(TimePicker.applyTimeRange).click();
+        await this.getByGrafanaSelector(TimePicker.applyTimeRange).click();
     }
 }
 exports.TimeRange = TimeRange;

package/dist/models/pages/AnnotationEditPage.js

@@ -45,7 +45,14 @@ class AnnotationEditPage extends GrafanaPage_1.GrafanaPage {
         const url = this.args.dashboard?.uid
             ? Dashboard.Settings.Annotations.Edit.url(this.args.dashboard.uid, this.args.id)
             : AddDashboard.Settings.Annotations.Edit.url(this.args.id);
-        return super.navigate(url, options);
+        await super.navigate(url, options);
+        // In versions before 9.2.0, the annotation index is not part of the URL so there's no way to navigate to it directly.
+        // Instead, we have to click the nth row in the variable list to navigate to the edit page for a given annotation index.
+        if (semver.lt(this.ctx.grafanaVersion, '9.2.0') && this.args.id) {
+            const list = this.ctx.page.locator('tbody tr');
+            const variables = await list.all();
+            await variables[Number(this.args.id)].click();
+        }
     }
     /**
      * Executes the annotation query defined in the annotation page and returns the response promise
@@ -54,7 +61,7 @@ class AnnotationEditPage extends GrafanaPage_1.GrafanaPage {
     async runQuery(options) {
         const responsePromise = this.ctx.page.waitForResponse((resp) => resp.url().includes(this.ctx.selectors.apis.DataSource.query), options);
         const testButton = semver.gte(this.ctx.grafanaVersion, '11.0.0')
-            ? this.getByTestIdOrAriaLabel(this.ctx.selectors.components.Annotations.editor.testButton)
+            ? this.getByGrafanaSelector(this.ctx.selectors.components.Annotations.editor.testButton)
             : this.ctx.page.getByRole('button', { name: 'TEST' });
         await testButton.click();
         return responsePromise;

package/dist/models/pages/AnnotationPage.js

@@ -53,16 +53,16 @@ class AnnotationPage extends GrafanaPage_1.GrafanaPage {
         if (!this.dashboard?.uid) {
             //the dashboard doesn't have any annotations yet (except for the built-in one)
             if (semver.gte(this.ctx.grafanaVersion, '8.3.0')) {
-                await this.getByTestIdOrAriaLabel(addAnnotationCTAV2).click();
+                await this.getByGrafanaSelector(addAnnotationCTAV2).click();
             }
             else {
-                await this.getByTestIdOrAriaLabel(addAnnotationCTA).click();
+                await this.getByGrafanaSelector(addAnnotationCTA).click();
             }
         }
         else {
             //the dashboard already has annotations
             const newQueryButton = semver.gte(this.ctx.grafanaVersion, '11.0.0')
-                ? this.getByTestIdOrAriaLabel(addAnnotationCTAV2)
+                ? this.getByGrafanaSelector(addAnnotationCTAV2)
                 : this.ctx.page.getByRole('button', { name: 'New query' });
             await newQueryButton.click();
         }

package/dist/models/pages/DashboardPage.js

@@ -75,7 +75,7 @@ class DashboardPage extends GrafanaPage_1.GrafanaPage {
      * await expect(panel.fieldNames).toContainText(['time', 'temperature']);
      */
     getPanelByTitle(title) {
-        let locator = this.getByTestIdOrAriaLabel(this.ctx.selectors.components.Panels.Panel.title(title), {
+        let locator = this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.title(title), {
             startsWith: true,
         });
         // in older versions, the panel selector is added to a child element, so we need to go up two levels to get the wrapper
@@ -101,11 +101,11 @@ class DashboardPage extends GrafanaPage_1.GrafanaPage {
     async addPanel() {
         const { components, pages } = this.ctx.selectors;
         if (semver.gte(this.ctx.grafanaVersion, '10.0.0')) {
-            await this.getByTestIdOrAriaLabel(components.PageToolbar.itemButton(components.PageToolbar.itemButtonTitle)).click();
-            await this.getByTestIdOrAriaLabel(pages.AddDashboard.itemButton(pages.AddDashboard.itemButtonAddViz)).click();
+            await this.getByGrafanaSelector(components.PageToolbar.itemButton(components.PageToolbar.itemButtonTitle)).click();
+            await this.getByGrafanaSelector(pages.AddDashboard.itemButton(pages.AddDashboard.itemButtonAddViz)).click();
         }
         else {
-            await this.getByTestIdOrAriaLabel(pages.AddDashboard.addNewPanel).click();
+            await this.getByGrafanaSelector(pages.AddDashboard.addNewPanel).click();
         }
         const panelId = await this.ctx.page.evaluate(() => {
             const urlParams = new URLSearchParams(window.location.search);

package/dist/models/pages/DataSourceConfigPage.js

@@ -39,7 +39,7 @@ class DataSourceConfigPage extends GrafanaPage_1.GrafanaPage {
         const saveResponsePromise = this.ctx.page.waitForResponse((resp) => resp.url().includes(datasourceByUID(this.datasource.uid)));
         const healthPath = options?.path ?? health(this.datasource.uid, this.datasource.id.toString());
         const healthResponsePromise = this.ctx.page.waitForResponse((resp) => resp.url().includes(healthPath));
-        await this.getByTestIdOrAriaLabel(this.ctx.selectors.pages.DataSource.saveAndTest).click();
+        await this.getByGrafanaSelector(this.ctx.selectors.pages.DataSource.saveAndTest).click();
         return saveResponsePromise.then(() => healthResponsePromise);
     }
 }

package/dist/models/pages/ExplorePage.js

@@ -1,7 +1,30 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExplorePage = void 0;
-const semver = require('semver');
+const semver = __importStar(require("semver"));
 const DataSourcePicker_1 = require("../components/DataSourcePicker");
 const GrafanaPage_1 = require("./GrafanaPage");
 const TimeRange_1 = require("../components/TimeRange");
@@ -26,7 +49,7 @@ class ExplorePage extends GrafanaPage_1.GrafanaPage {
     }
     getPanelLocators(suffix, text) {
         const page = this.ctx.page;
-        let locator = this.getByTestIdOrAriaLabel(this.ctx.selectors.components.Panels.Panel.title(suffix), {
+        let locator = this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.title(suffix), {
             startsWith: true,
         });
         // having to use these selectors is unfortunate, but the Explore page did not use data-testid on the panels before Grafana 10.
@@ -48,8 +71,8 @@ class ExplorePage extends GrafanaPage_1.GrafanaPage {
      * Returns the locator for the query editor row with the given refId
      */
     getQueryEditorRow(refId) {
-        return this.getByTestIdOrAriaLabel(this.ctx.selectors.components.QueryEditorRows.rows).filter({
-            has: this.getByTestIdOrAriaLabel(this.ctx.selectors.components.QueryEditorRow.title(refId)),
+        return this.getByGrafanaSelector(this.ctx.selectors.components.QueryEditorRows.rows).filter({
+            has: this.getByGrafanaSelector(this.ctx.selectors.components.QueryEditorRow.title(refId)),
         });
     }
     /**
@@ -59,14 +82,14 @@ class ExplorePage extends GrafanaPage_1.GrafanaPage {
         const components = this.ctx.selectors.components;
         const responsePromise = this.ctx.page.waitForResponse((resp) => resp.url().includes(this.ctx.selectors.apis.DataSource.query), options);
         try {
-            await this.getByTestIdOrAriaLabel(components.RefreshPicker.runButtonV2).click({
+            await this.getByGrafanaSelector(components.RefreshPicker.runButtonV2).click({
                 timeout: 1000,
             });
         }
         catch (_) {
             // handle the case when the run button is hidden behind the "Show more items" button
-            await this.getByTestIdOrAriaLabel(components.PageToolbar.item(components.PageToolbar.shotMoreItems)).click();
-            await this.getByTestIdOrAriaLabel(components.RefreshPicker.runButtonV2).last().click();
+            await this.getByGrafanaSelector(components.PageToolbar.item(components.PageToolbar.shotMoreItems)).click();
+            await this.getByGrafanaSelector(components.RefreshPicker.runButtonV2).last().click();
         }
         return responsePromise;
     }

package/dist/models/pages/GrafanaPage.d.ts

@@ -1,5 +1,5 @@
 import { Locator, Request, Response } from '@playwright/test';
-import { GetByTestIdOrAriaLabelOptions, NavigateOptions, PluginTestCtx } from '../../types';
+import { getByGrafanaSelectorOptions, NavigateOptions, PluginTestCtx } from '../../types';
 /**
  * Base class for all Grafana pages.
  *
@@ -10,11 +10,10 @@ export declare abstract class GrafanaPage {
     constructor(ctx: PluginTestCtx);
     protected navigate(url: string, options?: NavigateOptions): Promise<void>;
     /**
-     * Get a locator for a Grafana element by data-testid or aria-label
-     * @param selector the data-testid or aria-label of the element
-     * @param root optional root locator to search within. If no locator is provided, the page will be used
+     * Get a locator based on a Grafana E2E selector. A grafana E2E selector is defined in @grafana/e2e-selectors or in plugin-e2e/src/e2e-selectors.
+     * An E2E selector is a string that identifies a specific element in the Grafana UI. The element referencing the E2E selector use the data-testid or aria-label attribute.
      */
-    getByTestIdOrAriaLabel(selector: string, options?: GetByTestIdOrAriaLabelOptions): Locator;
+    getByGrafanaSelector(selector: string, options?: getByGrafanaSelectorOptions): Locator;
     /**
      * Mocks the response of the datasource query call
      * @param json the json response to return

package/dist/models/pages/GrafanaPage.js

@@ -21,11 +21,10 @@ class GrafanaPage {
         });
     }
     /**
-     * Get a locator for a Grafana element by data-testid or aria-label
-     * @param selector the data-testid or aria-label of the element
-     * @param root optional root locator to search within. If no locator is provided, the page will be used
+     * Get a locator based on a Grafana E2E selector. A grafana E2E selector is defined in @grafana/e2e-selectors or in plugin-e2e/src/e2e-selectors.
+     * An E2E selector is a string that identifies a specific element in the Grafana UI. The element referencing the E2E selector use the data-testid or aria-label attribute.
      */
-    getByTestIdOrAriaLabel(selector, options) {
+    getByGrafanaSelector(selector, options) {
         const startsWith = options?.startsWith ? '^' : '';
         if (selector.startsWith('data-testid')) {
             return (options?.root || this.ctx.page).locator(`[data-testid${startsWith}="${selector}"]`);

package/dist/models/pages/PanelEditPage.js

@@ -47,7 +47,7 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
     }
     getPanelLocator() {
         // only one panel is allowed in the panel edit page, so we don't need to use panel title to locate it
-        const locator = this.getByTestIdOrAriaLabel(this.ctx.selectors.components.Panels.Panel.title(''), {
+        const locator = this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.title(''), {
             startsWith: true,
         });
         // in older versions, the panel selector is added to a child element, so we need to go up two levels to get the wrapper
@@ -70,7 +70,7 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
     }
     async toggleTableView() {
         await (0, utils_1.radioButtonSetChecked)(this.ctx.page, 'Table view', true);
-        let locator = this.getByTestIdOrAriaLabel(this.ctx.selectors.components.Panels.Panel.toggleTableViewPanel(''));
+        let locator = this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.toggleTableViewPanel(''));
         if (semver.lt(this.ctx.grafanaVersion, '10.4.0')) {
             locator = this.ctx.page.getByRole('table');
         }
@@ -78,7 +78,7 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
     }
     async untoggleTableView() {
         await (0, utils_1.radioButtonSetChecked)(this.ctx.page, 'Table view', false);
-        this.panel = new Panel_1.Panel(this.ctx, this.getByTestIdOrAriaLabel(this.ctx.selectors.components.Panels.Panel.title(''), { startsWith: true }));
+        this.panel = new Panel_1.Panel(this.ctx, this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.title(''), { startsWith: true }));
     }
     /**
      * Sets the title of the panel. This method will open the panel options, set the title and close the panel options.
@@ -88,8 +88,8 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
         const { OptionsGroup, PanelEditor } = this.ctx.selectors.components;
         await this.collapseSection(OptionsGroup.groupTitle);
         const vizInput = semver.gte(this.ctx.grafanaVersion, '11.0.0')
-            ? this.getByTestIdOrAriaLabel(PanelEditor.OptionsPane.fieldInput(TITLE))
-            : this.getByTestIdOrAriaLabel(OptionsGroup.group(OptionsGroup.groupTitle)).locator('input').first();
+            ? this.getByGrafanaSelector(PanelEditor.OptionsPane.fieldInput(TITLE))
+            : this.getByGrafanaSelector(OptionsGroup.group(OptionsGroup.groupTitle)).locator('input').first();
         await vizInput.fill(titleText);
         await this.ctx.page.keyboard.press('Tab');
     }
@@ -98,22 +98,22 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
      */
     async setVisualization(visualization) {
         // toggle options pane if panel edit is not visible
-        const showPanelEditElement = this.getByTestIdOrAriaLabel('Show options pane');
+        const showPanelEditElement = this.getByGrafanaSelector('Show options pane');
         const showPanelEditElementCount = await showPanelEditElement.count();
         if (showPanelEditElementCount > 0) {
             await showPanelEditElement.click();
         }
-        await this.getByTestIdOrAriaLabel(this.ctx.selectors.components.PanelEditor.toggleVizPicker).click();
-        await this.getByTestIdOrAriaLabel(this.ctx.selectors.components.PluginVisualization.item(visualization)).click();
-        await (0, test_1.expect)(this.getByTestIdOrAriaLabel(this.ctx.selectors.components.PanelEditor.toggleVizPicker), `Could not set visualization to ${visualization}. Ensure the panel is installed.`).toHaveText(visualization);
+        await this.getByGrafanaSelector(this.ctx.selectors.components.PanelEditor.toggleVizPicker).click();
+        await this.getByGrafanaSelector(this.ctx.selectors.components.PluginVisualization.item(visualization)).click();
+        await (0, test_1.expect)(this.getByGrafanaSelector(this.ctx.selectors.components.PanelEditor.toggleVizPicker), `Could not set visualization to ${visualization}. Ensure the panel is installed.`).toHaveText(visualization);
     }
     /**
      * Expands the section for the given category name. If the section is already expanded, this method does nothing.
      */
     async collapseSection(categoryName) {
-        const section = this.getByTestIdOrAriaLabel(this.ctx.selectors.components.OptionsGroup.group(categoryName));
+        const section = this.getByGrafanaSelector(this.ctx.selectors.components.OptionsGroup.group(categoryName));
         await (0, test_1.expect)(section, `Could not find any section for category: ${categoryName}`).toBeVisible();
-        const sectionToggle = this.getByTestIdOrAriaLabel(this.ctx.selectors.components.OptionsGroup.toggle(categoryName));
+        const sectionToggle = this.getByGrafanaSelector(this.ctx.selectors.components.OptionsGroup.toggle(categoryName));
         const expandedAttr = (await sectionToggle.getAttribute('aria-expanded')) ?? '';
         if (/false/.test(expandedAttr)) {
             await section.click();
@@ -123,7 +123,7 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
      * Returns the name of the visualization currently selected in the panel editor
      */
     getVisualizationName() {
-        return this.getByTestIdOrAriaLabel(this.ctx.selectors.components.PanelEditor.toggleVizPicker);
+        return this.getByGrafanaSelector(this.ctx.selectors.components.PanelEditor.toggleVizPicker);
     }
     /**
      * Clicks the "Apply" button in the panel editor
@@ -135,8 +135,8 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
      * Returns the locator for the query editor row with the given refId
      */
     getQueryEditorRow(refId) {
-        return this.getByTestIdOrAriaLabel(this.ctx.selectors.components.QueryEditorRows.rows).filter({
-            has: this.getByTestIdOrAriaLabel(this.ctx.selectors.components.QueryEditorRow.title(refId)),
+        return this.getByGrafanaSelector(this.ctx.selectors.components.QueryEditorRows.rows).filter({
+            has: this.getByGrafanaSelector(this.ctx.selectors.components.QueryEditorRow.title(refId)),
         });
     }
     /**
@@ -155,7 +155,7 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
         const defaultPredicate = (resp) => resp.url().includes(this.ctx.selectors.apis.DataSource.query);
         const responsePromise = this.ctx.page.waitForResponse(options?.waitForResponsePredicateCallback ?? defaultPredicate, options);
         // in older versions of grafana, the refresh button is rendered twice. this is a workaround to click the correct one
-        const refreshPanelButton = this.getByTestIdOrAriaLabel(this.ctx.selectors.components.PanelEditor.General.content).locator(`selector=${this.ctx.selectors.components.RefreshPicker.runButtonV2}`);
+        const refreshPanelButton = this.getByGrafanaSelector(this.ctx.selectors.components.PanelEditor.General.content).locator(`selector=${this.ctx.selectors.components.RefreshPicker.runButtonV2}`);
         await refreshPanelButton.click();
         return responsePromise;
     }

package/dist/models/pages/VariableEditPage.js

@@ -1,7 +1,30 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VariableEditPage = void 0;
-const gte = require('semver/functions/gte');
+const semver = __importStar(require("semver"));
 const DataSourcePicker_1 = require("../components/DataSourcePicker");
 const GrafanaPage_1 = require("./GrafanaPage");
 class VariableEditPage extends GrafanaPage_1.GrafanaPage {
@@ -23,17 +46,24 @@ class VariableEditPage extends GrafanaPage_1.GrafanaPage {
             ? Dashboard.Settings.Variables.Edit.url(this.args.dashboard.uid, this.args.id)
             : AddDashboard.Settings.Variables.Edit.url(this.args.id);
         await super.navigate(url, options);
+        // In versions before 9.2.0, the variable index is not part of the URL so there's no way to navigate to it directly.
+        // Instead, we have to click the nth row in the variable list to navigate to the edit page for a given variable index.
+        if (semver.lt(this.ctx.grafanaVersion, '9.2.0') && this.args.id) {
+            const list = this.getByGrafanaSelector(this.ctx.selectors.pages.Dashboard.Settings.Variables.List.table).locator('tbody tr');
+            const variables = await list.all();
+            await variables[Number(this.args.id)].click();
+        }
     }
     /**
      * Sets the type of variable in the 'Variable type' dropdown to the given type
      */
     async setVariableType(type) {
-        await this.getByTestIdOrAriaLabel(this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2)
+        await this.getByGrafanaSelector(this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2)
             .locator('input')
             .fill(type);
         await this.ctx.page.keyboard.press('ArrowDown');
         await this.ctx.page.keyboard.press('Enter');
-        await this.getByTestIdOrAriaLabel(this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2).scrollIntoViewIfNeeded();
+        await this.getByGrafanaSelector(this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2).scrollIntoViewIfNeeded();
     }
     /**
      * Triggers the variable query to run. Note that unlike {@link PanelEditPage.refreshPanel}, this method doesn't
@@ -44,12 +74,16 @@ class VariableEditPage extends GrafanaPage_1.GrafanaPage {
      */
     async runQuery() {
         // in 9.2.0, the submit button got a new purpose. it no longer submits the form, but instead runs the query
-        if (gte(this.ctx.grafanaVersion, '9.2.0')) {
-            await this.getByTestIdOrAriaLabel(this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.submitButton).click();
+        if (semver.gte(this.ctx.grafanaVersion, '9.2.0')) {
+            await this.getByGrafanaSelector(this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.submitButton).click();
         }
         else {
-            // in 9.1.3, the submit button submits the form
-            await this.ctx.page.keyboard.press('Tab');
+            // in version before 9.2.0, there's no submit button, so instead we click the "Include all" button to trigger the query
+            const queryDataRequest = this.waitForQueryDataRequest();
+            const includeAllSwitch = this.getByGrafanaSelector(this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch).locator('..');
+            await includeAllSwitch.click();
+            await queryDataRequest;
+            await includeAllSwitch.click();
         }
     }
 }

package/dist/models/pages/VariablePage.js

@@ -27,10 +27,10 @@ class VariablePage extends GrafanaPage_1.GrafanaPage {
     async clickAddNew() {
         const { addVariableCTAV2, addVariableCTAV2Item, newButton } = this.ctx.selectors.pages.Dashboard.Settings.Variables.List;
         if (!this.dashboard?.uid) {
-            await this.getByTestIdOrAriaLabel(addVariableCTAV2(addVariableCTAV2Item)).click();
+            await this.getByGrafanaSelector(addVariableCTAV2(addVariableCTAV2Item)).click();
         }
         else {
-            await this.getByTestIdOrAriaLabel(newButton).click();
+            await this.getByGrafanaSelector(newButton).click();
         }
         const editIndex = await this.ctx.page.evaluate(() => {
             const urlParams = new URLSearchParams(window.location.search);

package/dist/types.d.ts

@@ -418,7 +418,7 @@ export type NavigateOptions = {
 export type AppPageNavigateOptions = NavigateOptions & {
     path?: string;
 };
-export type GetByTestIdOrAriaLabelOptions = {
+export type getByGrafanaSelectorOptions = {
     /**
      *Optional root locator to search within. If no locator is provided, the page will be used
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-e2e",
-  "version": "0.25.1",
+  "version": "0.26.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -55,5 +55,5 @@
       "start": "cls || clear"
     }
   },
-  "gitHead": "47290fa2f4c959794e3146240552b01905fbe7dd"
+  "gitHead": "e6b578f7f1dbd3d405ac150e71b625ed3db5c82b"
 }