Plugin E2E: Allow overriding waitUntil in goto page fixtures

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

@@ -5,7 +5,7 @@ import { AlertRuleQuery } from '../components/AlertRuleQuery';
 
 export class AlertRuleEditPage extends GrafanaPage {
   constructor(readonly ctx: PluginTestCtx, readonly args?: AlertRuleArgs) {
-    super(ctx);
+    super(ctx, args);
   }
 
   /**

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

@@ -6,7 +6,7 @@ import { GrafanaPage } from './GrafanaPage';
 export class AnnotationEditPage extends GrafanaPage {
   datasource: DataSourcePicker;
   constructor(readonly ctx: PluginTestCtx, readonly args: DashboardEditViewArgs<string>) {
-    super(ctx);
+    super(ctx, args);
     this.datasource = new DataSourcePicker(ctx);
   }
 

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

@@ -5,7 +5,7 @@ import { GrafanaPage } from './GrafanaPage';
 
 export class AnnotationPage extends GrafanaPage {
   constructor(readonly ctx: PluginTestCtx, readonly dashboard?: DashboardPageArgs) {
-    super(ctx);
+    super(ctx, dashboard);
   }
 
   /**

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

@@ -4,7 +4,7 @@ import { GrafanaPage } from './GrafanaPage';
 
 export class AppPage extends GrafanaPage {
   constructor(readonly ctx: PluginTestCtx, readonly args: PluginPageArgs) {
-    super(ctx);
+    super(ctx, args);
   }
 
   /**

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

@@ -11,7 +11,7 @@ export class DashboardPage extends GrafanaPage {
   timeRange: TimeRange;
 
   constructor(readonly ctx: PluginTestCtx, readonly dashboard?: DashboardPageArgs) {
-    super(ctx);
+    super(ctx, dashboard);
     this.dataSourcePicker = new DataSourcePicker(ctx);
     this.timeRange = new TimeRange(ctx);
   }

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

@@ -1,6 +1,6 @@
 import * as semver from 'semver';
 import { Locator } from '@playwright/test';
-import { NavigateOptions, PluginTestCtx, RequestOptions } from '../../types';
+import { GrafanaPageArgs, NavigateOptions, PluginTestCtx, RequestOptions } from '../../types';
 import { DataSourcePicker } from '../components/DataSourcePicker';
 import { GrafanaPage } from './GrafanaPage';
 import { TimeRange } from '../components/TimeRange';
@@ -17,8 +17,8 @@ export class ExplorePage extends GrafanaPage {
   timeSeriesPanel: Panel;
   tablePanel: Panel;
 
-  constructor(ctx: PluginTestCtx) {
-    super(ctx);
+  constructor(ctx: PluginTestCtx, readonly args?: GrafanaPageArgs) {
+    super(ctx, args);
     this.datasource = new DataSourcePicker(ctx);
     this.timeRange = new TimeRange(ctx);
     this.timeSeriesPanel = new Panel(

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

@@ -1,20 +1,22 @@
 import { Locator, Request, Response } from '@playwright/test';
-import { getByGrafanaSelectorOptions, NavigateOptions, PluginTestCtx } from '../../types';
+import { getByGrafanaSelectorOptions, GrafanaPageArgs, NavigateOptions, PluginTestCtx } from '../../types';
 
 /**
  * Base class for all Grafana pages.
  *
  * Exposes methods for locating Grafana specific elements on the page
  */
 export abstract class GrafanaPage {
-  constructor(public readonly ctx: PluginTestCtx) {}
+  constructor(public readonly ctx: PluginTestCtx, public readonly pageArgs: GrafanaPageArgs = {}) {}
 
   protected async navigate(url: string, options?: NavigateOptions) {
-    if (options?.queryParams) {
-      url += `?${options.queryParams.toString()}`;
+    let queryParams = options?.queryParams ? options.queryParams : this.pageArgs.queryParams;
+    if (queryParams) {
+      url += `?${queryParams.toString()}`;
     }
     await this.ctx.page.goto(url, {
       waitUntil: 'networkidle',
+      ...this.pageArgs,
       ...options,
     });
   }

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

@@ -13,7 +13,7 @@ export class PanelEditPage extends GrafanaPage {
   panel: Panel;
 
   constructor(readonly ctx: PluginTestCtx, readonly args: DashboardEditViewArgs<string>) {
-    super(ctx);
+    super(ctx, args);
     this.datasource = new DataSourcePicker(ctx);
     this.timeRange = new TimeRange(ctx);
     this.panel = new Panel(ctx, this.getPanelLocator());

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

@@ -3,7 +3,7 @@ import { GrafanaPage } from './GrafanaPage';
 
 export class PluginConfigPage extends GrafanaPage {
   constructor(readonly ctx: PluginTestCtx, readonly args: PluginPageArgs) {
-    super(ctx);
+    super(ctx, args);
   }
 
   /**

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

@@ -9,7 +9,7 @@ export type VariableType = 'Query' | 'Constant' | 'Custom';
 export class VariableEditPage extends GrafanaPage {
   datasource: DataSourcePicker;
   constructor(readonly ctx: PluginTestCtx, readonly args: DashboardEditViewArgs<string>) {
-    super(ctx);
+    super(ctx, args);
     this.datasource = new DataSourcePicker(ctx);
   }
 

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

@@ -4,7 +4,7 @@ import { VariableEditPage } from './VariableEditPage';
 
 export class VariablePage extends GrafanaPage {
   constructor(readonly ctx: PluginTestCtx, public readonly dashboard?: DashboardPageArgs) {
-    super(ctx);
+    super(ctx, dashboard);
   }
 
   /**

packages/plugin-e2e/src/types.ts

@@ -438,7 +438,9 @@ export interface TimeRangeArgs {
   zone?: string;
 }
 
-export type DashboardPageArgs = {
+export type GrafanaPageArgs = NavigateOptions;
+
+export type DashboardPageArgs = GrafanaPageArgs & {
   /**
    * The uid of the dashboard to go to
    */
@@ -460,12 +462,12 @@ export type DashboardPageArgs = {
  * If dashboard is not specified, it's assumed that it's a new dashboard. Otherwise, the dashboard uid is used to
  * navigate to an already existing dashboard.
  */
-export type DashboardEditViewArgs<T> = {
+export type DashboardEditViewArgs<T> = GrafanaPageArgs & {
   dashboard?: DashboardPageArgs;
   id: T;
 };
 
-export type AlertRuleArgs = {
+export type AlertRuleArgs = GrafanaPageArgs & {
   uid: string;
 };
 
@@ -505,7 +507,7 @@ export type ReadProvisionedDataSourceArgs = {
   name?: string;
 };
 
-export type PluginPageArgs = {
+export type PluginPageArgs = GrafanaPageArgs & {
   pluginId: string;
 };
 

packages/plugin-e2e/tests/as-admin-user/page-loading/goto.spec.ts

@@ -0,0 +1,42 @@
+import * as semver from 'semver';
+import { test, expect } from '../../../src';
+
+test.describe('gotoDashboardPage', () => {
+  test('should not display elements when waitUntil `load` is used', async ({
+    gotoDashboardPage,
+    readProvisionedDashboard,
+  }) => {
+    const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
+    const dashboardPage = await gotoDashboardPage({ ...dashboard, waitUntil: 'load' });
+    await expect(dashboardPage.getPanelByTitle('Basic table example').locator).toHaveCount(0);
+  });
+
+  test('should not display elements when waitUntil `networkidle` (default) is used', async ({
+    gotoDashboardPage,
+    readProvisionedDashboard,
+  }) => {
+    const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
+    const dashboardPage = await gotoDashboardPage(dashboard);
+    await expect(dashboardPage.getPanelByTitle('Basic table example').locator).toBeVisible();
+  });
+});
+
+test.describe('gotoPanelEditPage', () => {
+  test('should not display elements when waitUntil `load` is used', async ({
+    gotoPanelEditPage,
+    readProvisionedDashboard,
+  }) => {
+    const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
+    const panelEditPage = await gotoPanelEditPage({ dashboard, id: '3', waitUntil: 'load' });
+    await expect(panelEditPage.panel.locator).toHaveCount(0);
+  });
+
+  test('should not display elements when waitUntil `networkidle` (default) is used', async ({
+    gotoPanelEditPage,
+    readProvisionedDashboard,
+  }) => {
+    const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
+    const panelEditPage = await gotoPanelEditPage({ dashboard, id: '3' });
+    await expect(panelEditPage.panel.locator).toBeVisible();
+  });
+});