investigating-a-ci-failurelisted

# Investigating a CI failure ## Triage by failure class (most common first) ### Visual regression (`expect(page).toHaveScreenshot(...)` failed) Two sub-cases, with very different fixes: **A. Pixel diff above tolerance** (`expected ... 100px image, received ... 100px, 50000 pixels different`) - The PAGE rendered the same dimensions, just with different content. Common when copy or styling changed intentionally. - Fix: regenerate the baseline. From the repo root, with the dev server running on port 3010: ``` CI=1 PLAYWRIGHT_BROWSERS_PATH=/opt/pw-browsers \ npx playwright test e2e/visual.spec.ts -g "<test name>" --update-snapshots ``` Commit the regenerated PNG in `e2e/visual.spec.ts-snapshots/`. **B. Dimension mismatch** (`expected 100x800, received 100x950`) - The page renders at different HEIGHTS between dev environment and CI runner. This is a STRUCTURAL signal, not noise — usually cumulative line-height drift on text-heavy pages between rendering envs. - `maxDiffPixelRatio` does NOT save you here — dimension mismatch short-circuits before pixel comparison. - Fix options, in order of preference: 1. Switch the test to viewport-only (drop `fullPage: true`) — matches the home-page strategy. Trade-off: lose below-fold layout-regression coverage. 2. If full-page is essential, mask the volatile region. 3. Last resort: bump `maxDiffPixelRatio` to 0.2+ — but the dimension issue still won't be solved this way. ### Lighthouse threshold Look for `failure for mi