Plugin E2E: Add missing components to the components fixture by mckn · Pull Request #2621 · grafana/plugin-tools

mckn · 2026-05-08T07:27:14Z

What this PR does / why we need it:

Follow-up to #2583. Adds six more Grafana UI components to the components fixture: Select, MultiSelect, Switch, RadioGroup, UnitPicker, and ColorPicker. Each component gets a static getContainer() method for version-conditional container resolution and a within(root) method for DOM scoping, matching the pattern established by dataSourcePicker and timeRangePicker.

Uses CSS/structural fallback selectors that work across all supported Grafana versions (8.5+). Once grafana/grafana#124120 merges and @grafana/e2e-selectors is updated, a follow-up will add data-testid container selectors for Grafana >= 13.1.0. The six component classes are also now exported from the package public API.

Which issue(s) this PR fixes:

Follows up on #2583 and depends on grafana/grafana#124120 for stable container selectors.

Special notes for your reviewer:

switch is used as a property name on the Components class. It's a JS reserved word but valid as a property name in ES6+ class definitions.
The fallback CSS selectors (e.g. [class*="-grafana-select-value-container"]) rely on Grafana's Emotion-generated class naming convention and will be replaced by stable data-testid selectors in a follow-up.
MultiSelect test is deferred — no provisioned panel currently uses a multi-select option.

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install website@5.6.0-canary.2621.25785032127.0
npm install @grafana/plugin-e2e@3.8.0-canary.2621.25785032127.0
# or 
yarn add website@5.6.0-canary.2621.25785032127.0
yarn add @grafana/plugin-e2e@3.8.0-canary.2621.25785032127.0

github-actions · 2026-05-08T07:27:33Z

Hello! 👋 This repository uses Auto for releasing packages using PR labels.

✨ This PR can be merged and will trigger a new minor release.
NOTE: When merging a PR with the release label please avoid merging another PR. For further information see here.

cla-assistant · 2026-05-08T07:27:45Z

All committers have signed the CLA.

cla-assistant · 2026-05-08T07:27:50Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

Marcus Andersson seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

Copilot

Pull request overview

Adds additional Grafana UI component wrappers to the components fixture in @grafana/plugin-e2e so tests can interact with common controls (Select, MultiSelect, Switch, RadioGroup, UnitPicker, ColorPicker) on arbitrary pages, using within(root) scoping similar to existing dataSourcePicker and timeRangePicker.

Changes:

Add getContainer() + within(root) support for six component models (Select, MultiSelect, Switch, RadioGroup, UnitPicker, ColorPicker).
Extend Components fixture to expose these components and export them from the package public API.
Add e2e coverage for the new fixture entries (except MultiSelect, per PR notes).

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/plugin-e2e/tests/as-admin-user/components/components.spec.ts	Adds e2e tests validating new `components.*.within(...)` helpers.
packages/plugin-e2e/src/models/components/UnitPicker.ts	Adds `getContainer()` + `within()` for UnitPicker scoping.
packages/plugin-e2e/src/models/components/Switch.ts	Adds version-conditional `getContainer()` + `within()` for Switch scoping.
packages/plugin-e2e/src/models/components/Select.ts	Adds `getContainer()` + `within()` for Select scoping.
packages/plugin-e2e/src/models/components/RadioGroup.ts	Adds version-conditional `getContainer()` + `within()` for RadioGroup scoping.
packages/plugin-e2e/src/models/components/MultiSelect.ts	Adds `getContainer()` + `within()` for MultiSelect scoping.
packages/plugin-e2e/src/models/components/ColorPicker.ts	Adds `getContainer()` + `within()` for ColorPicker scoping.
packages/plugin-e2e/src/models/Components.ts	Adds new component instances to the `components` fixture.
packages/plugin-e2e/src/index.ts	Exports the new component classes from the public API.

…and ColorPicker to components fixture Extends the components fixture introduced in #2583 with six additional Grafana UI components. Each component gets a static getContainer() for version-conditional container resolution and a within(root) method for DOM scoping. Uses CSS/structural fallback selectors for all Grafana versions; data-testid selectors will be added once grafana/grafana#124120 merges and @grafana/e2e-selectors is updated. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

selectOption() and toHaveColor() both expect the element to be a parent container that wraps the swatch button, not the swatch itself. The colorswatch data-testid lives on the swatch element, so we traverse up one level to match the expected scope. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

The toHaveSelected matcher uses CSS descendant queries that start from the value container class (e.g. div[class*="-grafana-select-value-container"]). Since Playwright's locator() searches descendants only, the element must be a parent that *contains* the value container, not the container itself. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Broad container selectors can match multiple elements on a page. Adding .first() prevents Playwright strict-mode errors when consumers use the unscoped component instance. When scoped via within(root), the root typically narrows to a single match so .first() is harmless. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ColorPicker: Pass root directly as element when within(root) is used. The swatch parent is too deep for toHaveColor() which expects the field-level container containing both the swatch button and color value input. This matches PanelEditOptionsGroup.getColorPicker() behavior. RadioGroup: Broaden the < 10.0 fallback selector to also match radio inputs as direct children (not just nested). The clock panel uses direct children with custom name attributes, not the Grafana core name="radiogroup-N" pattern. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Bumps @grafana/e2e-selectors to 13.1.0-25893932881 which includes the new stable container data-testids from grafana/grafana#124120. Each getContainer() now uses the data-testid selector for >= 13.1.0 and falls back to CSS/structural selectors for older versions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-05-18T10:04:44Z

Playwright test results

Image Name	Version	Result	Report
grafana-enterprise	nightly	❌	View report
grafana-enterprise	dev-preview-react19	❌	View report
grafana-enterprise	13.0.1	✅
grafana-enterprise	12.1.10	✅
grafana-enterprise	11.0.11	✅
grafana-enterprise	9.3.16	✅
grafana-enterprise	8.5.27	✅

Troubleshooting

404 when clicking on `View report`

By default, the deploy-report-pages Action deploys reports to the gh-pages branch. However, you need to take an extra step to ensure that GitHub Pages can build and serve the site from this branch. To do so:

Go to the Settings tab of your repository.
In the left-hand sidebar, click on Pages.
Under Source, select Deploy from a branch, then choose the gh-pages branch.

This action needs to be completed manually in order for your GitHub Pages site to be built and accessible from the gh-pages branch. Once configured, GitHub will automatically build and serve the site whenever new reports are deployed.

Copilot AI review requested due to automatic review settings May 8, 2026 07:27

mckn requested a review from a team as a code owner May 8, 2026 07:27

mckn requested a review from leventebalogh May 8, 2026 07:27

github-project-automation Bot added this to Grafana Catalog Team May 8, 2026

github-project-automation Bot moved this to 📬 Triage in Grafana Catalog Team May 8, 2026

Copilot started reviewing on behalf of mckn May 8, 2026 07:27 View session

grafana-plugins-platform-bot Bot moved this from 📬 Triage to 🔬 In review in Grafana Catalog Team May 8, 2026

Copilot AI reviewed May 8, 2026

View reviewed changes

mckn self-assigned this May 11, 2026

mckn added the minor Increment the minor version when merged label May 11, 2026

mckn force-pushed the mckn/add-missing-components branch from 17846f8 to 850a184 Compare May 11, 2026 15:27

mckn mentioned this pull request May 12, 2026

Plugin E2E: Select MultiSelect options sequentially #2626

Merged

mckn force-pushed the mckn/add-missing-components branch from 80752bf to 0e80786 Compare May 12, 2026 07:51

mckn added the release Create a release when this pr is merged label May 12, 2026

mckn force-pushed the mckn/add-missing-components branch 2 times, most recently from eb99aae to 38d9b01 Compare May 12, 2026 15:34

mckn requested a review from sunker May 12, 2026 15:34

mckn force-pushed the mckn/add-missing-components branch 2 times, most recently from 23a2fc7 to 7ebd852 Compare May 13, 2026 07:31

Marcus Andersson and others added 6 commits May 18, 2026 08:50

chore: re-trigger CI

75fd524

mckn force-pushed the mckn/add-missing-components branch from 7ebd852 to 75fd524 Compare May 18, 2026 06:50

mckn requested a review from a team as a code owner May 18, 2026 06:50

mckn requested review from oshirohugo and removed request for a team May 18, 2026 06:50

mckn requested a review from a team as a code owner May 18, 2026 09:11

mckn requested review from ashharrison90 and jackw and removed request for a team May 18, 2026 09:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plugin E2E: Add missing components to the components fixture#2621

Plugin E2E: Add missing components to the components fixture#2621
mckn wants to merge 7 commits into
mainfrom
mckn/add-missing-components

mckn commented May 8, 2026 •

edited by grafana-plugins-platform-bot Bot

Loading

Uh oh!

github-actions Bot commented May 8, 2026 •

edited

Loading

Uh oh!

cla-assistant Bot commented May 8, 2026 •

edited

Loading

Uh oh!

cla-assistant Bot commented May 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 18, 2026

404 when clicking on `View report`

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

mckn commented May 8, 2026 • edited by grafana-plugins-platform-bot Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cla-assistant Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cla-assistant Bot commented May 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 18, 2026

Playwright test results

404 when clicking on View report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mckn commented May 8, 2026 •

edited by grafana-plugins-platform-bot Bot

Loading

github-actions Bot commented May 8, 2026 •

edited

Loading

cla-assistant Bot commented May 8, 2026 •

edited

Loading

404 when clicking on `View report`