E2E: Improve support to interact with panel edit options

packages/plugin-e2e/docker-compose.yaml

@@ -7,6 +7,7 @@ services:
       - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
       - GF_AUTH_ANONYMOUS_ORG_NAME=Main Org.
       - GF_AUTH_ANONYMOUS_ORG_ID=1
+      - GF_PANELS_ENABLE_ALPHA=true
       - GOOGLE_JWT_FILE=${GOOGLE_JWT_FILE}
       - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY}
       - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID}

packages/plugin-e2e/src/index.ts

@@ -35,6 +35,15 @@ import { GrafanaPage } from './models/pages/GrafanaPage';
 import { VariableEditPage } from './models/pages/VariableEditPage';
 import { variablePage } from './fixtures/variablePage';
 import { gotoVariablePage } from './fixtures/commands/gotoVariablePage';
+import { toHaveSelected } from './matchers/toHaveSelected';
+import { Select } from './models/components/Select';
+import { Switch } from './models/components/Switch';
+import { toBeSwitched } from './matchers/toBeSwitched';
+import { RadioGroup } from './models/components/RadioGroup';
+import { toHaveChecked } from './matchers/toHaveChecked';
+import { MultiSelect } from './models/components/MultiSelect';
+import { toHaveColor } from './matchers/toHaveColor';
+import { ColorPicker, SelectableColors } from './models/components/ColorPicker';
 
 // models
 export { DataSourcePicker } from './models/components/DataSourcePicker';
@@ -92,6 +101,10 @@ export const expect = baseExpect.extend({
   toHaveAlert,
   toDisplayPreviews,
   toBeOK,
+  toHaveSelected,
+  toBeSwitched,
+  toHaveChecked,
+  toHaveColor,
 });
 
 export { selectors } from '@playwright/test';
@@ -131,6 +144,30 @@ 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)
+       */
+      toBeSwitched(target: Switch, 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, color: SelectableColors, options?: { timeout?: number }): Promise<R>;
     }
   }
 }

packages/plugin-e2e/src/matchers/toBeSwitched.ts

@@ -0,0 +1,25 @@
+import { expect, MatcherReturnType } from '@playwright/test';
+import { getMessage } from './utils';
+
+import { Switch } from '../models/components/Switch';
+
+export async function toBeSwitched(
+  target: Switch,
+  options?: { on?: boolean; timeout?: number }
+): Promise<MatcherReturnType> {
+  const expected = options?.on ?? true;
+  try {
+    await expect(target.locator()).toBeChecked({ ...options, checked: expected });
+
+    return {
+      pass: true,
+      expected,
+      message: () => `Value successfully selected`,
+    };
+  } catch (err: unknown) {
+    return {
+      message: () => getMessage(expected.toString(), err instanceof Error ? err.toString() : 'Unknown error'),
+      pass: false,
+    };
+  }
+}

packages/plugin-e2e/src/matchers/toHaveChecked.ts

@@ -0,0 +1,25 @@
+import { expect, MatcherReturnType } from '@playwright/test';
+import { getMessage } from './utils';
+
+import { RadioGroup } from '../models/components/RadioGroup';
+
+export async function toHaveChecked(
+  radioGroup: RadioGroup,
+  expected: string,
+  options?: { timeout?: number }
+): Promise<MatcherReturnType> {
+  try {
+    await expect(radioGroup.locator().getByLabel(expected)).toBeChecked(options);
+
+    return {
+      pass: true,
+      expected,
+      message: () => `Value successfully selected`,
+    };
+  } catch (err: unknown) {
+    return {
+      message: () => getMessage(expected.toString(), err instanceof Error ? err.toString() : 'Unknown error'),
+      pass: false,
+    };
+  }
+}

packages/plugin-e2e/src/matchers/toHaveColor.ts

@@ -0,0 +1,25 @@
+import { expect, MatcherReturnType } from '@playwright/test';
+import { getMessage } from './utils';
+
+import { ColorPicker, SelectableColors } from '../models/components/ColorPicker';
+
+export async function toHaveColor(
+  colorPicker: ColorPicker,
+  color: SelectableColors,
+  options?: { timeout?: number }
+): Promise<MatcherReturnType> {
+  try {
+    await expect(colorPicker.locator().getByRole('textbox')).toHaveValue(color, options);
+
+    return {
+      pass: true,
+      expected: color,
+      message: () => `Value successfully selected`,
+    };
+  } catch (err: unknown) {
+    return {
+      message: () => getMessage(color, err instanceof Error ? err.toString() : 'Unknown error'),
+      pass: false,
+    };
+  }
+}

packages/plugin-e2e/src/matchers/toHaveSelected.ts

@@ -0,0 +1,126 @@
+import { expect, MatcherReturnType } from '@playwright/test';
+import { getMessage } from './utils';
+import { ContainTextOptions } from '../types';
+
+import { Select } from '../models/components/Select';
+import { MultiSelect } from '../models/components/MultiSelect';
+import { UnitPicker } from '../models/components/UnitPicker';
+
+export async function toHaveSelected(
+  target: Select | MultiSelect | UnitPicker,
+  value: string | RegExp | string[] | RegExp[],
+  options?: ContainTextOptions
+): Promise<MatcherReturnType> {
+  if (target instanceof MultiSelect) {
+    if (Array.isArray(value)) {
+      return expectMultiSelectToBe(target, value);
+    }
+    return expectMultiSelectToBe(target, [value]);
+  }
+
+  if (target instanceof 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) {
+    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: Select,
+  value: string | RegExp,
+  options?: ContainTextOptions
+): Promise<MatcherReturnType> {
+  let actual = '';
+
+  try {
+    actual = await select
+      .locator('div[class*="-grafana-select-value-container"]')
+      .locator('div[class*="-singleValue"]')
+      .innerText(options);
+
+    expect(actual).toMatch(value);
+
+    return {
+      pass: true,
+      actual: actual,
+      expected: value,
+      message: () => `Value successfully selected`,
+    };
+  } catch (err: unknown) {
+    return {
+      message: () => getMessage(value.toString(), err instanceof Error ? err.toString() : 'Unknown error'),
+      pass: false,
+      actual,
+    };
+  }
+}
+
+async function expectMultiSelectToBe(select: MultiSelect, values: Array<string | RegExp>): Promise<MatcherReturnType> {
+  let actual = '';
+
+  try {
+    const actual = await select
+      .locator('div[class*="-grafana-select-multi-value-container"]')
+      .locator('div[class*="-grafana-select-multi-value-container"] > div')
+      .allInnerTexts();
+
+    expect(actual).toMatchObject(values);
+
+    return {
+      pass: true,
+      actual: actual,
+      expected: values,
+      message: () => `Values successfully selected`,
+    };
+  } catch (err: unknown) {
+    return {
+      message: () => getMessage(values.join(', '), err instanceof Error ? err.toString() : 'Unknown error'),
+      pass: false,
+      actual,
+      expected: values,
+    };
+  }
+}
+
+async function expectUnitPickerToBe(
+  unitPicker: UnitPicker,
+  value: string | RegExp,
+  options?: ContainTextOptions
+): Promise<MatcherReturnType> {
+  let actual = '';
+
+  try {
+    const input = unitPicker.locator().getByRole('textbox');
+
+    actual = await input.inputValue(options);
+    await expect(input).toHaveValue(value);
+
+    return {
+      pass: true,
+      actual: actual,
+      expected: value,
+      message: () => `Value successfully selected`,
+    };
+  } catch (err: unknown) {
+    return {
+      message: () => getMessage(value.toString(), err instanceof Error ? err.toString() : 'Unknown error'),
+      pass: false,
+      actual,
+    };
+  }
+}

packages/plugin-e2e/src/models/components/ColorPicker.ts

@@ -0,0 +1,20 @@
+import { Locator } from '@playwright/test';
+import { PluginTestCtx } from '../../types';
+import { ComponentBase } from './ComponentBase';
+import { SelectOptionsType } from './types';
+
+export type SelectableColors = 'red' | 'blue' | 'orange' | 'green' | 'yellow';
+
+export class ColorPicker extends ComponentBase {
+  constructor(private ctx: PluginTestCtx, element: Locator) {
+    super(element);
+  }
+
+  async selectOption(color: SelectableColors, options?: SelectOptionsType): Promise<void> {
+    await this.element.getByRole('button').click(options);
+    await this.ctx.page
+      .locator('#grafana-portal-container')
+      .getByRole('button', { name: `${color} color`, exact: true })
+      .click(options);
+  }
+}

packages/plugin-e2e/src/models/components/ComponentBase.ts

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

packages/plugin-e2e/src/models/components/MultiSelect.ts

@@ -0,0 +1,20 @@
+import { Locator } from '@playwright/test';
+import { openSelect, selectByValueOrLabel } from './Select';
+import { ComponentBase } from './ComponentBase';
+import { SelectOptionsType } from './types';
+
+export class MultiSelect extends ComponentBase {
+  constructor(element: Locator) {
+    super(element);
+  }
+
+  async selectOptions(values: string[], options?: SelectOptionsType): Promise<string[]> {
+    const menu = await openSelect(this.element, options);
+
+    return Promise.all(
+      values.map((value) => {
+        return selectByValueOrLabel(value, menu, options);
+      })
+    );
+  }
+}

packages/plugin-e2e/src/models/components/PanelEditOptionsGroup.ts

@@ -0,0 +1,59 @@
+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 { gte } from 'semver';
+import { RadioGroup } from './RadioGroup';
+
+export class PanelEditOptionsGroup {
+  constructor(private ctx: PluginTestCtx, public readonly element: Locator, private groupLabel: string) {}
+
+  getRadio(label: string): RadioGroup {
+    return new RadioGroup(this.getByLabel(label).getByRole('radiogroup'));
+  }
+
+  async getSwitch(label: string): Promise<Switch> {
+    if (gte(this.ctx.grafanaVersion, '11.4.0')) {
+      const id = await this.getByLabel(label).getByRole('switch').getAttribute('id');
+      return new Switch(this.getByLabel(label).locator(`label[for='${id}']`));
+    }
+
+    const id = await this.getByLabel(label).getByRole('checkbox').getAttribute('id');
+    return new Switch(this.getByLabel(label).locator(`label[for='${id}']`));
+  }
+
+  getTextInput(label: string): Locator {
+    return this.getByLabel(label).getByRole('textbox');
+  }
+
+  getNumberInput(label: string): Locator {
+    return this.getByLabel(label).getByRole('spinbutton');
+  }
+
+  getSliderInput(label: string): Locator {
+    return this.getNumberInput(label);
+  }
+
+  getSelect(label: string): Select {
+    return new Select(this.getByLabel(label));
+  }
+
+  getMultiSelect(label: string): MultiSelect {
+    return new MultiSelect(this.getByLabel(label));
+  }
+
+  getColorPicker(label: string): ColorPicker {
+    return new ColorPicker(this.ctx, this.getByLabel(label));
+  }
+
+  getUnitPicker(label: string): UnitPicker {
+    return new UnitPicker(this.ctx, this.getByLabel(label));
+  }
+
+  private getByLabel(optionLabel: string): Locator {
+    return this.element.getByLabel(`${this.groupLabel} ${optionLabel} field property editor`);
+  }
+}