@grafana/e2e-selectors

Stable test selectors for end-to-end tests. Source under packages/grafana-e2e-selectors/.

Why a separate package?

E2E tests need stable hooks into the UI that don't break when designers tweak markup or class names. Hard-coding [data-testid="..."] strings throughout tests is brittle. Instead, both the production UI and the test code consume a centralized selectors object, so refactors only need to update one place.

The package's src/selectors/components.ts is one of the larger files in the repo (~1,600 lines) — it enumerates every selector used by Playwright tests.

Usage

In a component:

import { selectors } from '@grafana/e2e-selectors';

<button data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>
  ...
</button>;

In a test:

import { selectors } from '@grafana/e2e-selectors';

await page
  .locator(`[data-testid="${selectors.pages.Dashboard.SubMenu.submenuItem}"]`)
  .click();

External plugins can also import from this package so their plugin tests stay aligned with Grafana's testing conventions.

See also

• How to contribute / Testing — Playwright section.