From deeef23131f04700b508485ec8149c7eaca0bebf Mon Sep 17 00:00:00 2001 From: Tudor Date: Fri, 3 Jul 2026 14:40:13 +0100 Subject: [PATCH] =?UTF-8?q?fix(e2e):=20assert=20on=20a=20visible=20canvas?= =?UTF-8?q?=20=E2=80=94=20the=20first=20canvas=20is=20hidden=20by=20design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The admissions card stacks year/trend views in one grid cell and keeps the inactive view visibility:hidden; its canvas is first in the DOM. Use canvas:visible instead of scrolling. Verified: full suite passes against prod. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01PqGhF93UrpDNvXBLMjJENL --- e2e/tests/journeys.spec.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/e2e/tests/journeys.spec.ts b/e2e/tests/journeys.spec.ts index b366b89..1a7e6ac 100644 --- a/e2e/tests/journeys.spec.ts +++ b/e2e/tests/journeys.spec.ts @@ -43,13 +43,11 @@ test('school detail page renders name and performance data', async ({ page }) => await firstSchool.click(); await page.waitForURL(/\/school\//); await expect(page.locator('h1').first()).toBeVisible(); - // The detail page renders at least one chart canvas (performance history). - // Charts live below the fold and only become visible once scrolled to, so - // wait for the element, scroll it into view, then assert visibility. - const chart = page.locator('canvas').first(); - await chart.waitFor({ state: 'attached', timeout: 15_000 }); - await chart.scrollIntoViewIfNeeded(); - await expect(chart).toBeVisible({ timeout: 15_000 }); + // The detail page renders at least one *visible* chart canvas. Plain + // .first() is wrong here: the admissions card stacks its year/trend views + // in one grid cell and keeps the inactive view's canvas visibility:hidden + // by design, and that canvas comes first in the DOM. + await expect(page.locator('canvas:visible').first()).toBeVisible({ timeout: 15_000 }); }); test('comparing two schools shows both side by side', async ({ page }) => {