@grafana/plugin-e2e 1.14.6 → 1.15.0-canary.1272.059bc30.0

package/dist/index.d.ts

@@ -1,6 +1,16 @@
+import { Locator } from '@playwright/test';
 import { AlertPageOptions, AlertVariant, ContainTextOptions, PluginFixture, PluginOptions } from './types';
 import { GrafanaPage } from './models/pages/GrafanaPage';
 import { VariableEditPage } from './models/pages/VariableEditPage';
+import { toHaveSelected } from './matchers/toHaveSelected';
+import { Select } from './models/components/Select';
+import { Switch } from './models/components/Switch';
+import { toBeChecked } from './matchers/toBeChecked';
+import { RadioGroup } from './models/components/RadioGroup';
+import { toHaveChecked } from './matchers/toHaveChecked';
+import { MultiSelect } from './models/components/MultiSelect';
+import { toHaveColor } from './matchers/toHaveColor';
+import { ColorPicker } from './models/components/ColorPicker';
 export { DataSourcePicker } from './models/components/DataSourcePicker';
 export { Panel } from './models/components/Panel';
 export { TimeRange } from './models/components/TimeRange';
@@ -41,6 +51,10 @@ export declare const expect: import("@playwright/test").Expect<{
         pass: boolean;
         actual: undefined;
     }>;
+    toHaveSelected: typeof toHaveSelected;
+    toBeChecked: typeof toBeChecked;
+    toHaveChecked: typeof toHaveChecked;
+    toHaveColor: typeof toHaveColor;
 }>;
 export { selectors } from '@playwright/test';
 declare global {
@@ -70,6 +84,29 @@ declare global {
              * Asserts that a GrafanaPage contains an alert with the specified severity. Use the options to specify the timeout and to filter the alerts.
              */
             toHaveAlert(this: Matchers<unknown, GrafanaPage>, severity: AlertVariant, options?: AlertPageOptions): Promise<R>;
+            /**
+             * Asserts that a Selector has the specified value selected
+             */
+            toHaveSelected(select: Select | MultiSelect, value: string | RegExp | string[] | RegExp[], options?: ContainTextOptions): Promise<R>;
+            /**
+             * Asserts that a Switch is on or off (on by default)
+             */
+            toBeChecked(target: Switch | Locator, options?: {
+                on?: boolean;
+                timeout?: number;
+            }): Promise<R>;
+            /**
+             * Asserts that a Radio has expected value selected
+             */
+            toHaveChecked(radioGroup: RadioGroup, expected: string, options?: {
+                timeout?: number;
+            }): Promise<R>;
+            /**
+             * Asserts that a color picker has expected color selected
+             */
+            toHaveColor(colorPicker: ColorPicker, rgbOrHex: string, options?: {
+                timeout?: number;
+            }): Promise<R>;
         }
     }
 }

package/dist/index.js

@@ -48,6 +48,10 @@ const toDisplayPreviews_1 = require("./matchers/toDisplayPreviews");
 const toBeOK_1 = require("./matchers/toBeOK");
 const variablePage_1 = require("./fixtures/variablePage");
 const gotoVariablePage_1 = require("./fixtures/commands/gotoVariablePage");
+const toHaveSelected_1 = require("./matchers/toHaveSelected");
+const toBeChecked_1 = require("./matchers/toBeChecked");
+const toHaveChecked_1 = require("./matchers/toHaveChecked");
+const toHaveColor_1 = require("./matchers/toHaveColor");
 // models
 var DataSourcePicker_1 = require("./models/components/DataSourcePicker");
 Object.defineProperty(exports, "DataSourcePicker", { enumerable: true, get: function () { return DataSourcePicker_1.DataSourcePicker; } });
@@ -116,6 +120,10 @@ exports.expect = test_1.expect.extend({
     toHaveAlert: toHaveAlert_1.toHaveAlert,
     toDisplayPreviews: toDisplayPreviews_1.toDisplayPreviews,
     toBeOK: toBeOK_1.toBeOK,
+    toHaveSelected: toHaveSelected_1.toHaveSelected,
+    toBeChecked: toBeChecked_1.toBeChecked,
+    toHaveChecked: toHaveChecked_1.toHaveChecked,
+    toHaveColor: toHaveColor_1.toHaveColor,
 });
 var test_2 = require("@playwright/test");
 Object.defineProperty(exports, "selectors", { enumerable: true, get: function () { return test_2.selectors; } });

package/dist/matchers/toBeChecked.d.ts

@@ -0,0 +1,6 @@
+import { Locator, MatcherReturnType } from '@playwright/test';
+import { Switch } from '../models/components/Switch';
+export declare function toBeChecked(target: Switch | Locator, options?: {
+    checked?: boolean;
+    timeout?: number;
+}): Promise<MatcherReturnType>;

package/dist/matchers/toBeChecked.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toBeChecked = toBeChecked;
+const test_1 = require("@playwright/test");
+const utils_1 = require("./utils");
+const Switch_1 = require("../models/components/Switch");
+async function toBeChecked(target, options) {
+    const expected = options?.checked ?? true;
+    try {
+        if (target instanceof Switch_1.Switch) {
+            await (0, test_1.expect)(target.locator()).toBeChecked({ ...options, checked: expected });
+        }
+        else {
+            await (0, test_1.expect)(target).toBeChecked(options);
+        }
+        return {
+            pass: true,
+            expected,
+            message: () => `Value successfully selected`,
+        };
+    }
+    catch (err) {
+        return {
+            message: () => (0, utils_1.getMessage)(expected.toString(), err instanceof Error ? err.toString() : 'Unknown error'),
+            pass: false,
+        };
+    }
+}

package/dist/matchers/toHaveChecked.d.ts

@@ -0,0 +1,5 @@
+import { MatcherReturnType } from '@playwright/test';
+import { RadioGroup } from '../models/components/RadioGroup';
+export declare function toHaveChecked(radioGroup: RadioGroup, expected: string, options?: {
+    timeout?: number;
+}): Promise<MatcherReturnType>;

package/dist/matchers/toHaveChecked.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toHaveChecked = toHaveChecked;
+const test_1 = require("@playwright/test");
+const utils_1 = require("./utils");
+async function toHaveChecked(radioGroup, expected, options) {
+    try {
+        await (0, test_1.expect)(radioGroup.locator().getByLabel(expected)).toBeChecked(options);
+        return {
+            pass: true,
+            expected,
+            message: () => `Value successfully selected`,
+        };
+    }
+    catch (err) {
+        return {
+            message: () => (0, utils_1.getMessage)(expected.toString(), err instanceof Error ? err.toString() : 'Unknown error'),
+            pass: false,
+        };
+    }
+}

package/dist/matchers/toHaveColor.d.ts

@@ -0,0 +1,5 @@
+import { MatcherReturnType } from '@playwright/test';
+import { ColorPicker } from '../models/components/ColorPicker';
+export declare function toHaveColor(colorPicker: ColorPicker, rgbOrHex: string, options?: {
+    timeout?: number;
+}): Promise<MatcherReturnType>;

package/dist/matchers/toHaveColor.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toHaveColor = toHaveColor;
+const test_1 = require("@playwright/test");
+const utils_1 = require("./utils");
+async function toHaveColor(colorPicker, rgbOrHex, options) {
+    try {
+        await (0, test_1.expect)(colorPicker.locator().getByRole('textbox')).toHaveValue(rgbOrHex, options);
+        return {
+            pass: true,
+            expected: rgbOrHex,
+            message: () => `Value successfully selected`,
+        };
+    }
+    catch (err) {
+        return {
+            message: () => (0, utils_1.getMessage)(rgbOrHex, err instanceof Error ? err.toString() : 'Unknown error'),
+            pass: false,
+        };
+    }
+}

package/dist/matchers/toHaveSelected.d.ts

@@ -0,0 +1,6 @@
+import { MatcherReturnType } from '@playwright/test';
+import { ContainTextOptions } from '../types';
+import { Select } from '../models/components/Select';
+import { MultiSelect } from '../models/components/MultiSelect';
+import { UnitPicker } from '../models/components/UnitPicker';
+export declare function toHaveSelected(target: Select | MultiSelect | UnitPicker, value: string | RegExp | string[] | RegExp[], options?: ContainTextOptions): Promise<MatcherReturnType>;

package/dist/matchers/toHaveSelected.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toHaveSelected = toHaveSelected;
+const test_1 = require("@playwright/test");
+const utils_1 = require("./utils");
+const Select_1 = require("../models/components/Select");
+const MultiSelect_1 = require("../models/components/MultiSelect");
+const UnitPicker_1 = require("../models/components/UnitPicker");
+async function toHaveSelected(target, value, options) {
+    if (target instanceof MultiSelect_1.MultiSelect) {
+        if (Array.isArray(value)) {
+            return expectMultiSelectToBe(target, value);
+        }
+        return expectMultiSelectToBe(target, [value]);
+    }
+    if (target instanceof Select_1.Select) {
+        if (Array.isArray(value)) {
+            throw new Error(`Select only support a single value to be selected. You are asserting that multiple values have been selected: "${value}"`);
+        }
+        return expectSelectToBe(target, value, options);
+    }
+    if (target instanceof UnitPicker_1.UnitPicker) {
+        if (Array.isArray(value)) {
+            throw new Error(`UnitPicker only support a single value to be selected. You are asserting that multiple values have been selected: "${value}"`);
+        }
+        return expectUnitPickerToBe(target, value, options);
+    }
+    throw Error('Unsupported parameters passed to "toBeSelected"');
+}
+async function expectSelectToBe(select, value, options) {
+    let actual = '';
+    try {
+        actual = await select.locator(select.ctx.selectors.constants.Select.singleValueContainer('')).innerText(options);
+        (0, test_1.expect)(actual).toMatch(value);
+        return {
+            pass: true,
+            actual: actual,
+            expected: value,
+            message: () => `Value successfully selected`,
+        };
+    }
+    catch (err) {
+        return {
+            message: () => (0, utils_1.getMessage)(value.toString(), err instanceof Error ? err.toString() : 'Unknown error'),
+            pass: false,
+            actual,
+        };
+    }
+}
+async function expectMultiSelectToBe(select, values) {
+    let actual = '';
+    try {
+        const actual = await select.locator(select.ctx.selectors.constants.Select.multiValueContainer('')).allInnerTexts();
+        (0, test_1.expect)(actual).toMatchObject(values);
+        return {
+            pass: true,
+            actual: actual,
+            expected: values,
+            message: () => `Values successfully selected`,
+        };
+    }
+    catch (err) {
+        return {
+            message: () => (0, utils_1.getMessage)(values.join(', '), err instanceof Error ? err.toString() : 'Unknown error'),
+            pass: false,
+            actual,
+            expected: values,
+        };
+    }
+}
+async function expectUnitPickerToBe(unitPicker, value, options) {
+    let actual = '';
+    try {
+        const input = unitPicker.locator().getByRole('textbox');
+        actual = await input.inputValue(options);
+        await (0, test_1.expect)(input).toHaveValue(value);
+        return {
+            pass: true,
+            actual: actual,
+            expected: value,
+            message: () => `Value successfully selected`,
+        };
+    }
+    catch (err) {
+        return {
+            message: () => (0, utils_1.getMessage)(value.toString(), err instanceof Error ? err.toString() : 'Unknown error'),
+            pass: false,
+            actual,
+        };
+    }
+}

package/dist/models/components/ColorPicker.d.ts

@@ -0,0 +1,9 @@
+import { Locator } from '@playwright/test';
+import { PluginTestCtx } from '../../types';
+import { ComponentBase } from './ComponentBase';
+import { SelectOptionsType } from './types';
+export declare class ColorPicker extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    selectOption(rgbOrHex: string, options?: SelectOptionsType): Promise<void>;
+    private getContainer;
+}

package/dist/models/components/ColorPicker.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
+const ComponentBase_1 = require("./ComponentBase");
+const semver_1 = require("semver");
+const utils_1 = require("../utils");
+class ColorPicker extends ComponentBase_1.ComponentBase {
+    constructor(ctx, element) {
+        super(ctx, element);
+    }
+    async selectOption(rgbOrHex, options) {
+        await this.element.getByRole('button').click(options);
+        await this.getContainer().getByRole('button', { name: 'Custom', exact: true }).click(options);
+        const colorInput = this.getContainer().getByTestId('input-wrapper').getByRole('textbox');
+        await colorInput.hover(options);
+        await colorInput.fill(rgbOrHex, options);
+    }
+    getContainer() {
+        const { grafanaVersion, page, selectors } = this.ctx;
+        if ((0, semver_1.gte)(grafanaVersion, '11.4.1')) {
+            return page.locator((0, utils_1.resolveGrafanaSelector)(selectors.components.Portal.container));
+        }
+        if ((0, semver_1.gte)(grafanaVersion, '8.7.0')) {
+            return page.locator('#grafana-portal-container');
+        }
+        return page.locator('body > div').last();
+    }
+}
+exports.ColorPicker = ColorPicker;

package/dist/models/components/ComponentBase.d.ts

@@ -0,0 +1,10 @@
+import { Locator } from '@playwright/test';
+import { PluginTestCtx } from '../../types';
+type LocatorParams = Parameters<Locator['locator']>;
+export declare abstract class ComponentBase {
+    readonly ctx: PluginTestCtx;
+    protected readonly element: Locator;
+    constructor(ctx: PluginTestCtx, element: Locator);
+    locator(selectorOrLocator?: LocatorParams[0], options?: LocatorParams[1]): Locator;
+}
+export {};

package/dist/models/components/ComponentBase.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentBase = void 0;
+class ComponentBase {
+    ctx;
+    element;
+    constructor(ctx, element) {
+        this.ctx = ctx;
+        this.element = element;
+    }
+    locator(selectorOrLocator, options) {
+        if (!selectorOrLocator) {
+            return this.element;
+        }
+        return this.element.locator(selectorOrLocator, options);
+    }
+}
+exports.ComponentBase = ComponentBase;

package/dist/models/components/MultiSelect.d.ts

@@ -0,0 +1,8 @@
+import { Locator } from '@playwright/test';
+import { ComponentBase } from './ComponentBase';
+import { SelectOptionsType } from './types';
+import { PluginTestCtx } from '../../types';
+export declare class MultiSelect extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    selectOptions(values: string[], options?: SelectOptionsType): Promise<string[]>;
+}

package/dist/models/components/MultiSelect.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelect = void 0;
+const Select_1 = require("./Select");
+const ComponentBase_1 = require("./ComponentBase");
+class MultiSelect extends ComponentBase_1.ComponentBase {
+    constructor(ctx, element) {
+        super(ctx, element);
+    }
+    async selectOptions(values, options) {
+        const menu = await (0, Select_1.openSelect)(this, options);
+        return Promise.all(values.map((value) => {
+            return (0, Select_1.selectByValueOrLabel)(value, menu, this.ctx, options);
+        }));
+    }
+}
+exports.MultiSelect = MultiSelect;

package/dist/models/components/PanelEditOptionsGroup.d.ts

@@ -0,0 +1,24 @@
+import { Locator } from '@playwright/test';
+import { PluginTestCtx } from '../../types';
+import { ColorPicker } from './ColorPicker';
+import { UnitPicker } from './UnitPicker';
+import { Select } from './Select';
+import { MultiSelect } from './MultiSelect';
+import { Switch } from './Switch';
+import { RadioGroup } from './RadioGroup';
+export declare class PanelEditOptionsGroup {
+    private ctx;
+    readonly element: Locator;
+    private groupLabel;
+    constructor(ctx: PluginTestCtx, element: Locator, groupLabel: string);
+    getRadioGroup(label: string): RadioGroup;
+    getSwitch(label: string): Switch;
+    getTextInput(label: string): Locator;
+    getNumberInput(label: string): Locator;
+    getSliderInput(label: string): Locator;
+    getSelect(label: string): Select;
+    getMultiSelect(label: string): MultiSelect;
+    getColorPicker(label: string): ColorPicker;
+    getUnitPicker(label: string): UnitPicker;
+    private getByLabel;
+}

package/dist/models/components/PanelEditOptionsGroup.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelEditOptionsGroup = void 0;
+const ColorPicker_1 = require("./ColorPicker");
+const UnitPicker_1 = require("./UnitPicker");
+const Select_1 = require("./Select");
+const MultiSelect_1 = require("./MultiSelect");
+const Switch_1 = require("./Switch");
+const semver_1 = require("semver");
+const RadioGroup_1 = require("./RadioGroup");
+class PanelEditOptionsGroup {
+    ctx;
+    element;
+    groupLabel;
+    constructor(ctx, element, groupLabel) {
+        this.ctx = ctx;
+        this.element = element;
+        this.groupLabel = groupLabel;
+    }
+    getRadioGroup(label) {
+        if ((0, semver_1.gte)(this.ctx.grafanaVersion, '10.2.0')) {
+            return new RadioGroup_1.RadioGroup(this.ctx, this.getByLabel(label).getByRole('radiogroup'));
+        }
+        return new RadioGroup_1.RadioGroup(this.ctx, this.getByLabel(label));
+    }
+    getSwitch(label) {
+        return new Switch_1.Switch(this.ctx, this.getByLabel(label));
+    }
+    getTextInput(label) {
+        return this.getByLabel(label).getByRole('textbox');
+    }
+    getNumberInput(label) {
+        return this.getByLabel(label).getByRole('spinbutton');
+    }
+    getSliderInput(label) {
+        if ((0, semver_1.gte)(this.ctx.grafanaVersion, '9.1.0')) {
+            return this.getNumberInput(label);
+        }
+        return this.getByLabel(label).getByRole('textbox');
+    }
+    getSelect(label) {
+        return new Select_1.Select(this.ctx, this.getByLabel(label));
+    }
+    getMultiSelect(label) {
+        return new MultiSelect_1.MultiSelect(this.ctx, this.getByLabel(label));
+    }
+    getColorPicker(label) {
+        return new ColorPicker_1.ColorPicker(this.ctx, this.getByLabel(label));
+    }
+    getUnitPicker(label) {
+        return new UnitPicker_1.UnitPicker(this.ctx, this.getByLabel(label));
+    }
+    getByLabel(optionLabel) {
+        return this.element.getByLabel(`${this.groupLabel} ${optionLabel} field property editor`);
+    }
+}
+exports.PanelEditOptionsGroup = PanelEditOptionsGroup;

package/dist/models/components/RadioGroup.d.ts

@@ -0,0 +1,8 @@
+import { Locator } from '@playwright/test';
+import { ComponentBase } from './ComponentBase';
+import { CheckOptionsType } from './types';
+import { PluginTestCtx } from '../../types';
+export declare class RadioGroup extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    check(labelOrValue: string, options?: CheckOptionsType): Promise<void>;
+}

package/dist/models/components/RadioGroup.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const ComponentBase_1 = require("./ComponentBase");
+const semver_1 = require("semver");
+class RadioGroup extends ComponentBase_1.ComponentBase {
+    constructor(ctx, element) {
+        super(ctx, element);
+    }
+    async check(labelOrValue, options) {
+        if ((0, semver_1.gte)(this.ctx.grafanaVersion, '10.2.0')) {
+            return this.element.getByLabel(labelOrValue, { exact: true }).check(options);
+        }
+        return this.element.getByText(labelOrValue, { exact: true }).check(options);
+    }
+}
+exports.RadioGroup = RadioGroup;

package/dist/models/components/Select.d.ts

@@ -0,0 +1,10 @@
+import { Locator } from '@playwright/test';
+import { ComponentBase } from './ComponentBase';
+import { SelectOptionsType } from './types';
+import { PluginTestCtx } from '../../types';
+export declare class Select extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    selectOption(values: string, options?: SelectOptionsType): Promise<string>;
+}
+export declare function openSelect(component: ComponentBase, options?: SelectOptionsType): Promise<Locator>;
+export declare function selectByValueOrLabel(labelOrValue: string, menu: Locator, ctx: PluginTestCtx, options?: SelectOptionsType): Promise<string>;

package/dist/models/components/Select.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+exports.openSelect = openSelect;
+exports.selectByValueOrLabel = selectByValueOrLabel;
+const ComponentBase_1 = require("./ComponentBase");
+const semver_1 = require("semver");
+const utils_1 = require("../utils");
+class Select extends ComponentBase_1.ComponentBase {
+    constructor(ctx, element) {
+        super(ctx, element);
+    }
+    async selectOption(values, options) {
+        const menu = await openSelect(this, options);
+        return selectByValueOrLabel(values, menu, this.ctx, options);
+    }
+}
+exports.Select = Select;
+async function openSelect(component, options) {
+    const element = component.locator();
+    const selectors = component.ctx.selectors;
+    await element.getByRole('combobox').click(options);
+    return element.page().locator((0, utils_1.resolveGrafanaSelector)(selectors.components.Select.menu));
+}
+async function selectByValueOrLabel(labelOrValue, menu, ctx, options) {
+    const option = getOption(menu, ctx).getByText(labelOrValue, { exact: true });
+    const value = await option.textContent(options);
+    await option.click(options);
+    if (!value) {
+        throw new Error(`Could not select option: "${labelOrValue}"`);
+    }
+    return value;
+}
+function getOption(menu, ctx) {
+    if ((0, semver_1.gte)(ctx.grafanaVersion, '11.0.0')) {
+        return menu.getByRole('option');
+    }
+    return menu.getByLabel('Select option');
+}

package/dist/models/components/Switch.d.ts

@@ -0,0 +1,12 @@
+import { Locator } from '@playwright/test';
+import { ComponentBase } from './ComponentBase';
+import { CheckOptionsType } from './types';
+import { PluginTestCtx } from '../../types';
+export 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;
+}

package/dist/models/components/Switch.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const ComponentBase_1 = require("./ComponentBase");
+const semver_1 = require("semver");
+class Switch extends ComponentBase_1.ComponentBase {
+    group;
+    constructor(ctx, group) {
+        super(ctx, Switch.getElement(ctx, group));
+        this.group = group;
+    }
+    static getElement(ctx, group) {
+        if ((0, semver_1.gte)(ctx.grafanaVersion, '11.5.0')) {
+            return group.getByRole('switch');
+        }
+        else {
+            return group.getByRole('checkbox');
+        }
+    }
+    async check(options) {
+        const target = await this.getSwitch(options);
+        return target.check({ force: true, ...options });
+    }
+    async uncheck(options) {
+        const target = await this.getSwitch(options);
+        return target.uncheck({ force: true, ...options });
+    }
+    async getSwitch(options) {
+        if ((0, semver_1.lt)(this.ctx.grafanaVersion, '11.3.0')) {
+            const id = await this.element.getAttribute('id', options);
+            return this.group.locator(`label[for='${id}']`);
+        }
+        return this.element;
+    }
+}
+exports.Switch = Switch;

package/dist/models/components/UnitPicker.d.ts

@@ -0,0 +1,9 @@
+import { Locator } from '@playwright/test';
+import { PluginTestCtx } from '../../types';
+import { SelectOptionsType } from './types';
+import { ComponentBase } from './ComponentBase';
+export declare class UnitPicker extends ComponentBase {
+    constructor(ctx: PluginTestCtx, element: Locator);
+    selectOption(value: string, options?: SelectOptionsType): Promise<void>;
+    private getOption;
+}

package/dist/models/components/UnitPicker.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnitPicker = void 0;
+const ComponentBase_1 = require("./ComponentBase");
+class UnitPicker extends ComponentBase_1.ComponentBase {
+    constructor(ctx, element) {
+        super(ctx, element);
+    }
+    async selectOption(value, options) {
+        await this.element.getByRole('textbox').click();
+        const option = await this.getOption(value, options);
+        await option.click(options);
+    }
+    async getOption(selector, options) {
+        const steps = selector.split('>').map((step) => step.trim());
+        const container = this.ctx.page.locator(this.ctx.selectors.constants.Cascader.menu(''));
+        if (steps.length === 0) {
+            throw new Error(`Could not find options from passed selector: ${selector}`);
+        }
+        const last = steps.pop();
+        for (const step of steps) {
+            await container.getByTitle(step, { exact: true }).click(options);
+        }
+        return container.getByRole('menuitemcheckbox', { exact: true, name: last });
+    }
+}
+exports.UnitPicker = UnitPicker;

package/dist/models/components/types.d.ts

@@ -0,0 +1,3 @@
+import { Locator } from '@playwright/test';
+export type SelectOptionsType = Parameters<Locator['selectOption']>[1];
+export type CheckOptionsType = Parameters<Locator['check']>[0];

package/dist/models/components/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/models/pages/GrafanaPage.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GrafanaPage = void 0;
+const utils_1 = require("../utils");
 /**
  * Base class for all Grafana pages.
  *
@@ -29,11 +30,7 @@ class GrafanaPage {
      * An E2E selector is a string that identifies a specific element in the Grafana UI. The element referencing the E2E selector use the data-testid or aria-label attribute.
      */
     getByGrafanaSelector(selector, options) {
-        const startsWith = options?.startsWith ? '^' : '';
-        if (selector.startsWith('data-testid')) {
-            return (options?.root || this.ctx.page).locator(`[data-testid${startsWith}="${selector}"]`);
-        }
-        return (options?.root || this.ctx.page).locator(`[aria-label${startsWith}="${selector}"]`);
+        return (options?.root ?? this.ctx.page).locator((0, utils_1.resolveGrafanaSelector)(selector, options));
     }
     /**
      * Mocks the response of the datasource query call

package/dist/models/pages/PanelEditPage.d.ts

@@ -5,6 +5,7 @@ import { GrafanaPage } from './GrafanaPage';
 import { TimeRange } from '../components/TimeRange';
 import { Panel } from '../components/Panel';
 import { DashboardPage } from './DashboardPage';
+import { PanelEditOptionsGroup } from '../components/PanelEditOptionsGroup';
 export declare class PanelEditPage extends GrafanaPage {
     readonly ctx: PluginTestCtx;
     readonly args: DashboardEditViewArgs<string>;
@@ -63,4 +64,11 @@ export declare class PanelEditPage extends GrafanaPage {
       })
      */
     refreshPanel(options?: RequestOptions): Promise<Response>;
+    /** Return page object for the panel edit options group with the given label */
+    getCustomOptions(label: string): PanelEditOptionsGroup;
+    getStandardOptions(): PanelEditOptionsGroup;
+    getValueMappingOptions(): PanelEditOptionsGroup;
+    getDataLinksOptions(): PanelEditOptionsGroup;
+    getThresholdsOptions(): PanelEditOptionsGroup;
+    private getOptionsGroupLocator;
 }

package/dist/models/pages/PanelEditPage.js

@@ -32,6 +32,7 @@ const TimeRange_1 = require("../components/TimeRange");
 const Panel_1 = require("../components/Panel");
 const utils_1 = require("../utils");
 const DashboardPage_1 = require("./DashboardPage");
+const PanelEditOptionsGroup_1 = require("../components/PanelEditOptionsGroup");
 class PanelEditPage extends GrafanaPage_1.GrafanaPage {
     ctx;
     args;
@@ -99,7 +100,6 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
      * Sets the visualization for the panel. This method will open the visualization picker, select the given visualization
      */
     async setVisualization(visualization) {
-        // toggle options pane if panel edit is not visible
         const showPanelEditElement = this.getByGrafanaSelector('Show options pane');
         const showPanelEditElementCount = await showPanelEditElement.count();
         if (showPanelEditElementCount > 0) {
@@ -178,5 +178,26 @@ class PanelEditPage extends GrafanaPage_1.GrafanaPage {
         await refreshPanelButton.click();
         return responsePromise;
     }
+    /** Return page object for the panel edit options group with the given label */
+    getCustomOptions(label) {
+        const locator = this.getOptionsGroupLocator(label);
+        return new PanelEditOptionsGroup_1.PanelEditOptionsGroup(this.ctx, locator, label);
+    }
+    getStandardOptions() {
+        return this.getCustomOptions('Standard options');
+    }
+    getValueMappingOptions() {
+        return this.getCustomOptions('Value mappings');
+    }
+    getDataLinksOptions() {
+        return this.getCustomOptions('Data links');
+    }
+    getThresholdsOptions() {
+        return this.getCustomOptions('Thresholds');
+    }
+    getOptionsGroupLocator(label) {
+        const { selectors } = this.ctx;
+        return this.getByGrafanaSelector(selectors.components.OptionsGroup.group(label));
+    }
 }
 exports.PanelEditPage = PanelEditPage;

package/dist/models/utils.d.ts

@@ -1,4 +1,6 @@
 import { Page } from '@playwright/test';
+import { getByGrafanaSelectorOptions } from '../types';
 export declare const radioButtonSetChecked: (page: Page, label: string, checked: boolean, options?: {
     exact?: boolean;
 }) => Promise<void>;
+export declare function resolveGrafanaSelector(selector: string, options?: Omit<getByGrafanaSelectorOptions, 'root'>): string;

package/dist/models/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.radioButtonSetChecked = void 0;
+exports.resolveGrafanaSelector = resolveGrafanaSelector;
 const radioButtonSetChecked = async (page, label, checked, options) => {
     try {
         await page.getByLabel(label, options).setChecked(checked, { timeout: 1000 });
@@ -10,3 +11,10 @@ const radioButtonSetChecked = async (page, label, checked, options) => {
     }
 };
 exports.radioButtonSetChecked = radioButtonSetChecked;
+function resolveGrafanaSelector(selector, options) {
+    const startsWith = options?.startsWith ? '^' : '';
+    if (selector.startsWith('data-testid')) {
+        return `[data-testid${startsWith}="${selector}"]`;
+    }
+    return `[aria-label${startsWith}="${selector}"]`;
+}

package/dist/selectors/versionedConstants.d.ts

@@ -5,5 +5,18 @@ export declare const versionedConstants: {
             "8.0.0": string;
         };
     };
+    Select: {
+        singleValueContainer: {
+            "8.0.0": () => string;
+        };
+        multiValueContainer: {
+            "8.0.0": () => string;
+        };
+    };
+    Cascader: {
+        menu: {
+            "8.0.0": () => string;
+        };
+    };
 };
 export type VersionedConstants = typeof versionedConstants;

package/dist/selectors/versionedConstants.js

@@ -9,4 +9,17 @@ exports.versionedConstants = {
             [minGrafanaVersion_1.MIN_GRAFANA_VERSION]: 'Add panel button',
         },
     },
+    Select: {
+        singleValueContainer: {
+            [minGrafanaVersion_1.MIN_GRAFANA_VERSION]: () => 'div[class*="-grafana-select-value-container"] > div[class*="-singleValue"]',
+        },
+        multiValueContainer: {
+            [minGrafanaVersion_1.MIN_GRAFANA_VERSION]: () => 'div[class*="-grafana-select-multi-value-container"] > div',
+        },
+    },
+    Cascader: {
+        menu: {
+            [minGrafanaVersion_1.MIN_GRAFANA_VERSION]: () => 'div[class="rc-cascader-menus"]',
+        },
+    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-e2e",
-  "version": "1.14.6",
+  "version": "1.15.0-canary.1272.059bc30.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -57,5 +57,5 @@
       "start": "cls || clear"
     }
   },
-  "gitHead": "6147743f845b51b8bc6177ca96d1ee15c9c93cc9"
+  "gitHead": "059bc3077b626742df226a7a19afa22277d0653c"
 }