@grafana/plugin-e2e 3.7.1 → 3.7.2-canary.2560.fc1fa7a.0

package/dist/fixtures/components.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var Components = require('../models/Components.js');
+
+const components = async ({ request, page, selectors, grafanaVersion }, use, testInfo) => {
+  await use(new Components.Components({ page, selectors, grafanaVersion, request, testInfo }));
+};
+
+exports.components = components;

package/dist/index.d.ts

@@ -49,9 +49,21 @@ declare abstract class GrafanaPage {
     waitForQueryDataResponse(cb?: (request: Response$1) => boolean | Promise<boolean>): Promise<Response$1>;
 }
 
-declare class DataSourcePicker extends GrafanaPage {
-    private root?;
+/**
+ * Base class for components that live at the page level but can optionally
+ * be scoped to a sub-tree of the DOM via `within()`.
+ */
+declare abstract class ScopedComponent extends GrafanaPage {
+    protected readonly root?: Locator | undefined;
     constructor(ctx: PluginTestCtx, root?: Locator | undefined);
+    /**
+     * Returns a new instance of this component scoped to the given root locator.
+     * Mirrors Playwright's `locator.locator(...)` chaining pattern.
+     */
+    within(root: Locator): this;
+}
+
+declare class DataSourcePicker extends ScopedComponent {
     /**
      * Sets the data source picker to the provided name
      */
@@ -159,14 +171,34 @@ declare class AppPage extends GrafanaPage {
     goto(options?: AppPageNavigateOptions): Promise<void>;
 }
 
-declare class TimeRange extends GrafanaPage {
-    constructor(ctx: PluginTestCtx);
+declare class TimeRange extends ScopedComponent {
     /**
      * Opens the time picker and sets the time range to the provided values
      */
     set({ from, to, zone }: TimeRangeArgs): Promise<void>;
 }
 
+/**
+ * Factory for components that are not attached to a specific page.
+ *
+ * Use this when you need to interact with a Grafana UI component on a page
+ * that is not covered by one of the page fixtures (e.g. {@link PanelEditPage}
+ * or {@link ExplorePage}).
+ *
+ * To scope a component to a sub-tree of the DOM, use `within(root)`:
+ *
+ * @example
+ * ```typescript
+ * await components.dataSourcePicker.set('prom');
+ * await components.dataSourcePicker.within(panel).set('prom');
+ * ```
+ */
+declare class Components {
+    readonly dataSourcePicker: DataSourcePicker;
+    readonly timeRangePicker: TimeRange;
+    constructor(ctx: PluginTestCtx);
+}
+
 declare class Panel extends GrafanaPage {
     readonly ctx: PluginTestCtx;
     readonly locator: Locator;
@@ -359,6 +391,14 @@ declare class DashboardPage extends GrafanaPage {
      * 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>;
+    /**
+     * Returns a locator for the dashboard toolbar area that contains the time range controls.
+     *
+     * - Grafana ≥ 11.1.0: resolves to `Dashboard.Controls` (scenes-based dashboard controls bar)
+     * - Grafana 9.4.0–11.0.x: resolves to `NavToolbar.container`
+     * - Grafana < 9.4.0: falls back to `.page-toolbar`
+     */
+    get toolbar(): _playwright_test.Locator;
     /**
      * Scrolls the page viewport-by-viewport to trigger below-fold panel queries.
      *
@@ -974,6 +1014,21 @@ type PluginFixture = {
      * You can use this in conjunction with the .toHaveNoA11yViolations matcher to assert that there are no accessibility violations on the page.
      */
     scanForA11yViolations: (context?: AxeScanContext) => Promise<AxeResults>;
+    /**
+     * Factory for components that are not attached to a specific page.
+     *
+     * Use this fixture to interact with a Grafana UI component on a page that is
+     * not covered by other page fixtures (e.g. {@link PanelEditPage} or {@link ExplorePage}).
+     *
+     * @example
+     * ```typescript
+     * test('my test', async ({ components }) => {
+     *   await components.dataSourcePicker.set('gdev-prometheus');
+     *   await components.dataSourcePicker.within(someLocator).set('gdev-tempo');
+     * });
+     * ```
+     */
+    components: Components;
 };
 /**
  * @alpha - the API for accessibility scanning is still being finalized and may change in future releases. Feedback is welcome!
@@ -1506,5 +1561,5 @@ declare global {
     }
 }
 
-export { AnnotationEditPage, AnnotationPage, AppConfigPage, AppPage, DEFAULT_A11Y_TAGS, DashboardPage, DataSourceConfigPage, DataSourcePicker, ExplorePage, GrafanaPage, Panel, PanelEditPage, PluginConfigPage, TimeRange, VariableEditPage, VariablePage, expect, isFeatureEnabled, isLegacyFeatureEnabled, test };
+export { AnnotationEditPage, AnnotationPage, AppConfigPage, AppPage, Components, DEFAULT_A11Y_TAGS, DashboardPage, DataSourceConfigPage, DataSourcePicker, ExplorePage, GrafanaPage, Panel, PanelEditPage, PluginConfigPage, ScopedComponent, TimeRange, VariableEditPage, VariablePage, expect, isFeatureEnabled, isLegacyFeatureEnabled, test };
 export type { A11yViolationsOptions, AlertPageOptions, AlertRule, AlertRuleArgs, AlertVariant$1 as AlertVariant, AppPageNavigateOptions, AxeScanContext, ContainTextOptions, CreateDataSourceArgs, CreateDataSourcePageArgs, Credentials, Dashboard, DashboardEditViewArgs, DashboardPageArgs, DataSourceSettings, E2ESelectorGroups, FeatureFlagValue, GotoAppConfigPageArgs, GotoAppPageArgs, GrafanaPageArgs, InternalFixtures, NavigateOptions, OrgRole, PlaywrightArgs, PluginFixture, PluginOptions, PluginPageArgs, PluginTestCtx, ReadProvisionedAlertRuleArgs, ReadProvisionedDashboardArgs, ReadProvisionedDataSourceArgs, RequestOptions, TimeRangeArgs, TriggerRequestOptions, User, UserPreferences, Visualization, getByGrafanaSelectorOptions };

package/dist/index.js

@@ -2,6 +2,7 @@
 
 var test$1 = require('@playwright/test');
 var annotationEditPage = require('./fixtures/annotationEditPage.js');
+var components = require('./fixtures/components.js');
 var grafanaAPIClient = require('./fixtures/grafanaAPIClient.js');
 var createDataSource = require('./fixtures/commands/createDataSource.js');
 var createDataSourceConfigPage = require('./fixtures/commands/createDataSourceConfigPage.js');
@@ -43,7 +44,9 @@ 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 Components = require('./models/Components.js');
 var DataSourcePicker = require('./models/components/DataSourcePicker.js');
+var ScopedComponent = require('./models/components/ScopedComponent.js');
 var Panel = require('./models/components/Panel.js');
 var TimeRange = require('./models/components/TimeRange.js');
 var AnnotationEditPage = require('./models/pages/AnnotationEditPage.js');
@@ -91,6 +94,7 @@ const test = testWithInternal.extend({
   gotoVariablePage: gotoVariablePage.gotoVariablePage,
   gotoAnnotationEditPage: gotoAnnotationEditPage.gotoAnnotationEditPage,
   gotoAlertRuleEditPage: gotoAlertRuleEditPage.gotoAlertRuleEditPage,
+  components: components.components,
   gotoDataSourceConfigPage: gotoDataSourceConfigPage.gotoDataSourceConfigPage,
   gotoAppConfigPage: gotoAppConfigPage.gotoAppConfigPage,
   gotoAppPage: gotoAppPage.gotoAppPage,
@@ -116,7 +120,9 @@ Object.defineProperty(exports, "selectors", {
 exports.isFeatureEnabled = isFeatureToggleEnabled.isFeatureEnabled;
 exports.isLegacyFeatureEnabled = isFeatureToggleEnabled.isLegacyFeatureEnabled;
 exports.DEFAULT_A11Y_TAGS = scanForA11yViolations.DEFAULT_A11Y_TAGS;
+exports.Components = Components.Components;
 exports.DataSourcePicker = DataSourcePicker.DataSourcePicker;
+exports.ScopedComponent = ScopedComponent.ScopedComponent;
 exports.Panel = Panel.Panel;
 exports.TimeRange = TimeRange.TimeRange;
 exports.AnnotationEditPage = AnnotationEditPage.AnnotationEditPage;

package/dist/models/Components.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var DataSourcePicker = require('./components/DataSourcePicker.js');
+var TimeRange = require('./components/TimeRange.js');
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class Components {
+  constructor(ctx) {
+    __publicField(this, "dataSourcePicker");
+    __publicField(this, "timeRangePicker");
+    this.dataSourcePicker = new DataSourcePicker.DataSourcePicker(ctx);
+    this.timeRangePicker = new TimeRange.TimeRange(ctx);
+  }
+}
+
+exports.Components = Components;

package/dist/models/components/DataSourcePicker.js

@@ -2,7 +2,7 @@
 
 var semver = require('semver');
 var test = require('@playwright/test');
-var GrafanaPage = require('../pages/GrafanaPage.js');
+var ScopedComponent = require('./ScopedComponent.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -23,11 +23,7 @@ function _interopNamespaceDefault(e) {
 
 var semver__namespace = /*#__PURE__*/_interopNamespaceDefault(semver);
 
-class DataSourcePicker extends GrafanaPage.GrafanaPage {
-  constructor(ctx, root) {
-    super(ctx);
-    this.root = root;
-  }
+class DataSourcePicker extends ScopedComponent.ScopedComponent {
   /**
    * Sets the data source picker to the provided name
    */

package/dist/models/components/PanelEditOptionsGroup.js

@@ -49,10 +49,10 @@ class PanelEditOptionsGroup {
     return this.getFieldLocator(label).getByRole("spinbutton");
   }
   getSliderInput(label) {
-    if (semver.gte(this.ctx.grafanaVersion, "9.1.0")) {
+    if (semver.gte(this.ctx.grafanaVersion, "9.1.0") && semver.lt(this.ctx.grafanaVersion, "13.1.0-25389005429")) {
       return this.getNumberInput(label);
     }
-    return this.getFieldLocator(label).getByRole("textbox");
+    return this.getTextInput(label);
   }
   getSelect(label) {
     return new Select.Select(this.ctx, this.getFieldLocator(label));

package/dist/models/components/ScopedComponent.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var GrafanaPage = require('../pages/GrafanaPage.js');
+
+class ScopedComponent extends GrafanaPage.GrafanaPage {
+  constructor(ctx, root) {
+    super(ctx);
+    this.root = root;
+  }
+  /**
+   * Returns a new instance of this component scoped to the given root locator.
+   * Mirrors Playwright's `locator.locator(...)` chaining pattern.
+   */
+  within(root) {
+    const Ctor = this.constructor;
+    return new Ctor(this.ctx, root);
+  }
+}
+
+exports.ScopedComponent = ScopedComponent;

package/dist/models/components/TimeRange.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var semver = require('semver');
-var GrafanaPage = require('../pages/GrafanaPage.js');
+var ScopedComponent = require('./ScopedComponent.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -22,17 +22,14 @@ function _interopNamespaceDefault(e) {
 
 var semver__namespace = /*#__PURE__*/_interopNamespaceDefault(semver);
 
-class TimeRange extends GrafanaPage.GrafanaPage {
-  constructor(ctx) {
-    super(ctx);
-  }
+class TimeRange extends ScopedComponent.ScopedComponent {
   /**
    * Opens the time picker and sets the time range to the provided values
    */
   async set({ from, to, zone }) {
     const { TimeZonePicker, TimePicker, Select } = this.ctx.selectors.components;
     try {
-      await this.getByGrafanaSelector(TimePicker.openButton).click();
+      await this.getByGrafanaSelector(TimePicker.openButton, { root: this.root }).click();
     } catch (e) {
       await this.ctx.page.locator('[aria-controls="TimePickerContent"]').last().click();
     }

package/dist/models/pages/DashboardPage.js

@@ -67,6 +67,20 @@ class DashboardPage extends GrafanaPage.GrafanaPage {
     }
     return super.navigate(url, options);
   }
+  /**
+   * Returns a locator for the dashboard toolbar area that contains the time range controls.
+   *
+   * - Grafana ≥ 11.1.0: resolves to `Dashboard.Controls` (scenes-based dashboard controls bar)
+   * - Grafana 9.4.0–11.0.x: resolves to `NavToolbar.container`
+   * - Grafana < 9.4.0: falls back to `.page-toolbar`
+   */
+  get toolbar() {
+    const { components, pages } = this.ctx.selectors;
+    if (semver__namespace.gte(this.ctx.grafanaVersion, "11.1.0")) {
+      return this.getByGrafanaSelector(pages.Dashboard.Controls);
+    }
+    return semver__namespace.gte(this.ctx.grafanaVersion, "9.4.0") ? this.getByGrafanaSelector(components.NavToolbar.container) : this.ctx.page.locator(".page-toolbar");
+  }
   /**
    * Scrolls the page viewport-by-viewport to trigger below-fold panel queries.
    *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-e2e",
-  "version": "3.7.1",
+  "version": "3.7.2-canary.2560.fc1fa7a.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -49,10 +49,10 @@
     "dotenv": "^17.2.4"
   },
   "dependencies": {
-    "@grafana/e2e-selectors": "13.1.0-24448182242",
+    "@grafana/e2e-selectors": "13.1.0-25644485979",
     "semver": "^7.5.4",
     "uuid": "^13.0.0",
     "yaml": "^2.3.4"
   },
-  "gitHead": "5e1b5c265a926b13975ad50ac0639f7b3f9552c0"
+  "gitHead": "fc1fa7a29f4eab23e5913db781cf191a4ab466fb"
 }