fix(e2e): scroll trigger into view + force-click on portalled toggle

The chart-overlay-controls spec timed out clicking the target-range
Switch — Playwright resolved the locator but reported "element is
outside of the viewport" after auto-scroll. The Radix dropdown content
is portalled to `document.body`, so `scrollIntoViewIfNeeded()` on the
toggle is a no-op (it lives outside the page scroll container).

Scroll the cog trigger into view BEFORE opening the popover so the
portalled content paints inside the viewport, then force the click on
the toggle to bypass the off-viewport guard.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-10 19:49:20 +02:00
1 parent f181ab71fe
commit 812b68a99d
1 file changed
+17 -6
+17 -6
View File
@@ -103,17 +103,28 @@ test.describe("chart overlay controls", () => {
.first();
await expect(trigger).toBeVisible({ timeout: 10_000 });
// Scroll the trigger into view before opening the dropdown so the
// Radix Popper places its portalled content inside the viewport.
// On the seeded test user the dashboard renders multiple stacked
// chart cards, and the first cog can sit near the bottom edge of
// the desktop 1280×720 viewport — opening the popover then drops
// the toggle below the fold and Playwright refuses to click an
// off-viewport element after auto-scrolling.
await trigger.scrollIntoViewIfNeeded();
await trigger.click();
// The popover content paints three switches.
await expect(
page.locator('[data-slot="chart-overlay-toggle-target-range"]'),
).toBeVisible({ timeout: 5_000 });
const targetRangeToggle = page.locator(
'[data-slot="chart-overlay-toggle-target-range"]',
);
await expect(targetRangeToggle).toBeVisible({ timeout: 5_000 });
// Toggle target-range on. Radix Switch is a button[role=switch].
await page
.locator('[data-slot="chart-overlay-toggle-target-range"]')
.click();
// Force the click — `scrollIntoViewIfNeeded()` on the portalled
// dropdown content is a no-op (the Radix portal sits at the body
// root, outside the page scroll container) so we bypass Playwright's
// viewport check directly.
await targetRangeToggle.click({ force: true });
// The PUT fires once for the toggle change.
await expect.poll(() => putRequestCount).toBeGreaterThan(0);