mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +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.goto("/", { waitUntil: "domcontentloaded" });
|
||||||
await page.waitForLoadState("networkidle");
|
await page.waitForLoadState("networkidle");
|
||||||
|
|
||||||
// Wait for at least one Recharts SVG to mount.
|
// Wait for at least one chart card to mount, then scroll it into
|
||||||
await page.locator(".recharts-xAxis").first().waitFor({ timeout: 10_000 });
|
// 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 lays its visible tick labels under
|
||||||
// `.recharts-xAxis .recharts-cartesian-axis-tick`. Count the ones
|
// `.recharts-xAxis .recharts-cartesian-axis-tick`. Count the ones
|
||||||
|
|||||||
Reference in new issue
Block a user