@grafana/plugin-e2e 0.0.3 → 0.0.4-canary.616.8eb70b7.0

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

@@ -257,6 +257,7 @@ export type Components = {
     OptionsGroup: {
         group: (title?: string) => string;
         toggle: (title?: string) => string;
+        groupTitle: string;
     };
     PluginVisualization: {
         current: string;
@@ -425,7 +426,12 @@ export type Pages = {
                 };
             };
             Variables: {
-                url: string;
+                List: {
+                    url: string;
+                };
+                Edit: {
+                    url: (variableIndex: string) => string;
+                };
             };
         };
     };
@@ -462,7 +468,11 @@ export type Pages = {
                 title: string;
             };
             Annotations: {
+                Edit: {
+                    url: (dashboardUid: string, annotationIndex: string) => string;
+                };
                 List: {
+                    url: (uid: string) => string;
                     addAnnotationCTA: string;
                     addAnnotationCTAV2: string;
                 };
@@ -477,6 +487,7 @@ export type Pages = {
             };
             Variables: {
                 List: {
+                    url: (dashboardUid: string) => string;
                     newButton: string;
                     table: string;
                     tableRowNameFields: (variableName: string) => string;
@@ -489,6 +500,7 @@ export type Pages = {
                     addVariableCTAV2Item: string;
                 };
                 Edit: {
+                    url: (dashboardUid: string, editIndex: string) => string;
                     General: {
                         headerLink: string;
                         modeLabelNew: string;

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

@@ -276,6 +276,9 @@ export declare const versionedComponents: {
     OptionsGroup: {
         group: (title?: string) => string;
         toggle: (title?: string) => string;
+        groupTitle: {
+            "8.0.0": string;
+        };
     };
     PluginVisualization: {
         item: (title: string) => string;

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

@@ -280,6 +280,9 @@ exports.versionedComponents = {
     OptionsGroup: {
         group: (title) => (title ? `Options group ${title}` : 'Options group'),
         toggle: (title) => (title ? `Options group ${title} toggle` : 'Options group toggle'),
+        groupTitle: {
+            [constants_1.MIN_GRAFANA_VERSION]: 'Panel options',
+        },
     },
     PluginVisualization: {
         item: (title) => `Plugin visualization item ${title}`,

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

@@ -63,7 +63,12 @@ export declare const versionedPages: {
                 };
             };
             Variables: {
-                url: string;
+                List: {
+                    url: string;
+                };
+                Edit: {
+                    url: (annotationIndex: string) => string;
+                };
             };
         };
     };
@@ -100,7 +105,11 @@ export declare const versionedPages: {
                 title: string;
             };
             Annotations: {
+                Edit: {
+                    url: (dashboardUid: string, annotationIndex: string) => string;
+                };
                 List: {
+                    url: (dashboardUid: string) => string;
                     addAnnotationCTA: string;
                     addAnnotationCTAV2: string;
                 };
@@ -115,6 +124,7 @@ export declare const versionedPages: {
             };
             Variables: {
                 List: {
+                    url: (dashboardUid: string) => string;
                     newButton: string;
                     table: string;
                     tableRowNameFields: (variableName: string) => string;
@@ -129,6 +139,9 @@ export declare const versionedPages: {
                     };
                 };
                 Edit: {
+                    url: {
+                        "8.0.0": (dashboardUid: string, editIndex: string) => string;
+                    };
                     General: {
                         headerLink: string;
                         modeLabelNew: string;

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

@@ -67,7 +67,12 @@ exports.versionedPages = {
                 },
             },
             Variables: {
-                url: '/dashboard/new?orgId=1&editview=templating',
+                List: {
+                    url: '/dashboard/new?orgId=1&editview=templating',
+                },
+                Edit: {
+                    url: (annotationIndex) => `/dashboard/new?orgId=1&editview=templating&editIndex=${annotationIndex}`,
+                },
             },
         },
     },
@@ -104,7 +109,11 @@ exports.versionedPages = {
                 title: 'Tab General',
             },
             Annotations: {
+                Edit: {
+                    url: (dashboardUid, annotationIndex) => `${exports.versionedPages.Dashboard.url(dashboardUid)}?editview=annotations&editIndex=${annotationIndex}`,
+                },
                 List: {
+                    url: (dashboardUid) => `${exports.versionedPages.Dashboard.url(dashboardUid)}?editview=annotations`,
                     addAnnotationCTA: 'Call to action button Add annotation query',
                     addAnnotationCTAV2: 'data-testid Call to action button Add annotation query',
                 },
@@ -119,6 +128,7 @@ exports.versionedPages = {
             },
             Variables: {
                 List: {
+                    url: (dashboardUid) => `${exports.versionedPages.Dashboard.url(dashboardUid)}?editview=templating`,
                     newButton: 'Variable editor New variable button',
                     table: 'Variable editor Table',
                     tableRowNameFields: (variableName) => `Variable editor Table Name field ${variableName}`,
@@ -133,6 +143,9 @@ exports.versionedPages = {
                     },
                 },
                 Edit: {
+                    url: {
+                        [constants_1.MIN_GRAFANA_VERSION]: (dashboardUid, editIndex) => `${exports.versionedPages.Dashboard.url(dashboardUid)}?editview=templating&editIndex=${editIndex}`,
+                    },
                     General: {
                         headerLink: 'Variable editor Header link',
                         modeLabelNew: 'Variable editor Header mode New',

package/dist/fixtures/index.d.ts

@@ -2,11 +2,11 @@ declare const _default: {
     selectors: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("..").E2ESelectors) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
     grafanaVersion: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: string) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
     login: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: () => Promise<void>) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
-    createDataSourceConfigPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: (args: import("../types").CreateDataSourcePageArgs) => Promise<import("../models").DataSourceConfigPage>) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
-    newDashboardPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("../models").DashboardPage) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
-    panelEditPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("../models").PanelEditPage) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
-    variableEditPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("../models").VariableEditPage) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
-    annotationEditPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("../models").AnnotationEditPage) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
+    createDataSourceConfigPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: (args: import("../types").CreateDataSourcePageArgs) => Promise<import("..").DataSourceConfigPage>) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
+    newDashboardPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("..").DashboardPage) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
+    panelEditPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("..").PanelEditPage) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
+    variableEditPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("..").VariableEditPage) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
+    annotationEditPage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("..").AnnotationEditPage) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
     explorePage: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: import("../models/ExplorePage").ExplorePage) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
     createDataSource: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: (args: import("../types").CreateDataSourceArgs) => Promise<import("../types").DataSource<any>>) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;
     readProvision: (args: import("..").PluginFixture & import("..").PluginOptions & import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions, use: (r: <T = any>(args: import("../types").ReadProvisionArgs) => Promise<T>) => Promise<void>, testInfo: import("playwright/test").TestInfo) => any;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { expect, test, type PluginFixture, type PluginOptions } from './api';
 export * from './e2e-selectors';
 export * from './fixtures';
+export * from './models';

package/dist/index.js

@@ -20,3 +20,4 @@ Object.defineProperty(exports, "expect", { enumerable: true, get: function () {
 Object.defineProperty(exports, "test", { enumerable: true, get: function () { return api_1.test; } });
 __exportStar(require("./e2e-selectors"), exports);
 __exportStar(require("./fixtures"), exports);
+__exportStar(require("./models"), exports);

package/dist/matchers/index.d.ts

@@ -11,12 +11,12 @@ declare const _default: {
         pass: boolean;
         actual: number;
     }>;
-    toDisplayPreviews: (variableEditPage: import("../models").VariableEditPage, previewTexts: (string | RegExp)[]) => Promise<{
+    toDisplayPreviews: (variableEditPage: import("..").VariableEditPage, previewTexts: (string | RegExp)[]) => Promise<{
         pass: boolean;
         actual: boolean;
         message: () => string;
     }>;
-    toHaveAlert: (grafanaPage: import("../models").GrafanaPage, severity: import("./toHaveAlert").AlertVariant, options?: import("../types").AlertPageOptions) => Promise<{
+    toHaveAlert: (grafanaPage: import("..").GrafanaPage, severity: import("./toHaveAlert").AlertVariant, options?: import("../types").AlertPageOptions) => Promise<{
         message: () => any;
         pass: boolean;
     }>;

package/dist/models/AnnotationEditPage.d.ts

@@ -1,8 +1,11 @@
 import { DataSourcePicker } from './DataSourcePicker';
-import { PluginTestCtx, RequestOptions } from '../types';
+import { DashboardEditViewArgs, NavigateOptions, PluginTestCtx, RequestOptions } from '../types';
 import { GrafanaPage } from './GrafanaPage';
 export declare class AnnotationEditPage extends GrafanaPage {
+    readonly ctx: PluginTestCtx;
+    readonly args: DashboardEditViewArgs<string>;
     datasource: DataSourcePicker;
-    constructor(ctx: PluginTestCtx);
+    constructor(ctx: PluginTestCtx, args: DashboardEditViewArgs<string>);
+    goto(options?: NavigateOptions): Promise<void>;
     runQuery(options?: RequestOptions): Promise<import("playwright-core").Response>;
 }

package/dist/models/AnnotationEditPage.js

@@ -4,11 +4,22 @@ exports.AnnotationEditPage = void 0;
 const DataSourcePicker_1 = require("./DataSourcePicker");
 const GrafanaPage_1 = require("./GrafanaPage");
 class AnnotationEditPage extends GrafanaPage_1.GrafanaPage {
+    ctx;
+    args;
     datasource;
-    constructor(ctx) {
+    constructor(ctx, args) {
         super(ctx);
+        this.ctx = ctx;
+        this.args = args;
         this.datasource = new DataSourcePicker_1.DataSourcePicker(ctx);
     }
+    async goto(options) {
+        const { Dashboard, AddDashboard } = this.ctx.selectors.pages;
+        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);
+    }
     async runQuery(options) {
         const responsePromise = this.ctx.page.waitForResponse((resp) => resp.url().includes(this.ctx.selectors.apis.DataSource.query), options);
         await this.ctx.page.getByRole('button', { name: 'TEST' }).click();

package/dist/models/AnnotationPage.d.ts

@@ -1,8 +1,10 @@
-import { PluginTestCtx } from '../types';
+import { DashboardPageArgs, NavigateOptions, PluginTestCtx } from '../types';
 import { AnnotationEditPage } from './AnnotationEditPage';
 import { GrafanaPage } from './GrafanaPage';
 export declare class AnnotationPage extends GrafanaPage {
-    constructor(ctx: PluginTestCtx);
-    goto(): Promise<void>;
+    readonly ctx: PluginTestCtx;
+    readonly dashboard?: DashboardPageArgs;
+    constructor(ctx: PluginTestCtx, dashboard?: DashboardPageArgs);
+    goto(options?: NavigateOptions): Promise<void>;
     clickAddNew(): Promise<AnnotationEditPage>;
 }

package/dist/models/AnnotationPage.js

@@ -28,23 +28,38 @@ const semver = __importStar(require("semver"));
 const AnnotationEditPage_1 = require("./AnnotationEditPage");
 const GrafanaPage_1 = require("./GrafanaPage");
 class AnnotationPage extends GrafanaPage_1.GrafanaPage {
-    constructor(ctx) {
+    ctx;
+    dashboard;
+    constructor(ctx, dashboard) {
         super(ctx);
+        this.ctx = ctx;
+        this.dashboard = dashboard;
     }
-    async goto() {
-        await this.ctx.page.goto(this.ctx.selectors.pages.AddDashboard.Settings.Annotations.List.url, {
-            waitUntil: 'networkidle',
-        });
+    async goto(options) {
+        const { Dashboard, AddDashboard } = this.ctx.selectors.pages;
+        let url = this.dashboard?.uid
+            ? Dashboard.Settings.Annotations.List.url(this.dashboard.uid)
+            : AddDashboard.Settings.Annotations.List.url;
+        return super.navigate(url, options);
     }
     async clickAddNew() {
         const { Dashboard } = this.ctx.selectors.pages;
-        if (semver.gte(this.ctx.grafanaVersion, '8.3.0')) {
-            await this.getByTestIdOrAriaLabel(Dashboard.Settings.Annotations.List.addAnnotationCTAV2).click();
+        if (!this.dashboard?.uid) {
+            if (semver.gte(this.ctx.grafanaVersion, '8.3.0')) {
+                await this.getByTestIdOrAriaLabel(Dashboard.Settings.Annotations.List.addAnnotationCTAV2).click();
+            }
+            else {
+                await this.getByTestIdOrAriaLabel(Dashboard.Settings.Annotations.List.addAnnotationCTA).click();
+            }
         }
         else {
-            await this.getByTestIdOrAriaLabel(Dashboard.Settings.Annotations.List.addAnnotationCTA).click();
+            await this.ctx.page.getByRole('button', { name: 'New query' }).click();
         }
-        return new AnnotationEditPage_1.AnnotationEditPage(this.ctx);
+        const editIndex = await this.ctx.page.evaluate(() => {
+            const urlParams = new URLSearchParams(window.location.search);
+            return urlParams.get('editIndex');
+        });
+        return new AnnotationEditPage_1.AnnotationEditPage(this.ctx, { id: editIndex || '1' });
     }
 }
 exports.AnnotationPage = AnnotationPage;

package/dist/models/DashboardPage.d.ts

@@ -1,13 +1,14 @@
-import { GotoDashboardArgs, PluginTestCtx } from '../types';
+import { DashboardPageArgs, NavigateOptions, PluginTestCtx } from '../types';
 import { GrafanaPage } from './GrafanaPage';
 import { PanelEditPage } from './PanelEditPage';
 import { TimeRange } from './TimeRange';
 export declare class DashboardPage extends GrafanaPage {
-    protected readonly dashboardUid?: string;
+    readonly ctx: PluginTestCtx;
+    readonly dashboard?: DashboardPageArgs;
     dataSourcePicker: any;
     timeRange: TimeRange;
-    constructor(ctx: PluginTestCtx, dashboardUid?: string);
-    goto(opts?: GotoDashboardArgs): Promise<void>;
+    constructor(ctx: PluginTestCtx, dashboard?: DashboardPageArgs);
+    goto(options?: NavigateOptions): Promise<void>;
     gotoPanelEditPage(panelId: string): Promise<PanelEditPage>;
     addPanel(): Promise<PanelEditPage>;
     deleteDashboard(): Promise<void>;

package/dist/models/DashboardPage.js

@@ -7,34 +7,32 @@ const GrafanaPage_1 = require("./GrafanaPage");
 const PanelEditPage_1 = require("./PanelEditPage");
 const TimeRange_1 = require("./TimeRange");
 class DashboardPage extends GrafanaPage_1.GrafanaPage {
-    dashboardUid;
+    ctx;
+    dashboard;
     dataSourcePicker;
     timeRange;
-    constructor(ctx, dashboardUid) {
+    constructor(ctx, dashboard) {
         super(ctx);
-        this.dashboardUid = dashboardUid;
+        this.ctx = ctx;
+        this.dashboard = dashboard;
         this.dataSourcePicker = new DataSourcePicker_1.DataSourcePicker(ctx);
         this.timeRange = new TimeRange_1.TimeRange(ctx);
     }
-    async goto(opts) {
-        const uid = opts?.uid || this.dashboardUid;
-        let url = uid ? this.ctx.selectors.pages.Dashboard.url(uid) : this.ctx.selectors.pages.AddDashboard.url;
-        if (opts?.queryParams) {
-            url += `?${opts.queryParams.toString()}`;
-        }
-        await this.ctx.page.goto(url, {
-            waitUntil: 'networkidle',
-        });
-        if (opts?.timeRange) {
-            await this.timeRange.set(opts.timeRange);
+    async goto(options) {
+        let url = this.dashboard?.uid
+            ? this.ctx.selectors.pages.Dashboard.url(this.dashboard.uid)
+            : this.ctx.selectors.pages.AddDashboard.url;
+        if (this.dashboard?.timeRange) {
+            options.queryParams = options.queryParams ?? new URLSearchParams();
+            options.queryParams.append('from', this.dashboard.timeRange.from);
+            options.queryParams.append('to', this.dashboard.timeRange.to);
         }
+        return super.navigate(url, options);
     }
     async gotoPanelEditPage(panelId) {
-        const url = this.ctx.selectors.pages.Dashboard.url(this.dashboardUid ?? '');
-        await this.ctx.page.goto(`${url}?editPanel=${panelId}`, {
-            waitUntil: 'networkidle',
-        });
-        return new PanelEditPage_1.PanelEditPage(this.ctx);
+        const panelEditPage = new PanelEditPage_1.PanelEditPage(this.ctx, { dashboard: this.dashboard, id: panelId });
+        await panelEditPage.goto();
+        return panelEditPage;
     }
     async addPanel() {
         const { components, pages } = this.ctx.selectors;
@@ -45,10 +43,14 @@ class DashboardPage extends GrafanaPage_1.GrafanaPage {
         else {
             await this.getByTestIdOrAriaLabel(pages.AddDashboard.addNewPanel).click();
         }
-        return new PanelEditPage_1.PanelEditPage(this.ctx);
+        const panelId = await this.ctx.page.evaluate(() => {
+            const urlParams = new URLSearchParams(window.location.search);
+            return urlParams.get('editPanel');
+        });
+        return new PanelEditPage_1.PanelEditPage(this.ctx, { dashboard: this.dashboard, id: panelId });
     }
     async deleteDashboard() {
-        await this.ctx.request.delete(this.ctx.selectors.apis.Dashboard.delete(this.dashboardUid));
+        await this.ctx.request.delete(this.ctx.selectors.apis.Dashboard.delete(this.dashboard.uid));
     }
     async refreshDashboard() {
         await this.ctx.page.getByTestId(this.ctx.selectors.components.RefreshPicker.runButtonV2).click();

package/dist/models/DataSourceConfigPage.d.ts

@@ -1,10 +1,10 @@
-import { DataSource, PluginTestCtx, TriggerQueryOptions } from '../types';
+import { DataSource, NavigateOptions, PluginTestCtx, TriggerQueryOptions } from '../types';
 import { GrafanaPage } from './GrafanaPage';
 export declare class DataSourceConfigPage extends GrafanaPage {
     private datasource;
     constructor(ctx: PluginTestCtx, datasource: DataSource);
     deleteDataSource(): Promise<void>;
-    goto(): Promise<void>;
+    goto(options?: NavigateOptions): Promise<void>;
     mockHealthCheckResponse<T = any>(json: T, status?: number): Promise<void>;
     saveAndTest(options?: TriggerQueryOptions): Promise<void | import("playwright-core").Response>;
 }

package/dist/models/DataSourceConfigPage.js

@@ -11,10 +11,8 @@ class DataSourceConfigPage extends GrafanaPage_1.GrafanaPage {
     async deleteDataSource() {
         await this.ctx.request.delete(this.ctx.selectors.apis.DataSource.datasourceByUID(this.datasource.uid));
     }
-    async goto() {
-        await this.ctx.page.goto(this.ctx.selectors.pages.EditDataSource.url(this.datasource.uid), {
-            waitUntil: 'load',
-        });
+    async goto(options) {
+        return super.navigate(this.ctx.selectors.pages.EditDataSource.url(this.datasource.uid), options);
     }
     async mockHealthCheckResponse(json, status = 200) {
         await this.ctx.page.route(`${this.ctx.selectors.apis.DataSource.health(this.datasource.uid ?? '', this.datasource.id.toString() ?? '')}`, async (route) => {

package/dist/models/GrafanaPage.js

@@ -44,7 +44,7 @@ class GrafanaPage {
     }
     async waitForQueryDataResponse(cb) {
         return this.ctx.page.waitForResponse((response) => {
-            if (response.url().includes(this.ctx.selectors.apis.DataSource.query) && response.request().method() === 'POST') {
+            if (response.url().includes(this.ctx.selectors.apis.DataSource.query)) {
                 return cb ? cb(response) : true;
             }
             return false;

package/dist/models/PanelEditPage.d.ts

@@ -1,13 +1,18 @@
 import { Locator } from '@playwright/test';
-import { PanelError, PluginTestCtx, RequestOptions, Visualization } from '../types';
+import { DashboardEditViewArgs, NavigateOptions, PanelError, PluginTestCtx, RequestOptions, Visualization } from '../types';
 import { DataSourcePicker } from './DataSourcePicker';
 import { GrafanaPage } from './GrafanaPage';
 import { TimeRange } from './TimeRange';
 export declare class PanelEditPage extends GrafanaPage implements PanelError {
+    readonly ctx: PluginTestCtx;
+    readonly args: DashboardEditViewArgs<string>;
     datasource: DataSourcePicker;
     timeRange: TimeRange;
-    constructor(ctx: PluginTestCtx);
+    constructor(ctx: PluginTestCtx, args: DashboardEditViewArgs<string>);
+    goto(options?: NavigateOptions): Promise<void>;
+    setPanelTitle(title: string): Promise<void>;
     setVisualization(visualization: Visualization): Promise<void>;
+    getVisualizationName(): Locator;
     apply(): Promise<void>;
     getQueryEditorRow(refId: string): Promise<Locator>;
     getPanelError(): Locator;

package/dist/models/PanelEditPage.js

@@ -31,18 +31,45 @@ const GrafanaPage_1 = require("./GrafanaPage");
 const TimeRange_1 = require("./TimeRange");
 const ERROR_STATUS = 'error';
 class PanelEditPage extends GrafanaPage_1.GrafanaPage {
+    ctx;
+    args;
     datasource;
     timeRange;
-    constructor(ctx) {
+    constructor(ctx, args) {
         super(ctx);
+        this.ctx = ctx;
+        this.args = args;
         this.datasource = new DataSourcePicker_1.DataSourcePicker(ctx);
         this.timeRange = new TimeRange_1.TimeRange(ctx);
     }
+    async goto(options) {
+        const url = this.args.dashboard?.uid
+            ? this.ctx.selectors.pages.Dashboard.url(this.args.dashboard.uid)
+            : this.ctx.selectors.pages.AddDashboard.url;
+        options ??= {};
+        options.queryParams ??= new URLSearchParams();
+        options.queryParams.append('editPanel', this.args.id);
+        await super.navigate(url, options);
+    }
+    async setPanelTitle(title) {
+        const { OptionsGroup } = this.ctx.selectors.components;
+        const vizInput = await this.getByTestIdOrAriaLabel(OptionsGroup.group(OptionsGroup.groupTitle))
+            .locator('input')
+            .first();
+        const isVisible = await vizInput.isVisible();
+        if (!isVisible) {
+            await this.getByTestIdOrAriaLabel(OptionsGroup.group(OptionsGroup.groupTitle)).locator('button').click();
+        }
+        await vizInput.fill(title);
+    }
     async setVisualization(visualization) {
         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);
     }
+    getVisualizationName() {
+        return this.getByTestIdOrAriaLabel(this.ctx.selectors.components.PanelEditor.toggleVizPicker);
+    }
     async apply() {
         await this.ctx.page.getByTestId(this.ctx.selectors.components.PanelEditor.applyButton).click();
     }

package/dist/models/VariableEditPage.d.ts

@@ -1,10 +1,13 @@
-import { PluginTestCtx } from '../types';
+import { DashboardEditViewArgs, NavigateOptions, PluginTestCtx } from '../types';
 import { DataSourcePicker } from './DataSourcePicker';
 import { GrafanaPage } from './GrafanaPage';
 export type VariableType = 'Query' | 'Constant' | 'Custom';
 export declare class VariableEditPage extends GrafanaPage {
+    readonly ctx: PluginTestCtx;
+    readonly args: DashboardEditViewArgs<string>;
     datasource: DataSourcePicker;
-    constructor(ctx: PluginTestCtx);
+    constructor(ctx: PluginTestCtx, args: DashboardEditViewArgs<string>);
+    goto(options?: NavigateOptions): Promise<void>;
     setVariableType(type: VariableType): Promise<void>;
     runQuery(): Promise<void>;
 }

package/dist/models/VariableEditPage.js

@@ -5,11 +5,22 @@ const gte = require('semver/functions/gte');
 const DataSourcePicker_1 = require("./DataSourcePicker");
 const GrafanaPage_1 = require("./GrafanaPage");
 class VariableEditPage extends GrafanaPage_1.GrafanaPage {
+    ctx;
+    args;
     datasource;
-    constructor(ctx) {
+    constructor(ctx, args) {
         super(ctx);
+        this.ctx = ctx;
+        this.args = args;
         this.datasource = new DataSourcePicker_1.DataSourcePicker(ctx);
     }
+    async goto(options) {
+        const { Dashboard, AddDashboard } = this.ctx.selectors.pages;
+        const url = this.args.dashboard?.uid
+            ? 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);
+    }
     async setVariableType(type) {
         await this.getByTestIdOrAriaLabel(this.ctx.selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2)
             .locator('input')

package/dist/models/VariablePage.d.ts

@@ -1,8 +1,10 @@
-import { PluginTestCtx } from '../types';
+import { DashboardPageArgs, NavigateOptions, PluginTestCtx } from '../types';
 import { GrafanaPage } from './GrafanaPage';
 import { VariableEditPage } from './VariableEditPage';
 export declare class VariablePage extends GrafanaPage {
-    constructor(ctx: PluginTestCtx);
-    goto(): Promise<void>;
+    readonly ctx: PluginTestCtx;
+    readonly dashboard?: DashboardPageArgs;
+    constructor(ctx: PluginTestCtx, dashboard?: DashboardPageArgs);
+    goto(options?: NavigateOptions): Promise<void>;
     clickAddNew(): Promise<VariableEditPage>;
 }

package/dist/models/VariablePage.js

@@ -4,25 +4,33 @@ exports.VariablePage = void 0;
 const GrafanaPage_1 = require("./GrafanaPage");
 const VariableEditPage_1 = require("./VariableEditPage");
 class VariablePage extends GrafanaPage_1.GrafanaPage {
-    constructor(ctx) {
+    ctx;
+    dashboard;
+    constructor(ctx, dashboard) {
         super(ctx);
+        this.ctx = ctx;
+        this.dashboard = dashboard;
     }
-    async goto() {
-        await this.ctx.page.goto(this.ctx.selectors.pages.AddDashboard.Settings.Variables.url, {
-            waitUntil: 'networkidle',
-        });
+    async goto(options) {
+        const { Dashboard, AddDashboard } = this.ctx.selectors.pages;
+        let url = this.dashboard?.uid
+            ? Dashboard.Settings.Variables.List.url(this.dashboard.uid)
+            : AddDashboard.Settings.Variables.List.url;
+        return super.navigate(url, options);
     }
     async clickAddNew() {
         const { addVariableCTAV2, addVariableCTAV2Item, newButton } = this.ctx.selectors.pages.Dashboard.Settings.Variables.List;
-        try {
-            const ctaSelector = this.getByTestIdOrAriaLabel(addVariableCTAV2(addVariableCTAV2Item));
-            await ctaSelector.waitFor();
-            await ctaSelector.click();
+        if (!this.dashboard?.uid) {
+            await this.getByTestIdOrAriaLabel(addVariableCTAV2(addVariableCTAV2Item)).click();
         }
-        catch (error) {
+        else {
             await this.getByTestIdOrAriaLabel(newButton).click();
         }
-        return new VariableEditPage_1.VariableEditPage(this.ctx);
+        const editIndex = await this.ctx.page.evaluate(() => {
+            const urlParams = new URLSearchParams(window.location.search);
+            return urlParams.get('editIndex');
+        });
+        return new VariableEditPage_1.VariableEditPage(this.ctx, { dashboard: this.dashboard, id: editIndex || '1' });
     }
 }
 exports.VariablePage = VariablePage;

package/dist/types.d.ts

@@ -18,6 +18,10 @@ export interface DataSource<T = any> {
     jsonData?: T;
     secureJsonData?: T;
 }
+export interface Dashboard {
+    uid: string;
+    title?: string;
+}
 export type ProvisionFile<T = DataSource> = {
     datasources: Array<DataSource<T>>;
 };
@@ -37,11 +41,15 @@ export interface TimeRangeArgs {
     to: string;
     zone?: string;
 }
-export type GotoDashboardArgs = {
+export type DashboardPageArgs = {
     uid?: string;
     timeRange?: TimeRangeArgs;
     queryParams?: URLSearchParams;
 };
+export type DashboardEditViewArgs<T> = {
+    dashboard?: DashboardPageArgs;
+    id: T;
+};
 export type ReadProvisionArgs = {
     filePath: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-e2e",
-  "version": "0.0.3",
+  "version": "0.0.4-canary.616.8eb70b7.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -44,5 +44,5 @@
     "semver": "^7.5.4",
     "uuid": "^9.0.1"
   },
-  "gitHead": "9089459dfdad8c4bb04abc7adbe38320528a7229"
+  "gitHead": "8eb70b7baf34a20a3c35c9b5fd003ca96241e204"
 }