@grafana/plugin-e2e 3.8.0 → 3.9.0-canary.2621.26391095667.0

package/dist/index.d.ts

@@ -171,6 +171,58 @@ declare class AppPage extends GrafanaPage {
     goto(options?: AppPageNavigateOptions): Promise<void>;
 }
 
+type LocatorParams = Parameters<Locator['locator']>;
+declare abstract class ComponentBase {
+    readonly ctx: PluginTestCtx;
+    protected readonly element: Locator;
+    constructor(ctx: PluginTestCtx, element: Locator);
+    locator(selectorOrLocator?: LocatorParams[0], options?: LocatorParams[1]): Locator;
+}
+
+type SelectOptionsType = Parameters<Locator['selectOption']>[1];
+type CheckOptionsType = Parameters<Locator['check']>[0];
+
+declare class ColorPicker extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    static getContainer(ctx: PluginTestCtx, root?: Locator): Locator;
+    within(root: Locator): ColorPicker;
+    selectOption(rgbOrHex: string, options?: SelectOptionsType): Promise<void>;
+    private getCustomTab;
+    private getContainer;
+}
+
+declare class MultiSelect extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    static getContainer(ctx: PluginTestCtx, root?: Locator): Locator;
+    within(root: Locator): MultiSelect;
+    selectOptions(values: string[], options?: SelectOptionsType): Promise<string[]>;
+}
+
+declare class RadioGroup extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    static getContainer(ctx: PluginTestCtx, root?: Locator): Locator;
+    within(root: Locator): RadioGroup;
+    check(labelOrValue: string, options?: CheckOptionsType): Promise<void>;
+}
+
+declare class Select extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    static getContainer(ctx: PluginTestCtx, root?: Locator): Locator;
+    within(root: Locator): Select;
+    selectOption(values: string, options?: SelectOptionsType): Promise<string>;
+}
+
+declare class Switch extends ComponentBase {
+    private group;
+    constructor(ctx: PluginTestCtx, group: Locator);
+    static getContainer(ctx: PluginTestCtx, root?: Locator): Locator;
+    within(root: Locator): Switch;
+    private static getElement;
+    check(options?: CheckOptionsType): Promise<void>;
+    uncheck(options?: CheckOptionsType): Promise<void>;
+    private getSwitch;
+}
+
 declare class TimeRange extends ScopedComponent {
     /**
      * Opens the time picker and sets the time range to the provided values
@@ -178,6 +230,14 @@ declare class TimeRange extends ScopedComponent {
     set({ from, to, zone }: TimeRangeArgs): Promise<void>;
 }
 
+declare class UnitPicker extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    static getContainer(ctx: PluginTestCtx, root?: Locator): Locator;
+    within(root: Locator): UnitPicker;
+    selectOption(value: string, options?: SelectOptionsType): Promise<void>;
+    private getOption;
+}
+
 /**
  * Factory for components that are not attached to a specific page.
  *
@@ -191,11 +251,19 @@ declare class TimeRange extends ScopedComponent {
  * ```typescript
  * await components.dataSourcePicker.set('prom');
  * await components.dataSourcePicker.within(panel).set('prom');
+ * await components.select.within(fieldLabel).selectOption('Europe/Stockholm');
+ * await components.switch.within(fieldLabel).check();
  * ```
  */
 declare class Components {
     readonly dataSourcePicker: DataSourcePicker;
     readonly timeRangePicker: TimeRange;
+    readonly select: Select;
+    readonly multiSelect: MultiSelect;
+    readonly switch: Switch;
+    readonly radioGroup: RadioGroup;
+    readonly unitPicker: UnitPicker;
+    readonly colorPicker: ColorPicker;
     constructor(ctx: PluginTestCtx);
 }
 
@@ -241,54 +309,6 @@ declare class Panel extends GrafanaPage {
     getErrorIcon(): Locator;
 }
 
-type LocatorParams = Parameters<Locator['locator']>;
-declare abstract class ComponentBase {
-    readonly ctx: PluginTestCtx;
-    protected readonly element: Locator;
-    constructor(ctx: PluginTestCtx, element: Locator);
-    locator(selectorOrLocator?: LocatorParams[0], options?: LocatorParams[1]): Locator;
-}
-
-type SelectOptionsType = Parameters<Locator['selectOption']>[1];
-type CheckOptionsType = Parameters<Locator['check']>[0];
-
-declare class ColorPicker extends ComponentBase {
-    constructor(ctx: PluginTestCtx, element: Locator);
-    selectOption(rgbOrHex: string, options?: SelectOptionsType): Promise<void>;
-    private getCustomTab;
-    private getContainer;
-}
-
-declare class UnitPicker extends ComponentBase {
-    constructor(ctx: PluginTestCtx, element: Locator);
-    selectOption(value: string, options?: SelectOptionsType): Promise<void>;
-    private getOption;
-}
-
-declare class Select extends ComponentBase {
-    constructor(ctx: PluginTestCtx, element: Locator);
-    selectOption(values: string, options?: SelectOptionsType): Promise<string>;
-}
-
-declare class MultiSelect extends ComponentBase {
-    constructor(ctx: PluginTestCtx, element: Locator);
-    selectOptions(values: string[], options?: SelectOptionsType): Promise<string[]>;
-}
-
-declare class Switch extends ComponentBase {
-    private group;
-    constructor(ctx: PluginTestCtx, group: Locator);
-    private static getElement;
-    check(options?: CheckOptionsType): Promise<void>;
-    uncheck(options?: CheckOptionsType): Promise<void>;
-    private getSwitch;
-}
-
-declare class RadioGroup extends ComponentBase {
-    constructor(ctx: PluginTestCtx, element: Locator);
-    check(labelOrValue: string, options?: CheckOptionsType): Promise<void>;
-}
-
 declare class PanelEditOptionsGroup {
     private ctx;
     readonly element: Locator;
@@ -1561,5 +1581,5 @@ declare global {
     }
 }
 
-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 { AnnotationEditPage, AnnotationPage, AppConfigPage, AppPage, ColorPicker, Components, DEFAULT_A11Y_TAGS, DashboardPage, DataSourceConfigPage, DataSourcePicker, ExplorePage, GrafanaPage, MultiSelect, Panel, PanelEditPage, PluginConfigPage, RadioGroup, ScopedComponent, Select, Switch, TimeRange, UnitPicker, 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

@@ -45,10 +45,16 @@ 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 ColorPicker = require('./models/components/ColorPicker.js');
 var DataSourcePicker = require('./models/components/DataSourcePicker.js');
+var MultiSelect = require('./models/components/MultiSelect.js');
+var RadioGroup = require('./models/components/RadioGroup.js');
 var ScopedComponent = require('./models/components/ScopedComponent.js');
+var Select = require('./models/components/Select.js');
+var Switch = require('./models/components/Switch.js');
 var Panel = require('./models/components/Panel.js');
 var TimeRange = require('./models/components/TimeRange.js');
+var UnitPicker = require('./models/components/UnitPicker.js');
 var AnnotationEditPage = require('./models/pages/AnnotationEditPage.js');
 var AnnotationPage = require('./models/pages/AnnotationPage.js');
 var DashboardPage = require('./models/pages/DashboardPage.js');
@@ -121,10 +127,16 @@ exports.isFeatureEnabled = isFeatureToggleEnabled.isFeatureEnabled;
 exports.isLegacyFeatureEnabled = isFeatureToggleEnabled.isLegacyFeatureEnabled;
 exports.DEFAULT_A11Y_TAGS = scanForA11yViolations.DEFAULT_A11Y_TAGS;
 exports.Components = Components.Components;
+exports.ColorPicker = ColorPicker.ColorPicker;
 exports.DataSourcePicker = DataSourcePicker.DataSourcePicker;
+exports.MultiSelect = MultiSelect.MultiSelect;
+exports.RadioGroup = RadioGroup.RadioGroup;
 exports.ScopedComponent = ScopedComponent.ScopedComponent;
+exports.Select = Select.Select;
+exports.Switch = Switch.Switch;
 exports.Panel = Panel.Panel;
 exports.TimeRange = TimeRange.TimeRange;
+exports.UnitPicker = UnitPicker.UnitPicker;
 exports.AnnotationEditPage = AnnotationEditPage.AnnotationEditPage;
 exports.AnnotationPage = AnnotationPage.AnnotationPage;
 exports.DashboardPage = DashboardPage.DashboardPage;

package/dist/models/Components.js

@@ -1,7 +1,13 @@
 'use strict';
 
+var ColorPicker = require('./components/ColorPicker.js');
 var DataSourcePicker = require('./components/DataSourcePicker.js');
+var MultiSelect = require('./components/MultiSelect.js');
+var RadioGroup = require('./components/RadioGroup.js');
+var Select = require('./components/Select.js');
+var Switch = require('./components/Switch.js');
 var TimeRange = require('./components/TimeRange.js');
+var UnitPicker = require('./components/UnitPicker.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;
@@ -10,8 +16,20 @@ class Components {
   constructor(ctx) {
     __publicField(this, "dataSourcePicker");
     __publicField(this, "timeRangePicker");
+    __publicField(this, "select");
+    __publicField(this, "multiSelect");
+    __publicField(this, "switch");
+    __publicField(this, "radioGroup");
+    __publicField(this, "unitPicker");
+    __publicField(this, "colorPicker");
     this.dataSourcePicker = new DataSourcePicker.DataSourcePicker(ctx);
     this.timeRangePicker = new TimeRange.TimeRange(ctx);
+    this.select = new Select.Select(ctx, Select.Select.getContainer(ctx));
+    this.multiSelect = new MultiSelect.MultiSelect(ctx, MultiSelect.MultiSelect.getContainer(ctx));
+    this.switch = new Switch.Switch(ctx, Switch.Switch.getContainer(ctx));
+    this.radioGroup = new RadioGroup.RadioGroup(ctx, RadioGroup.RadioGroup.getContainer(ctx));
+    this.unitPicker = new UnitPicker.UnitPicker(ctx, UnitPicker.UnitPicker.getContainer(ctx));
+    this.colorPicker = new ColorPicker.ColorPicker(ctx, ColorPicker.ColorPicker.getContainer(ctx));
   }
 }
 

package/dist/models/components/ColorPicker.js

@@ -8,6 +8,15 @@ class ColorPicker extends ComponentBase.ComponentBase {
   constructor(ctx, element) {
     super(ctx, element);
   }
+  static getContainer(ctx, root) {
+    if (root) {
+      return root;
+    }
+    return ctx.page.locator('[data-testid*="colorswatch"]').locator("xpath=..").first();
+  }
+  within(root) {
+    return new ColorPicker(this.ctx, root);
+  }
   async selectOption(rgbOrHex, options) {
     await this.element.getByRole("button").click(options);
     await this.getCustomTab().click(options);

package/dist/models/components/MultiSelect.js

@@ -1,12 +1,24 @@
 'use strict';
 
+var semver = require('semver');
 var Select = require('./Select.js');
 var ComponentBase = require('./ComponentBase.js');
+var utils = require('../utils.js');
 
 class MultiSelect extends ComponentBase.ComponentBase {
   constructor(ctx, element) {
     super(ctx, element);
   }
+  static getContainer(ctx, root) {
+    const base = root ?? ctx.page;
+    if (semver.gte(ctx.grafanaVersion, "13.1.0")) {
+      return base.locator(utils.resolveGrafanaSelector(ctx.selectors.components.MultiSelect.container)).locator("xpath=..").first();
+    }
+    return base.locator('[class*="-grafana-select-value-container-multi"]').locator("xpath=..").first();
+  }
+  within(root) {
+    return new MultiSelect(this.ctx, MultiSelect.getContainer(this.ctx, root));
+  }
   async selectOptions(values, options) {
     const menu = await Select.openSelect(this, options);
     const selected = [];

package/dist/models/components/RadioGroup.js

@@ -2,11 +2,25 @@
 
 var ComponentBase = require('./ComponentBase.js');
 var semver = require('semver');
+var utils = require('../utils.js');
 
 class RadioGroup extends ComponentBase.ComponentBase {
   constructor(ctx, element) {
     super(ctx, element);
   }
+  static getContainer(ctx, root) {
+    const base = root ?? ctx.page;
+    if (semver.gte(ctx.grafanaVersion, "13.1.0")) {
+      return base.locator(utils.resolveGrafanaSelector(ctx.selectors.components.RadioGroup.container)).first();
+    }
+    if (semver.gte(ctx.grafanaVersion, "10.0.0")) {
+      return base.locator('[role="radiogroup"]').first();
+    }
+    return base.locator('div:has(> input[type="radio"]), div:has(> div > input[type="radio"])').first();
+  }
+  within(root) {
+    return new RadioGroup(this.ctx, RadioGroup.getContainer(this.ctx, root));
+  }
   async check(labelOrValue, options) {
     if (semver.gte(this.ctx.grafanaVersion, "10.2.0")) {
       return this.element.getByLabel(labelOrValue, { exact: true }).check(options);

package/dist/models/components/Select.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var semver = require('semver');
 var ComponentBase = require('./ComponentBase.js');
 var utils = require('../utils.js');
 
@@ -7,6 +8,16 @@ class Select extends ComponentBase.ComponentBase {
   constructor(ctx, element) {
     super(ctx, element);
   }
+  static getContainer(ctx, root) {
+    const base = root ?? ctx.page;
+    if (semver.gte(ctx.grafanaVersion, "13.1.0")) {
+      return base.locator(utils.resolveGrafanaSelector(ctx.selectors.components.Select.container)).locator("xpath=..").first();
+    }
+    return base.locator('[class*="-grafana-select-value-container"]:not([class*="-grafana-select-value-container-multi"])').locator("xpath=..").first();
+  }
+  within(root) {
+    return new Select(this.ctx, Select.getContainer(this.ctx, root));
+  }
   async selectOption(values, options) {
     const menu = await openSelect(this, options);
     await this.locator().page().keyboard.type(values);

package/dist/models/components/Switch.js

@@ -2,6 +2,7 @@
 
 var ComponentBase = require('./ComponentBase.js');
 var semver = require('semver');
+var utils = require('../utils.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;
@@ -12,6 +13,19 @@ class Switch extends ComponentBase.ComponentBase {
     __publicField(this, "group");
     this.group = group;
   }
+  static getContainer(ctx, root) {
+    const base = root ?? ctx.page;
+    if (semver.gte(ctx.grafanaVersion, "13.1.0")) {
+      return base.locator(utils.resolveGrafanaSelector(ctx.selectors.components.Switch.container)).first();
+    }
+    if (semver.gte(ctx.grafanaVersion, "12.0.0")) {
+      return base.locator('div:has(> input[type="checkbox"][role="switch"])').first();
+    }
+    return base.locator('div:has(> input[type="checkbox"] + label)').first();
+  }
+  within(root) {
+    return new Switch(this.ctx, Switch.getContainer(this.ctx, root));
+  }
   static getElement(ctx, group) {
     if (semver.gte(ctx.grafanaVersion, "11.5.0")) {
       return group.getByRole("switch");

package/dist/models/components/UnitPicker.js

@@ -1,11 +1,23 @@
 'use strict';
 
+var semver = require('semver');
 var ComponentBase = require('./ComponentBase.js');
+var utils = require('../utils.js');
 
 class UnitPicker extends ComponentBase.ComponentBase {
   constructor(ctx, element) {
     super(ctx, element);
   }
+  static getContainer(ctx, root) {
+    const base = root ?? ctx.page;
+    if (semver.gte(ctx.grafanaVersion, "13.1.0")) {
+      return base.locator(utils.resolveGrafanaSelector(ctx.selectors.components.UnitPicker.container)).first();
+    }
+    return base.locator('div:has(> div > [data-testid="input-wrapper"] input[placeholder="Choose"])').first();
+  }
+  within(root) {
+    return new UnitPicker(this.ctx, UnitPicker.getContainer(this.ctx, root));
+  }
   async selectOption(value, options) {
     await this.element.getByRole("textbox").click();
     const option = await this.getOption(value, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-e2e",
-  "version": "3.8.0",
+  "version": "3.9.0-canary.2621.26391095667.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-25644485979",
+    "@grafana/e2e-selectors": "13.1.0-25893932881",
     "semver": "^7.5.4",
     "uuid": "^13.0.0",
     "yaml": "^2.3.4"
   },
-  "gitHead": "a5b29c0663a14099383f2cda889ff86df36086ae"
+  "gitHead": "8099b42a417a283e59f6dbd9397af634948d4362"
 }