Plugin E2E: Add components fixture with dataSourcePicker and timeRangePicker

[mckn]

What this PR does / why we need it:

Adds a components fixture that exposes eagerly-constructed Grafana UI components for use in tests on arbitrary pages — not just the ones covered by page-specific fixtures like PanelEditPage or ExplorePage.

Two components are exposed:

• components.dataSourcePicker — useful for tests that interact with a data source picker on any page (e.g. Grafana's exemplars test)
• components.timeRangePicker — useful for tests that set a time range on any page

Both components support a Playwright-style within(root) method for scoping to a specific DOM container (mirroring locator.locator(...)). The within() method is provided by a new shared ScopedComponent base class.

test('my test', async ({ components, panelEditPage }) => {
  await components.dataSourcePicker.set('gdev-prometheus');
  await components.timeRangePicker.set({ from: 'now-1h', to: 'now' });

  // or scoped to a container
  const panel = panelEditPage.getByGrafanaSelector(selectors.components.PanelEditor.General.content);
  await components.dataSourcePicker.within(panel).set('gdev-tempo');
});

Which issue(s) this PR fixes:

Special notes for your reviewer:

ScopedComponent is exported as part of the public API so plugin authors can subclass it for their own page-level components. Additional components can be added to Components following the same pattern.

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

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

[github-actions]

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.

[Copilot]

Pull request overview

Adds a new Playwright fixture for creating UI component model instances (starting with DataSourcePicker) without requiring page-specific fixtures or manual PluginTestCtx construction.

Changes:

• Extends PluginFixture with a new components: Components fixture.
• Introduces a Components factory model exposing getDataSourcePicker(root?).
• Wires the new components fixture into the exported test fixture set.

Reviewed changes

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

File	Description
packages/plugin-e2e/src/types.ts	Adds components: Components to the public fixture type and documents usage.
packages/plugin-e2e/src/models/Components.ts	New component factory class that constructs DataSourcePicker instances (optionally scoped by a root locator).
packages/plugin-e2e/src/index.ts	Exports Components and registers the new components fixture in test.extend(...).
packages/plugin-e2e/src/fixtures/components.ts	Implements the Playwright fixture that instantiates Components with PluginTestCtx.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

[sunker]

Nice Marcus!

It would be quite nice to instantiate all components under /models/components in the Components class constructor. That way the API would be closer to other plugin-e2e APIs:

test('my test', async ({ components }) => {
  await components.dataSourcePicker.set('prom');
});

Then to scope the component to another root than page, you'd use the same pattern as Playwright's locator.locator(...) - a within() helper that returns a scoped clone:

test('my test', async ({ components, panelEditPage }) => {
  const panel = panelEditPage.getPanelByTitle('My panel').locator;
  await components.dataSourcePicker.within(panel).set('prom');
});

To avoid repeating the within() boilerplate in every component, we could pull it into a small ScopedComponent base class that each component extends. Something like:

export abstract class ScopedComponent extends GrafanaPage {
  constructor(
    ctx: PluginTestCtx,
    protected readonly root?: Locator
  ) {
    super(ctx);
  }

  within(root: Locator): this {
    const Ctor = this.constructor as new (ctx: PluginTestCtx, root?: Locator) => this;
    return new Ctor(this.ctx, root);
  }
}

WDYT?

[sunker]

Approved, but there's one nit to fix

[github-actions]

Playwright test results

Image Name	Version	Result	Report
grafana-enterprise	nightly	✅
grafana-enterprise	dev-preview-react19	✅
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:

1. Go to the Settings tab of your repository.
2. In the left-hand sidebar, click on Pages.
3. 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.

[sunker]

🚀

[sunker]

Curious why we need this change?

[mckn]

It is because you can do the within which change the scope of the time picker. It should try to find the time picker within that new root element instead of the page.

Does this make sense?