test(e2e): rewrite the variables-bar spec for V2

The V1 spec asserted against a bar that no longer exists. This rewrite covers the
V2 runtime bar end to end — pills and labels, ALL as the resolved default, "Only"
collapsing an ALL selection, adding a second value, commit-on-close, selection and
typed-text surviving a reload, single-select replacement, and the "+N" overflow with
its tooltip — and drops the spec's parked-specs.json entry, so from here the guard
forbids a skipped test in it.

Ten tests, no skips. The four `test.skip` placeholders the V1 file carried are gone:
three are covered for real here, and the fourth (drag-reorder) belongs to the
settings spec, not the bar.

Fetched variables (QUERY / DYNAMIC) are deliberately absent: their option lists come
from telemetry, and the behaviours only they can show — a selection surviving a
time-range refetch, a typed value surviving a dependency cascade — need seeded
traces plus the fix in #12416. Those follow in their own spec rather than as skips
here.

tests/e2e/helpers/dashboards-v2.ts

@@ -0,0 +1,299 @@
+import type { APIRequestContext, Locator, Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { authToken } from './dashboards';
+
+// Helpers for the V2 dashboard detail page (`DashboardPageV2`), which now serves
+// /dashboard/:id unconditionally. The V1 helpers in ./dashboards.ts still cover
+// seeding through the v1 API and the list page.
+//
+// Interaction contracts encoded here rather than in each spec:
+//   - a multi-select variable commits on dropdown CLOSE, not per toggle;
+//   - an ALL selection renders as an overlay reading "ALL", not as tags;
+//   - a variable is only settled once its options have arrived.
+
+export const dashboardV2Path = (id: string): string => `/dashboard/${id}`;
+
+/** Perses-style spec the v2 API stores. Only what the specs need is typed. */
+export interface DashboardV2Spec {
+	display: { name: string; description?: string };
+	layouts: unknown[];
+	panels: Record<string, unknown>;
+	variables: unknown[];
+	[key: string]: unknown;
+}
+
+export const SCHEMA_VERSION = 'v6';
+
+/** An empty but valid spec — the base every fixture spreads over. */
+export function emptyV2Spec(name: string): DashboardV2Spec {
+	return { display: { name }, layouts: [], panels: {}, variables: [] };
+}
+
+// ─── Seeding through the v2 API ───────────────────────────────────────────
+//
+// Specs seed the shape they assert against, rather than relying on whatever the
+// v1 -> v2 migration happens to produce or on telemetry that ambient data may or
+// may not contain. Migration output is covered on its own, from the v1 fixtures.
+
+export async function createDashboardV2ViaApi(
+	page: Page,
+	name: string,
+	spec?: Partial<DashboardV2Spec>,
+): Promise<string> {
+	const token = await authToken(page);
+	const res = await page.request.post('/api/v2/dashboards', {
+		data: {
+			name,
+			schemaVersion: SCHEMA_VERSION,
+			tags: [],
+			// `name` wins over any display name the fixture carries, so a fixture can be
+			// seeded twice under two titles and each spec can still find its own.
+			spec: {
+				...emptyV2Spec(name),
+				...spec,
+				display: { ...spec?.display, name },
+			},
+		},
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`POST /api/v2/dashboards ${res.status()}: ${await res.text()}`,
+		);
+	}
+	const body = (await res.json()) as { data?: { id?: string } };
+	const id = body.data?.id;
+	if (!id) {
+		throw new Error(
+			`POST /api/v2/dashboards returned no id: ${JSON.stringify(body)}`,
+		);
+	}
+	return id;
+}
+
+export async function getDashboardV2(
+	page: Page,
+	id: string,
+): Promise<{ spec: DashboardV2Spec; [key: string]: unknown }> {
+	const token = await authToken(page);
+	const res = await page.request.get(`/api/v2/dashboards/${id}`, {
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`GET /api/v2/dashboards/${id} ${res.status()}: ${await res.text()}`,
+		);
+	}
+	const body = (await res.json()) as {
+		data: { spec: DashboardV2Spec; [key: string]: unknown };
+	};
+	return body.data;
+}
+
+export async function deleteDashboardV2ViaApi(
+	request: APIRequestContext,
+	id: string,
+	token: string,
+): Promise<void> {
+	await request.delete(`/api/v2/dashboards/${id}`, {
+		headers: { Authorization: `Bearer ${token}` },
+	});
+}
+
+// ─── Variables bar ────────────────────────────────────────────────────────
+
+export const variablesBar = (page: Page): Locator =>
+	page.getByTestId('dashboard-variables-bar');
+
+/** The pill for one variable: its name, the control, and (while loading) a spinner. */
+export const variablePill = (page: Page, name: string): Locator =>
+	page.getByTestId(`variable-${name}`);
+
+/** List variables (query / custom / dynamic) — the select control. */
+export const variableControl = (page: Page, name: string): Locator =>
+	page.getByTestId(`variable-select-${name}`);
+
+/** Text variables — a plain input, not a select. */
+export const variableTextInput = (page: Page, name: string): Locator =>
+	page.getByTestId(`variable-input-${name}`);
+
+/**
+ * The bar collapses variables that do not fit into a "+N" button. At the config's
+ * 1280px viewport that starts with the second variable, so a spec asserting on
+ * several pills at once must widen the viewport:
+ *
+ *   test.use({ viewport: WIDE_VIEWPORT });
+ */
+export const WIDE_VIEWPORT = { width: 1920, height: 1080 };
+
+/**
+ * The overflow ("+N") tooltip listing the collapsed variables. `.first()` because the
+ * tooltip primitive renders its content twice — once visible, once as an a11y copy —
+ * so an unscoped locator is a strict-mode violation rather than a missing element.
+ */
+export const hiddenVariablesTooltip = (page: Page): Locator =>
+	page.getByTestId('hidden-variables-tooltip').first();
+
+/** Resolved when the variable's options have arrived and its spinner is gone. */
+export async function awaitVariableSettled(
+	page: Page,
+	name: string,
+): Promise<void> {
+	await expect(variablePill(page, name)).toBeVisible();
+	await expect(page.getByTestId(`variable-loading-${name}`)).toBeHidden();
+}
+
+/**
+ * What a list variable's closed control shows — "ALL" for an ALL selection, else its
+ * tags. Asserts the control exists first: a missing one (wrong name, or a text
+ * variable, which uses {@link variableTextInput}) otherwise hangs until the test
+ * times out with nothing to point at.
+ */
+export async function readVariableSelection(
+	page: Page,
+	name: string,
+): Promise<string> {
+	const pill = variablePill(page, name);
+	await expect(pill).toBeVisible();
+	// The ALL overlay sits in the control's wrapper, as a SIBLING of the element
+	// carrying the testid — scope from the pill, or an ALL selection reads as empty.
+	const allOverlay = pill.locator('.all-text');
+	if ((await allOverlay.count()) > 0 && (await allOverlay.isVisible())) {
+		return (await allOverlay.textContent())?.trim() ?? '';
+	}
+	return (await variableControl(page, name).innerText()).trim();
+}
+
+/** The open option list, whichever control opened it. */
+export const anyDropdown = (page: Page): Locator =>
+	page.locator('.custom-multiselect-dropdown, .custom-select-dropdown');
+
+export async function openVariableDropdown(
+	page: Page,
+	name: string,
+): Promise<void> {
+	await awaitVariableSettled(page, name);
+	await variableControl(page, name).click();
+	await expect(anyDropdown(page)).toBeVisible();
+}
+
+/**
+ * Close the open dropdown, which is what commits a multi-select edit. Pressing
+ * Escape leaves the control focused without re-opening it, unlike clicking away.
+ */
+export async function closeVariableDropdown(page: Page): Promise<void> {
+	// Escape closes it when the control still holds focus, which a row click can move.
+	// Falling back to a click outside covers that, and is what a user does anyway —
+	// either way the close is what commits the edit.
+	await page.keyboard.press('Escape');
+	if (await anyDropdown(page).first().isVisible()) {
+		await page.getByTestId('dashboard-title').click();
+	}
+	await expect(anyDropdown(page).first()).toBeHidden();
+}
+
+const escapeForRegExp = (value: string): string =>
+	value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * One option row in the open dropdown, matched on its label element rather than the
+ * row's accessible name: hovering reveals the Only / Toggle buttons, whose text joins
+ * that name, so a name-based locator stops matching halfway through an interaction.
+ */
+export function optionRow(page: Page, value: string): Locator {
+	const exact = new RegExp(`^${escapeForRegExp(value)}$`);
+	// Multi-select rows carry a `.option-label-text` and, once hovered, Only / Toggle
+	// buttons whose text would break an exact match on the row itself. Single-select
+	// rows have neither — just the label — so each shape needs its own matcher.
+	const multi = page
+		.locator('.custom-multiselect-dropdown .option-item')
+		.filter({ has: page.locator('.option-label-text', { hasText: exact }) });
+	const single = page
+		.locator('.custom-select-dropdown .option-item')
+		.filter({ hasText: exact });
+	return multi.or(single);
+}
+
+export async function pickVariableValues(
+	page: Page,
+	name: string,
+	values: string[],
+): Promise<void> {
+	await openVariableDropdown(page, name);
+	const [first, ...rest] = values;
+
+	// Start from the row's "Only" button rather than its checkbox: an ALL selection
+	// opens with every option checked, so a click would UNcheck the wanted value and
+	// leave the rest selected. "Only" collapses to exactly this option either way,
+	// and the clear icon is deliberately unavailable while the draft is all.
+	// Wait for each target to be visible before acting: the dropdown re-renders as
+	// options resolve, and a click on a row that is still arriving (or has just been
+	// replaced) hangs until the test times out.
+	const firstRow = optionRow(page, first);
+	await expect(firstRow).toBeVisible();
+	await firstRow.hover();
+	const onlyButton = firstRow.locator('.only-btn');
+	await expect(onlyButton).toBeVisible();
+	await onlyButton.click();
+
+	// Additional values then add to that selection. Click the row's checkbox, not the
+	// row: the row body carries no toggle handler, so clicking it leaves the option
+	// unchecked and the value silently absent from the commit.
+	for (const value of rest) {
+		const row = optionRow(page, value);
+		await expect(row).toBeVisible();
+		const checkbox = row.locator('.option-checkbox');
+		if ((await checkbox.count()) > 0) {
+			await checkbox.first().click();
+		} else {
+			await row.click();
+		}
+	}
+	await closeVariableDropdown(page);
+}
+
+/** Type a value the option list does not offer, and commit it. */
+export async function typeVariableValue(
+	page: Page,
+	name: string,
+	value: string,
+): Promise<void> {
+	await openVariableDropdown(page, name);
+	await page.keyboard.type(value);
+	const dropdown = page.locator('.custom-multiselect-dropdown');
+	await dropdown.getByText(value, { exact: true }).first().click();
+	await closeVariableDropdown(page);
+}
+
+// ─── Panels and sections ──────────────────────────────────────────────────
+
+export const panelByTitle = (page: Page, title: string): Locator =>
+	page.locator('[data-panel-id]').filter({ hasText: title });
+
+export const sectionByName = (page: Page, name: string): Locator =>
+	page.locator('[data-section-id]').filter({ hasText: name });
+
+/** Resolved when no panel on the page is still fetching. */
+export async function awaitPanelsSettled(page: Page): Promise<void> {
+	await expect(page.getByTestId('panel-refetching')).toHaveCount(0);
+}
+
+/**
+ * The values currently checked in a multi-select's list, read from the open dropdown —
+ * the closed control shows at most one tag plus a "+N", so it cannot confirm a
+ * multi-value selection on its own. Excludes the aggregate ALL row.
+ */
+export async function readCheckedOptions(
+	page: Page,
+	name: string,
+): Promise<string[]> {
+	await openVariableDropdown(page, name);
+	const labels = await page
+		.locator(
+			'.custom-multiselect-dropdown .option-item[aria-selected="true"]:not(.all-option) .option-label-text',
+		)
+		.allInnerTexts();
+	await closeVariableDropdown(page);
+	return labels.map((label) => label.trim());
+}

tests/e2e/package.json

@@ -21,6 +21,7 @@
     "fmt:check": "oxfmt --check .",
     "lint": "oxlint .",
     "lint:fix": "oxlint . --fix",
+    "guard:specs": "node scripts/guard-specs.mjs",
     "typecheck": "tsc --noEmit"
   },
   "keywords": [

tests/e2e/parked-specs.json

@@ -0,0 +1,20 @@
+{
+	"$comment": "Specs not currently running, and why. This is the ONLY place a spec may be excluded from the suite: `playwright.config.ts` feeds `specs` to `testIgnore`, and `pnpm guard:specs` fails if any spec that is NOT listed here contains a skipped, fixme'd or .only test. So a spec is either running and complete, or parked here with a reason — nothing rots quietly in between. Every entry is removed by the PR that migrates it; the list only shrinks.",
+	"specs": [
+		"**/tests/dashboards/list.spec.ts",
+		"**/tests/dashboards/details/03-viewing.spec.ts",
+		"**/tests/dashboards/details/12-sections.spec.ts",
+		"**/tests/dashboards/details/21-panel-actions.spec.ts",
+		"**/tests/dashboards/details/35-add-panel.spec.ts",
+		"**/tests/dashboards/details/44-edit-panel.spec.ts",
+		"**/tests/dashboards/details/56-time-range.spec.ts",
+		"**/tests/dashboards/details/78-edit-mode.spec.ts",
+		"**/tests/dashboards/details/87-configure.spec.ts",
+		"**/tests/dashboards/details/95-edge-cases.spec.ts",
+		"**/tests/trace-details/preview-fields.spec.ts"
+	],
+	"reasons": {
+		"**/tests/dashboards/**": "Written against V1 dashboard behaviour; the V1 -> V2 migration changed what they assert. Being rewritten area by area — see the E0-E8 plan.",
+		"**/tests/trace-details/preview-fields.spec.ts": "Entirely `describe.skip` since it was added: the hover card's preview field needs seeded telemetry the suite does not provide yet."
+	}
+}

tests/e2e/playwright.config.ts

@@ -2,22 +2,23 @@ import { defineConfig, devices } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
 
-// .env holds user-provided defaults (staging creds).
-// .env.local is written by tests/e2e/bootstrap/setup.py when the pytest
-// lifecycle brings the backend up locally; override=true so local-backend
-// coordinates win over any stale .env values. Subprocess-injected env
-// (e.g. when pytest shells out to `pnpm test`) still takes priority —
-// dotenv doesn't touch vars that are already set in process.env.
+import parkedSpecs from './parked-specs.json';
+
+// Precedence: real env > .env.local > .env. dotenv never overwrites a var that is
+// already set, so loading in that order gives local-backend coordinates (.env.local,
+// written by bootstrap/setup.py) priority over the staging defaults in .env, while an
+// explicitly exported var still wins over both — which is what lets a run be pointed
+// at another environment without editing a generated file.
+dotenv.config({ path: path.resolve(__dirname, '.env.local') });
 dotenv.config({ path: path.resolve(__dirname, '.env') });
-dotenv.config({ path: path.resolve(__dirname, '.env.local'), override: true });
 
 export default defineConfig({
 	testDir: './tests',
 
-	// Temporarily excluded: the V1 -> V2 dashboard migration changes the
-	// behaviour the dashboards specs assert against, so they fail as written.
-	// Remove this once they are updated for the V2 dashboard.
-	testIgnore: ['**/tests/dashboards/**'],
+	// Parked specs, listed one by one with a reason in parked-specs.json — not a
+	// blanket glob, so nothing new can land inside an excluded directory unnoticed.
+	// `pnpm guard:specs` keeps this list and the suite honest.
+	testIgnore: parkedSpecs.specs,
 
 	// All Playwright output lands under artifacts/. One subdir per reporter
 	// plus results/ for per-test artifacts (traces/screenshots/videos).

tests/e2e/scripts/guard-specs.mjs

@@ -0,0 +1,91 @@
+// Keeps the suite honest: a spec is either running and complete, or parked in
+// parked-specs.json with a reason. Fails on a skipped/fixme'd/only test in a spec that
+// is not parked, and on a parked entry that no longer matches anything.
+//
+// Run: pnpm guard:specs
+
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const parked = JSON.parse(
+	readFileSync(join(root, 'parked-specs.json'), 'utf8'),
+);
+
+/** Every *.spec.ts under tests/, repo-relative with forward slashes. */
+function specFiles(dir) {
+	return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+		const full = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			return specFiles(full);
+		}
+		return entry.name.endsWith('.spec.ts') ? [full] : [];
+	});
+}
+
+/** A parked glob (`**​/tests/x/y.spec.ts`) matched against an absolute path. */
+function matchesGlob(glob, absolutePath) {
+	const ANY_DIRS = '\u0000';
+	const pattern = glob
+		.replace(/[.+^${}()|[\]\\]/g, '\\$&')
+		.replace(/\*\*\//g, ANY_DIRS)
+		// Single `*` never crosses a path separator; do this before expanding ANY_DIRS,
+		// whose replacement itself contains a `*`.
+		.replace(/\*/g, '[^/]*')
+		.split(ANY_DIRS)
+		.join('(?:.*/)?');
+	return new RegExp(`^${pattern}$`).test(absolutePath.split('\\').join('/'));
+}
+
+// Declaration form only — `test.skip(condition, reason)` inside a test body is a
+// legitimate runtime guard, not a parked test.
+const OFFENDERS = [
+	{ label: 'test.skip', re: /(?<![\w.])test\.skip\(\s*['"`]/g },
+	{ label: 'test.fixme', re: /(?<![\w.])test\.fixme\(\s*['"`]/g },
+	{ label: 'describe.skip', re: /describe\.skip\(/g },
+	{ label: 'describe.fixme', re: /describe\.fixme\(/g },
+	{ label: 'test.only', re: /(?<![\w.])test\.only\(/g },
+	{ label: 'describe.only', re: /describe\.only\(/g },
+];
+
+const testsDir = join(root, 'tests');
+const files = statSync(testsDir, { throwIfNoEntry: false })
+	? specFiles(testsDir)
+	: [];
+const failures = [];
+
+for (const file of files) {
+	if (parked.specs.some((glob) => matchesGlob(glob, file))) {
+		continue;
+	}
+	const source = readFileSync(file, 'utf8');
+	for (const { label, re } of OFFENDERS) {
+		const hits = source.match(re);
+		if (hits) {
+			failures.push(
+				`${relative(root, file)}: ${hits.length} × ${label} — finish it, or park the spec in parked-specs.json with a reason`,
+			);
+		}
+	}
+}
+
+for (const glob of parked.specs) {
+	if (!files.some((file) => matchesGlob(glob, file))) {
+		failures.push(
+			`parked-specs.json: "${glob}" matches no spec — drop the stale entry`,
+		);
+	}
+}
+
+if (failures.length > 0) {
+	console.error(
+		`\nguard:specs failed\n\n${failures.map((f) => `  ✗ ${f}`).join('\n')}\n`,
+	);
+	process.exit(1);
+}
+
+// eslint-disable-next-line no-console
+console.log(
+	`guard:specs ok — ${files.length - parked.specs.length}/${files.length} specs running, ${parked.specs.length} parked`,
+);

tests/e2e/testdata/variables-dashboard-v2.json

@@ -0,0 +1,48 @@
+{
+	"$comment": "V2 (Perses-shape) dashboard spec seeded through POST /api/v2/dashboards. Only text and custom variables, so it resolves without telemetry: option lists are fixed by the definition, which keeps assertions on them deterministic. Query and dynamic variables are seeded per-spec alongside the telemetry they need.",
+	"spec": {
+		"display": { "name": "variables-v2", "description": "" },
+		"layouts": [],
+		"panels": {},
+		"variables": [
+			{
+				"kind": "TextVariable",
+				"spec": {
+					"name": "tb_env",
+					"display": { "name": "tb_env", "description": "Free-text environment" },
+					"value": "prod",
+					"constant": false
+				}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "cu_service",
+					"display": { "name": "cu_service", "description": "Multi-select with ALL" },
+					"allowMultiple": true,
+					"allowAllValue": true,
+					"sort": "none",
+					"plugin": {
+						"kind": "signoz/CustomVariable",
+						"spec": { "customValue": "checkout,payments,cart" }
+					}
+				}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "cu_region",
+					"display": { "name": "cu_region", "description": "Single-select with a default" },
+					"allowMultiple": false,
+					"allowAllValue": false,
+					"sort": "none",
+					"defaultValue": "eu-west",
+					"plugin": {
+						"kind": "signoz/CustomVariable",
+						"spec": { "customValue": "us-east,eu-west" }
+					}
+				}
+			}
+		]
+	}
+}

tests/e2e/tests/dashboards/details/01-smoke.spec.ts

@@ -0,0 +1,110 @@
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import { authToken } from '../../../helpers/dashboards';
+import {
+	createDashboardV2ViaApi,
+	dashboardV2Path,
+	deleteDashboardV2ViaApi,
+	pickVariableValues,
+	readVariableSelection,
+	variablePill,
+	variablesBar,
+	variableTextInput,
+	WIDE_VIEWPORT,
+} from '../../../helpers/dashboards-v2';
+import customVariables from '../../../testdata/variables-dashboard-v2.json';
+
+// The foundation the other dashboards specs build on: seeding a V2 spec through the
+// v2 API, opening it, and driving the variables bar. Everything here is deterministic
+// — custom and text variables need no telemetry, so this spec cannot go red because
+// of what the stack happens to hold.
+
+test.use({ viewport: WIDE_VIEWPORT });
+
+const seedIds = new Set<string>();
+let dashboardId = '';
+
+// Per worker: `beforeAll` runs once in each, and the v2 API rejects a duplicate name.
+const SUITE_TITLE = `detail-smoke-suite-${process.env.TEST_WORKER_INDEX ?? '0'}`;
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		dashboardId = await createDashboardV2ViaApi(
+			page,
+			SUITE_TITLE,
+			customVariables.spec,
+		);
+		seedIds.add(dashboardId);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) {
+		return;
+	}
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of seedIds) {
+			await deleteDashboardV2ViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.describe('Dashboard detail — V2 foundation', () => {
+	test('TC-01 a seeded V2 dashboard opens with its title and variables bar', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		await expect(page.getByTestId('dashboard-title')).toContainText(SUITE_TITLE);
+		await expect(variablesBar(page)).toBeVisible();
+		for (const name of ['tb_env', 'cu_service', 'cu_region']) {
+			await expect(variablePill(page, name)).toBeVisible();
+		}
+	});
+
+	test('TC-02 a text variable renders the value it was seeded with', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		await expect(variableTextInput(page, 'tb_env')).toHaveValue('prod');
+	});
+
+	test('TC-03 an ALL-enabled multi-select reads ALL until a value is picked', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		// Seeded with allowAllValue and no default, so it resolves to ALL.
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_service'))
+			.toBe('ALL');
+
+		// A multi-select commits when the dropdown closes, not per toggle.
+		await pickVariableValues(page, 'cu_service', ['checkout']);
+
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_service'))
+			.toContain('checkout');
+	});
+
+	test('TC-04 a single-select renders its configured default', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_region'))
+			.toContain('eu-west');
+	});
+});

tests/e2e/tests/dashboards/details/67-variables.spec.ts

@@ -2,42 +2,59 @@ import type { Page } from '@playwright/test';
 
 import { expect, test } from '../../../fixtures/auth';
 import { newAdminContext } from '../../../helpers/auth';
+import { authToken } from '../../../helpers/dashboards';
 import {
-	authToken,
-	awaitVariablesResolved,
-	createVariablesDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-import variablesTemplate from '../../../testdata/variables-dashboard.json';
+	anyDropdown,
+	closeVariableDropdown,
+	readCheckedOptions,
+	createDashboardV2ViaApi,
+	dashboardV2Path,
+	deleteDashboardV2ViaApi,
+	hiddenVariablesTooltip,
+	openVariableDropdown,
+	optionRow,
+	pickVariableValues,
+	readVariableSelection,
+	variableControl,
+	variablePill,
+	variablesBar,
+	variableTextInput,
+	WIDE_VIEWPORT,
+} from '../../../helpers/dashboards-v2';
+import variablesFixture from '../../../testdata/variables-dashboard-v2.json';
 
-// Variables that depend on backend resolution against seeded telemetry the
-// bootstrap stack does not produce. Skip them so `awaitVariablesResolved`
-// does not block on values that can never appear.
-const TELEMETRY_DEPENDENT_VARS = ['q_env', 'q_service', 'd_namespace'];
+// The runtime variables bar on the V2 detail page. Everything here is driven from
+// text + custom variables, whose option lists come from the definition — so no
+// assertion depends on telemetry the stack may or may not hold.
+//
+// Fetched variables (QUERY / DYNAMIC) and the behaviours that only they can show —
+// a selection surviving a time-range refetch, a typed value surviving a cascade —
+// need seeded telemetry and are covered separately.
 
-test.describe.configure({ mode: 'serial' });
+test.use({ viewport: WIDE_VIEWPORT });
 
 const seedIds = new Set<string>();
-let varDashboardId = '';
+let dashboardId = '';
+
+// Each worker seeds its own dashboard: the v2 API rejects a duplicate name, and
+// `beforeAll` runs once per worker.
+const SUITE_TITLE = `detail-variables-suite-${process.env.TEST_WORKER_INDEX ?? '0'}`;
+
+async function open(page: Page): Promise<void> {
+	await page.goto(dashboardV2Path(dashboardId));
+	await expect(variablesBar(page)).toBeVisible();
+}
 
 test.beforeAll(async ({ browser }) => {
 	const ctx = await newAdminContext(browser);
 	const page = await ctx.newPage();
 	try {
-		varDashboardId = await createVariablesDashboardViaApi(
+		dashboardId = await createDashboardV2ViaApi(
 			page,
-			'detail-variables-suite',
+			SUITE_TITLE,
+			variablesFixture.spec,
 		);
-		seedIds.add(varDashboardId);
-		// Per the framework contract: every variable with a default has its
-		// `selectedValue` set in the seed JSON; backend-resolved variables
-		// (Query / Dynamic) cannot resolve without seeded telemetry, so we
-		// list them in `skipNames`. Tests must not race ahead of seed
-		// materialisation — this gate ensures the persisted dashboard is in
-		// a known state before any test runs.
-		await awaitVariablesResolved(page, varDashboardId, {
-			skipNames: TELEMETRY_DEPENDENT_VARS,
-		});
+		seedIds.add(dashboardId);
 	} finally {
 		await ctx.close();
 	}
@@ -52,7 +69,7 @@ test.afterAll(async ({ browser }) => {
 	try {
 		const token = await authToken(page);
 		for (const id of seedIds) {
-			await deleteDashboardViaApi(ctx.request, id, token);
+			await deleteDashboardV2ViaApi(ctx.request, id, token);
 			seedIds.delete(id);
 		}
 	} finally {
@@ -60,424 +77,130 @@ test.afterAll(async ({ browser }) => {
 	}
 });
 
-function variablesQueryParam(state: Record<string, unknown>): string {
-	return encodeURIComponent(encodeURIComponent(JSON.stringify(state)));
-}
-
-async function gotoVariablesDashboard(
-	page: Page,
-	urlState?: Record<string, unknown>,
-): Promise<void> {
-	const url = urlState
-		? `/dashboard/${varDashboardId}?variables=${variablesQueryParam(urlState)}`
-		: `/dashboard/${varDashboardId}`;
-	await page.goto(url);
-	await expect(
-		page.getByRole('button', {
-			name: /dashboard-icon detail-variables-suite/,
-		}),
-	).toBeVisible();
-}
-
-test.describe('Dashboard Detail — Variables', () => {
-	test('TC-01 variables bar renders all four types', async ({
+test.describe('Dashboard detail — variables bar', () => {
+	test('TC-01 every seeded variable renders as a pill labelled with its name', async ({
 		authedPage: page,
 	}) => {
-		await gotoVariablesDashboard(page);
+		await open(page);
 
-		for (const name of [
-			'$tb_env',
-			'$tb_service',
-			'$cu_single',
-			'$cu_env_all',
-			'$cu_services',
-			'$q_env',
-			'$q_service',
-			'$d_namespace',
-		]) {
-			await expect(page.getByText(name, { exact: true })).toBeVisible();
+		for (const name of ['tb_env', 'cu_service', 'cu_region']) {
+			await expect(variablePill(page, name)).toBeVisible();
+			await expect(variablePill(page, name)).toContainText(`$${name}`);
 		}
-
-		// Textbox variables expose their current value via `value` and `title`
-		// attributes (the antd Input has no accessible name matching the value),
-		// so we match on input[value="..."] rather than getByRole+name.
-		await expect(page.locator('input[value="otel-demo"]')).toBeVisible();
-		await expect(page.locator('input[value="frontend"]')).toBeVisible();
-
-		await expect(page.getByTestId('variable-select')).toHaveCount(6);
 	});
 
-	test('TC-02 selecting a value in a single-value Custom variable updates URL and aria-selected', async ({
+	test('TC-02 an ALL-enabled multi-select with no default resolves to ALL', async ({
 		authedPage: page,
 	}) => {
-		await gotoVariablesDashboard(page);
+		await open(page);
 
-		// $cu_single (nth(0)) — single-select Custom with three static
-		// options. Driving Custom rather than Query keeps the test
-		// deterministic regardless of seeded telemetry.
-		const dropdown = page.getByTestId('variable-select').nth(0);
-		await dropdown.click();
-		await page.getByRole('option', { name: 'mq-kafka' }).click();
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_service'))
+			.toBe('ALL');
+	});
 
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-		await expect(page).toHaveURL(/variables=.*mq-kafka/);
+	test('TC-03 a single-select renders its configured default', async ({
+		authedPage: page,
+	}) => {
+		await open(page);
 
-		await dropdown.click();
-		await expect(page.getByRole('option', { name: 'mq-kafka' })).toHaveAttribute(
-			'aria-selected',
-			'true',
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_region'))
+			.toContain('eu-west');
+	});
+
+	test('TC-04 "Only" on a row collapses an ALL selection to that one value', async ({
+		authedPage: page,
+	}) => {
+		await open(page);
+
+		await pickVariableValues(page, 'cu_service', ['payments']);
+
+		const shown = await readVariableSelection(page, 'cu_service');
+		expect(shown).toContain('payments');
+		expect(shown).not.toContain('checkout');
+	});
+
+	test('TC-05 checking a second value adds it to the selection', async ({
+		authedPage: page,
+	}) => {
+		await open(page);
+
+		await pickVariableValues(page, 'cu_service', ['payments', 'cart']);
+
+		// Read from the open list: the closed control shows one tag plus a "+N", so it
+		// cannot tell a two-value selection from a one-value one.
+		expect(await readCheckedOptions(page, 'cu_service')).toEqual(
+			expect.arrayContaining(['payments', 'cart']),
 		);
-		await page.keyboard.press('Escape');
 	});
 
-	test('TC-03 multi-select renders chips and URL encodes array', async ({
+	test('TC-06 a multi-select edit is committed by closing the dropdown, not per toggle', async ({
 		authedPage: page,
 	}) => {
-		// URL state seeds adservice + cartservice as initial selection; this also
-		// guarantees the URL contains the encoded array so we can assert on it
-		// without relying on the seeded server-side selection rendering identically
-		// across reloads.
-		await gotoVariablesDashboard(page, {
-			cu_services: ['adservice', 'cartservice'],
-		});
+		await open(page);
+		await pickVariableValues(page, 'cu_service', ['checkout']);
 
-		await expect(
-			page.getByRole('button', { name: 'Remove tag adservice' }),
-		).toBeVisible();
-		await expect(
-			page.getByRole('button', { name: 'Remove tag cartservice' }),
-		).toBeVisible();
+		// Toggle a second value on, and read the closed control's committed text BEFORE
+		// closing: it must still show only what was committed on the previous close.
+		await openVariableDropdown(page, 'cu_service');
+		await optionRow(page, 'cart').click();
+		await expect(anyDropdown(page).first()).toBeVisible();
 
-		await expect(page).toHaveURL(/adservice/);
-		await expect(page).toHaveURL(/cartservice/);
-	});
-
-	test('TC-04 removing a chip updates URL', async ({ authedPage: page }) => {
-		await gotoVariablesDashboard(page, {
-			cu_services: ['adservice', 'cartservice'],
-		});
-
-		await expect(
-			page.getByRole('button', { name: 'Remove tag adservice' }),
-		).toBeVisible();
-		await page.getByRole('button', { name: 'Remove tag adservice' }).click();
-
-		// Removing a chip on a multi-select expands the dropdown; URL state
-		// only commits when the dropdown closes (onDropdownVisibleChange =>
-		// false). The CustomMultiSelect swallows Escape, so click outside the
-		// dropdown to dismiss it.
-		await page.locator('img[alt="dashboard-img"]').click();
-		await expect(page.getByRole('listbox')).toBeHidden();
-
-		await expect(
-			page.getByRole('button', { name: 'Remove tag adservice' }),
-		).toBeHidden();
-		await expect(
-			page.getByRole('button', { name: 'Remove tag cartservice' }),
-		).toBeVisible();
-		await expect(page).toHaveURL(/variables=/);
-		await expect(page).not.toHaveURL(/adservice/);
-	});
-
-	test('TC-05 ALL option on a Custom variable', async ({ authedPage: page }) => {
-		await gotoVariablesDashboard(page, { cu_env_all: 'otel-demo' });
-
-		// $cu_env_all (nth(1)) — multi-select Custom with showALLOption: true,
-		// so the dropdown exposes an "ALL" toggle alongside the static options.
-		const dropdown = page.getByTestId('variable-select').nth(1);
-		await expect(
-			dropdown.locator('.ant-select-selection-item', {
-				hasText: 'otel-demo',
-			}),
-		).toBeVisible();
-
-		await dropdown.click();
-		await page.getByRole('option', { name: 'ALL' }).click();
-
-		// When ALL is selected, the multi-select renders an "ALL" badge in a
-		// custom container (not the standard .ant-select-selection-item), so
-		// match on the option's checked state inside the dropdown listbox
-		// rather than on the closed-state chip.
-		await expect(page.getByRole('option', { name: 'ALL' })).toHaveAttribute(
-			'aria-selected',
-			'true',
+		await closeVariableDropdown(page);
+		expect(await readCheckedOptions(page, 'cu_service')).toEqual(
+			expect.arrayContaining(['checkout', 'cart']),
 		);
-		await expect(page).toHaveURL(/variables=/);
 	});
 
-	test('TC-06 textbox variable update propagates to URL', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
+	test('TC-07 a selection survives a reload', async ({ authedPage: page }) => {
+		await open(page);
+		await pickVariableValues(page, 'cu_service', ['cart']);
 
-		// Locate by the testid wrapping a stable id, since `input[value="..."]`
-		// becomes stale the moment we fill('') the field.
-		await expect(page.locator('input[value="otel-demo"]')).toBeVisible();
-		const tb = page.getByPlaceholder('Enter value').first();
-		await tb.click();
-		await tb.fill('');
-		await tb.fill('production');
-		await tb.press('Enter');
-
-		await expect(page.locator('input[value="production"]')).toBeVisible();
-		await expect(page).toHaveURL(/variables=.*production/);
-	});
-
-	test('TC-07 cascading: child variable listbox opens after parent change', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page, { q_env: 'otel-demo' });
-
-		// q_service (nth(4)) is cascaded from q_env (nth(3)).
-		const child = page.getByTestId('variable-select').nth(4);
-		await child.click();
-
-		// known behaviour: the child's option list requires seeded telemetry —
-		// the bootstrap stack has none, so we only assert that the listbox
-		// renders without crashing rather than checking specific options.
-		await expect(page.getByRole('listbox').first()).toBeVisible();
-		await page.keyboard.press('Escape');
-
-		await expect(page).toHaveURL(/otel-demo/);
-	});
-
-	test('TC-08 URL deep-link restores variable state on hard reload', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page, { cu_env_all: 'mq-kafka' });
-
-		const dropdown = page.getByTestId('variable-select').nth(1);
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-
-		await page.reload({ waitUntil: 'domcontentloaded' });
-		await expect(
-			page.getByRole('button', {
-				name: /dashboard-icon detail-variables-suite/,
-			}),
-		).toBeVisible();
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-
-		await expect(page).toHaveURL(/variables=%257B/);
-	});
-
-	// ─── Deep coverage ───────────────────────────────────────────────────────
-
-	test('TC-09 ALL → specific value → ALL round-trip preserves URL state', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-		const dropdown = page.getByTestId('variable-select').nth(1); // cu_env_all
-
-		// Seed defaults to ALL — open, pick a specific value, assert URL.
-		await dropdown.click();
-		await page.getByRole('option', { name: 'mq-kafka' }).click();
-		await page.keyboard.press('Escape');
-		await expect(page).toHaveURL(/mq-kafka/);
-
-		// Re-open, switch back to ALL — URL must update again.
-		await dropdown.click();
-		const allOption = page.getByRole('option', { name: 'ALL' });
-		await allOption.click();
-		await expect(allOption).toHaveAttribute('aria-selected', 'true');
-		await page.keyboard.press('Escape');
-		// `mq-kafka` should no longer appear in the URL after reverting to ALL.
-		await expect(page).not.toHaveURL(/mq-kafka/);
-	});
-
-	test('TC-10 two variables changed in sequence both encode in URL', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// cu_single — pick `production`.
-		const single = page.getByTestId('variable-select').nth(0);
-		await single.click();
-		await page.getByRole('option', { name: 'production' }).click();
-		await page.keyboard.press('Escape');
-		await expect(page).toHaveURL(/production/);
-
-		// q_service — open the multi-select, dismiss without picking. The URL
-		// should still contain the previous selection.
-		const cuServices = page.getByTestId('variable-select').nth(2);
-		await cuServices.click();
-		await page.keyboard.press('Escape');
-		await expect(page).toHaveURL(/production/);
-		await expect(page).toHaveURL(/cu_single/);
-	});
-
-	test('TC-11 navigating away and back preserves the URL-encoded state', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page, { cu_single: 'mq-kafka' });
-		const dropdown = page.getByTestId('variable-select').nth(0);
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-		const stateUrl = page.url();
-
-		// Leave to the list, come back via browser back — URL is restored.
-		// `dispatchEvent('click')` — the expanded sidenav intercepts pointer
-		// events at the breadcrumb's center, defeating even `force: true`.
-		// Dispatching the click directly on the DOM node bypasses hit testing.
-		await page
-			.getByRole('button', { name: 'Dashboard /' })
-			.dispatchEvent('click');
-		await expect(page).toHaveURL(/\/dashboard$/);
-		await page.goBack();
-		await expect(page).toHaveURL(stateUrl);
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-	});
-
-	// ─── TBD coverage — placeholders to fill in when each feature lands ──────
-	//
-	// Each `test.skip` below marks a behaviour the spec does NOT yet exercise.
-	// They are intentional gaps, not bugs — when the feature ships or the seed
-	// gains telemetry, replace `test.skip` with `test`, drop the comment, and
-	// implement.
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-12 Custom variable without a default prompts user to select a value', async () => {
-		// Requires extending variables-dashboard.json with a Custom variable
-		// that has no `selectedValue` and no `allSelected`. The UI should
-		// render the dropdown empty/"Select value" until a user picks.
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-13 Query variable with pre-seeded selectedValue renders without backend resolution', async () => {
-		// Requires extending variables-dashboard.json with a Query variable
-		// that ships with `selectedValue` already populated — the UI should
-		// trust the seed and not block on a query.
-	});
-
-	test('TC-14 multi-select Query variable without telemetry shows an empty option list', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// q_service is the only multi-select Query in the seed (nth(4) in
-		// the dropdown order). Without telemetry the option list is empty —
-		// assert the empty-state explicitly.
-		const child = page.getByTestId('variable-select').nth(4);
-		await child.click();
-		const listbox = page.getByRole('listbox').first();
-		await expect(listbox).toBeVisible();
-		await expect(listbox.getByRole('option')).toHaveCount(0);
-		await page.keyboard.press('Escape');
-	});
-
-	test('TC-15 Dynamic variable resolves a seeded namespace value', async ({
-		authedPage: page,
-	}) => {
-		// d_namespace's `dynamicVariablesAttribute` is `k8s.namespace.name`
-		// over the `metrics` source. The bootstrap OTel collector ingests
-		// the golden dataset which tags every resource with
-		// `k8s.namespace.name=signoz-<service>` for 8 distinct services.
-		// SigNoz's `signoz_metrics.distributed_metadata` table is populated
-		// naturally by the collector's signozclickhousemetrics exporter, and
-		// `/api/v1/fields/values?signal=metrics&name=k8s.namespace.name`
-		// surfaces the values so the Dynamic variable auto-resolves.
-		await gotoVariablesDashboard(page);
-
-		// d_namespace is the 6th dropdown variable in DOM order. The
-		// closed-state of the combobox renders the auto-resolved value
-		// inline next to the variable name. Match any of the 8 seeded
-		// namespaces — ordering depends on the backend sort, so we accept
-		// whichever it returns first.
-		const dynamic = page.getByTestId('variable-select').nth(5);
-		await expect(dynamic).toContainText(/signoz-\w+/, { timeout: 15_000 });
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-16 changing a variable referenced in a panel query refetches the panel data', async () => {
-		// $service.name and $deployment.environment are referenced by APM
-		// panel queries. Asserting that a variable change triggers a
-		// query_range refetch with the new substitution requires either
-		// seeded telemetry or a network-request listener that confirms the
-		// outbound query body contains the new value. Defer until the
-		// chart-data assertion path is in place.
-	});
-
-	test('TC-17 variable bar order matches the `order` field in dashboard JSON', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// Expected order matches the `order` field in variables-dashboard.json.
-		const expected = [
-			'$tb_env',
-			'$tb_service',
-			'$cu_single',
-			'$cu_env_all',
-			'$cu_services',
-			'$q_env',
-			'$q_service',
-			'$d_namespace',
-		];
-		const allText = await page.locator('text=/^\\$\\w+$/').allInnerTexts();
-		const actual = allText.filter((t) => /^\$\w+$/.test(t));
-		expect(actual.slice(0, expected.length)).toEqual(expected);
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-18 reordering variables via drag persists to the dashboard JSON', async () => {
-		// The Configure → Variables tab supports drag handles. After a
-		// reorder, the persisted `order` fields should update and the
-		// variables bar should re-render in the new order.
-	});
-
-	test('TC-19 variable removed via Configure disappears from the variables bar', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// `tb_service` (textbox, no dependents) — easiest to remove cleanly.
-		await expect(page.getByText('$tb_service', { exact: true })).toBeVisible();
-
-		await page
-			.locator('.dashboard-details .right-section')
-			.getByTestId('show-drawer')
-			.click();
-		const dialog = page.getByRole('dialog');
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-
-		const nameCell = tabpanel.getByText('tb_service', { exact: true }).first();
-		await nameCell.hover();
-		await nameCell
-			.locator(
-				'xpath=ancestor::*[contains(@class,"variable-item") or self::tr][1]',
-			)
-			.locator('.delete-variable-button')
-			.first()
-			.dispatchEvent('click');
-		const confirm = page
-			.getByRole('dialog')
-			.filter({ hasText: /delete variable/i })
-			.last();
-		await confirm.getByRole('button', { name: 'OK' }).click();
-
-		await expect(tabpanel.getByText('tb_service', { exact: true })).toHaveCount(
-			0,
-		);
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-
-		await expect(page.getByText('$tb_service', { exact: true })).toHaveCount(0);
-
-		// Restore the persisted variable so subsequent serial-mode tests still pass.
-		const token = await authToken(page);
-		await page.request.put(`/api/v1/dashboards/${varDashboardId}`, {
-			data: { ...variablesTemplate, title: 'detail-variables-suite' },
-			headers: { Authorization: `Bearer ${token}` },
-		});
 		await page.reload();
-		await expect(page.getByText('$tb_service', { exact: true })).toBeVisible();
+		await expect(variablesBar(page)).toBeVisible();
+
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_service'))
+			.toContain('cart');
+	});
+
+	test('TC-08 a text variable keeps a typed value across a reload', async ({
+		authedPage: page,
+	}) => {
+		await open(page);
+
+		const input = variableTextInput(page, 'tb_env');
+		await input.fill('staging');
+		await input.blur();
+
+		await page.reload();
+		await expect(variableTextInput(page, 'tb_env')).toHaveValue('staging');
+	});
+
+	test('TC-09 switching a single-select replaces its value', async ({
+		authedPage: page,
+	}) => {
+		await open(page);
+
+		await variableControl(page, 'cu_region').click();
+		await optionRow(page, 'us-east').click();
+
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_region'))
+			.toContain('us-east');
+	});
+
+	test('TC-10 variables that do not fit collapse into a "+N" overflow', async ({
+		authedPage: page,
+	}) => {
+		await page.setViewportSize({ width: 1280, height: 720 });
+		await open(page);
+
+		const overflow = page.getByRole('button', { name: /^\+\d+$/ });
+		await expect(overflow).toBeVisible();
+
+		await overflow.hover();
+		await expect(hiddenVariablesTooltip(page)).toBeVisible();
 	});
 });

tests/e2e/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "commonjs",
+    "module": "esnext",
     "moduleResolution": "bundler",
-    "lib": ["ES2020"],
+    "lib": ["ES2020", "DOM"],
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,