mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-07 12:22:03 +00:00
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:
1 parent
e8d0660198
commit
3785fec2ac
1 file changed
+18
-2
@@ -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
|
||||
|
||||
Reference in new issue
Block a user