fix(e2e): scroll first chart card into view before counting axis ticks

The Pixel-5 tick-density spec waited on `.recharts-xAxis` to be visible
but Playwright kept resolving the SVG axis as `hidden`. On a 393×851
viewport the dashboard ships several stacked tiles above the first
chart card, so the bottom-positioned axis sits below the initial fold
when the test starts probing.

Locate the first chart card by its range-tab data-slot, scroll it into
view so Recharts' ResponsiveContainer measures a non-zero parent, then
wait for an axis tick label (not the wrapper `<g>`) to be visible
before counting ticks.

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:44 +02:00
1 parent e8d0660198
commit 3785fec2ac
1 file changed
+18 -2
+18 -2
View File
@@ -198,8 +198,24 @@ test.describe("charts — mobile-viewport regression", () => {
await page.goto("/", { waitUntil: "domcontentloaded" });
await page.waitForLoadState("networkidle");
// Wait for at least one Recharts SVG to mount.
await page.locator(".recharts-xAxis").first().waitFor({ timeout: 10_000 });
// Wait for at least one chart card to mount, then scroll it into
// view so Recharts' ResponsiveContainer measures its parent and
// paints the SVG. On Pixel 5 the dashboard ships several stacked
// tiles above the first chart card; the bottom-positioned axis
// sits below the initial fold and reports as `hidden` to a raw
// `.recharts-xAxis` visibility probe before scroll.
const firstChartCard = page
.locator("div.bg-card")
.filter({ has: page.locator("[data-slot=chart-range-tab]") })
.first();
await firstChartCard.waitFor({ state: "visible", timeout: 10_000 });
await firstChartCard.scrollIntoViewIfNeeded();
// After scroll, give the chart a beat to lay out under the new
// measured size before counting ticks.
await page
.locator(".recharts-xAxis .recharts-cartesian-axis-tick text")
.first()
.waitFor({ state: "visible", timeout: 10_000 });
// Recharts lays its visible tick labels under
// `.recharts-xAxis .recharts-cartesian-axis-tick`. Count the ones