From 3785fec2aceeafc77f8398cbcc6cffe3614e9bd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 10 May 2026 19:49:44 +0200 Subject: [PATCH] fix(e2e): scroll first chart card into view before counting axis ticks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 ``) to be visible before counting ticks. Co-Authored-By: Claude Opus 4.7 (1M context) --- e2e/charts-mobile.spec.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/e2e/charts-mobile.spec.ts b/e2e/charts-mobile.spec.ts index c5ef3b706..111cd8502 100644 --- a/e2e/charts-mobile.spec.ts +++ b/e2e/charts-mobile.spec.ts @@ -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