@grafana/plugin-e2e 3.5.1 → 3.6.0-canary.2586.24780926778.0

package/dist/index.d.ts

@@ -193,6 +193,17 @@ declare class Panel extends GrafanaPage {
     clickOnMenuItem(item: string, options?: {
         parentItem?: string;
     }): Promise<void>;
+    /**
+     * Scrolls the panel into the viewport, triggering its query if not yet started.
+     *
+     * In Grafana 13.x+ with scenes, panels are lazy-rendered: the panel element does not
+     * exist in the DOM until its grid container enters the viewport. This method scrolls
+     * `.react-grid-item` containers progressively until the panel element appears, then
+     * scrolls the panel element precisely into view. In older Grafana versions the panel
+     * element is always in the DOM, so the loop exits early and delegates to the standard
+     * scroll path.
+     */
+    scrollIntoView(): Promise<void>;
     /**
      * Returns the locator for the panel error (if any)
      */
@@ -342,11 +353,31 @@ declare class DashboardPage extends GrafanaPage {
     readonly dashboard?: DashboardPageArgs | undefined;
     dataSourcePicker: any;
     timeRange: TimeRange;
+    private pendingQueryCount;
+    private hasSeenQuery;
     constructor(ctx: PluginTestCtx, dashboard?: DashboardPageArgs | undefined);
     /**
      * Navigates to the dashboard page. If a dashboard uid was not provided, it's assumed that it's a new dashboard.
      */
     goto(options?: NavigateOptions): Promise<void>;
+    /**
+     * Scrolls each panel container into view so that below-fold panels have their queries triggered.
+     * Targets .react-grid-item containers (always in the DOM, even before VizPanel renders) rather
+     * than panel title/content elements which only exist after lazy rendering. Playwright's native
+     * scrollIntoViewIfNeeded finds the correct scroll container automatically across Grafana versions.
+     */
+    private scrollToRevealAllPanels;
+    /**
+     * Waits until all initiated panel queries have received responses.
+     *
+     * By default only waits for queries already triggered (panels in the viewport at navigation
+     * time or explicitly scrolled into view). Pass `scrollAll: true` to first scroll the full
+     * dashboard so that below-fold panels are also triggered before waiting.
+     */
+    waitForPanelsQueriesToComplete({ timeout, scrollAll, }?: {
+        timeout?: number;
+        scrollAll?: boolean;
+    }): Promise<void>;
     /**
      * Navigates to the panel edit page for the given panel id
      *
@@ -1384,6 +1415,10 @@ declare const expect: _playwright_test.Expect<{
     toHaveChecked: typeof toHaveChecked;
     toHaveColor: typeof toHaveColor;
     toHaveNoA11yViolations: typeof toHaveNoA11yViolations;
+    toHavePanelErrors: (dashboard: DashboardPage, expectedCount?: number) => Promise<{
+        pass: boolean;
+        message: () => string;
+    }>;
 }>;
 
 declare global {
@@ -1456,6 +1491,12 @@ declare global {
              * You can use this in conjunction with the .toHaveNoA11yViolations matcher to assert that there are no accessibility violations on the page.
              */
             toHaveNoA11yViolations(results: AxeResults, options?: A11yViolationsOptions): Promise<R>;
+            /**
+             * Asserts that a dashboard has panel errors. Omit `count` to assert at least one error.
+             * Pass `count` to assert exactly that many panels with errors.
+             * Use `.not.toHavePanelErrors()` to assert no panel errors.
+             */
+            toHavePanelErrors(this: Matchers<unknown, DashboardPage>, count?: number): Promise<R>;
         }
     }
 }

package/dist/index.js

@@ -42,6 +42,7 @@ var toBeChecked = require('./matchers/toBeChecked.js');
 var toHaveNoA11yViolations = require('./matchers/toHaveNoA11yViolations.js');
 var toHaveChecked = require('./matchers/toHaveChecked.js');
 var toHaveColor = require('./matchers/toHaveColor.js');
+var toHavePanelErrors = require('./matchers/toHavePanelErrors.js');
 var DataSourcePicker = require('./models/components/DataSourcePicker.js');
 var Panel = require('./models/components/Panel.js');
 var TimeRange = require('./models/components/TimeRange.js');
@@ -104,7 +105,8 @@ const expect = test$1.expect.extend({
   toBeChecked: toBeChecked.toBeChecked,
   toHaveChecked: toHaveChecked.toHaveChecked,
   toHaveColor: toHaveColor.toHaveColor,
-  toHaveNoA11yViolations: toHaveNoA11yViolations.toHaveNoA11yViolations
+  toHaveNoA11yViolations: toHaveNoA11yViolations.toHaveNoA11yViolations,
+  toHavePanelErrors: toHavePanelErrors.toHavePanelErrors
 });
 
 Object.defineProperty(exports, "selectors", {

package/dist/matchers/toHavePanelErrors.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const toHavePanelErrors = async (dashboard, expectedCount) => {
+  const errorLocator = dashboard.getByGrafanaSelector(dashboard.ctx.selectors.components.Panels.Panel.status("error"));
+  const count = await errorLocator.count();
+  const pass = expectedCount === void 0 ? count >= 1 : count === expectedCount;
+  return {
+    pass,
+    message: () => expectedCount === void 0 ? `Expected at least 1 panel with errors but found ${count}` : `Expected exactly ${expectedCount} panel error(s) but found ${count}`
+  };
+};
+
+exports.toHavePanelErrors = toHavePanelErrors;

package/dist/models/components/Panel.js

@@ -75,6 +75,31 @@ class Panel extends GrafanaPage.GrafanaPage {
     options?.parentItem && await parentMenuItem.hover();
     await menuItem.click();
   }
+  /**
+   * Scrolls the panel into the viewport, triggering its query if not yet started.
+   *
+   * In Grafana 13.x+ with scenes, panels are lazy-rendered: the panel element does not
+   * exist in the DOM until its grid container enters the viewport. This method scrolls
+   * `.react-grid-item` containers progressively until the panel element appears, then
+   * scrolls the panel element precisely into view. In older Grafana versions the panel
+   * element is always in the DOM, so the loop exits early and delegates to the standard
+   * scroll path.
+   */
+  async scrollIntoView() {
+    if (await this.locator.isVisible({ timeout: 500 }).catch(() => false)) {
+      await this.locator.scrollIntoViewIfNeeded();
+      return;
+    }
+    const containers = this.ctx.page.locator(".react-grid-item");
+    const count = await containers.count();
+    for (let i = 0; i < count; i++) {
+      await containers.nth(i).scrollIntoViewIfNeeded();
+      if (await this.locator.isVisible({ timeout: 500 }).catch(() => false)) {
+        break;
+      }
+    }
+    await this.locator.scrollIntoViewIfNeeded();
+  }
   /**
    * Returns the locator for the panel error (if any)
    */

package/dist/models/pages/DashboardPage.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var semver = require('semver');
+var test = require('@playwright/test');
 var DataSourcePicker = require('../components/DataSourcePicker.js');
 var GrafanaPage = require('./GrafanaPage.js');
 var PanelEditPage = require('./PanelEditPage.js');
@@ -38,6 +39,8 @@ class DashboardPage extends GrafanaPage.GrafanaPage {
     this.dashboard = dashboard;
     __publicField(this, "dataSourcePicker");
     __publicField(this, "timeRange");
+    __publicField(this, "pendingQueryCount", 0);
+    __publicField(this, "hasSeenQuery", false);
     this.dataSourcePicker = new DataSourcePicker.DataSourcePicker(ctx);
     this.timeRange = new TimeRange.TimeRange(ctx);
   }
@@ -45,6 +48,17 @@ class DashboardPage extends GrafanaPage.GrafanaPage {
    * Navigates to the dashboard page. If a dashboard uid was not provided, it's assumed that it's a new dashboard.
    */
   async goto(options = {}) {
+    this.ctx.page.on("request", (req) => {
+      if (req.url().includes(this.ctx.selectors.apis.DataSource.query)) {
+        this.pendingQueryCount++;
+        this.hasSeenQuery = true;
+      }
+    });
+    this.ctx.page.on("response", (res) => {
+      if (res.url().includes(this.ctx.selectors.apis.DataSource.query)) {
+        this.pendingQueryCount = Math.max(0, this.pendingQueryCount - 1);
+      }
+    });
     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();
@@ -53,6 +67,39 @@ class DashboardPage extends GrafanaPage.GrafanaPage {
     }
     return super.navigate(url, options);
   }
+  /**
+   * Scrolls each panel container into view so that below-fold panels have their queries triggered.
+   * Targets .react-grid-item containers (always in the DOM, even before VizPanel renders) rather
+   * than panel title/content elements which only exist after lazy rendering. Playwright's native
+   * scrollIntoViewIfNeeded finds the correct scroll container automatically across Grafana versions.
+   */
+  async scrollToRevealAllPanels() {
+    const containers = this.ctx.page.locator(".react-grid-item");
+    const count = await containers.count();
+    for (let i = 0; i < count; i++) {
+      await containers.nth(i).scrollIntoViewIfNeeded();
+      await this.ctx.page.waitForTimeout(500);
+    }
+  }
+  /**
+   * Waits until all initiated panel queries have received responses.
+   *
+   * By default only waits for queries already triggered (panels in the viewport at navigation
+   * time or explicitly scrolled into view). Pass `scrollAll: true` to first scroll the full
+   * dashboard so that below-fold panels are also triggered before waiting.
+   */
+  async waitForPanelsQueriesToComplete({
+    timeout = 3e4,
+    scrollAll = false
+  } = {}) {
+    await test.expect.poll(() => this.hasSeenQuery, { timeout: 2e3 }).toBe(true).catch(() => {
+    });
+    await test.expect.poll(() => this.pendingQueryCount === 0, { timeout }).toBe(true);
+    if (scrollAll) {
+      await this.scrollToRevealAllPanels();
+      await test.expect.poll(() => this.pendingQueryCount === 0, { timeout }).toBe(true);
+    }
+  }
   /**
    * Navigates to the panel edit page for the given panel id
    *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-e2e",
-  "version": "3.5.1",
+  "version": "3.6.0-canary.2586.24780926778.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -54,5 +54,5 @@
     "uuid": "^13.0.0",
     "yaml": "^2.3.4"
   },
-  "gitHead": "bbe7431074aa667f5da9880f76fba803ba1b3f73"
+  "gitHead": "e6e583d77ad8805571c805d035d49d06c6b2f823"
 }