page-visual-tests

Add an entry with name and unprefixed path to the pages array in tests/visual/pages.spec.ts. Each entry costs three snapshots (one per viewport), so first check whether the page's layout is already covered and confirm its full-page height stays under the 25M-pixel budget.

Flaky snapshots usually come from a loader missing the data-slot="loading" attribute or from random ordering via lodash shuffle or Math.random sorts. Route loaders through the shared Skeleton or Spinner primitives and wrap shuffles with safeShuffle from src/lib/utils/random.ts.

Chromatic caps snapshots at 25 million pixels (width times height). The tallest tested pages reach about 22,500 px, so 1280 overflows the limit while 1024 fits. Measure document.documentElement.scrollHeight before raising the viewport or adding a long page.

No, imports must come from @chromatic-com/playwright. The two packages re-export expect with skewed types, so assertions like toHaveCount misbehave. Prefer page.waitForFunction for the loading wait instead.

The usual cause is a missing HOME: /root variable in the CI test step, since GitHub Actions overrides HOME inside containers and Playwright cannot find browsers baked into the mcr.microsoft.com/playwright image. Also verify the image tag matches @playwright/test in package.json.

Use domcontentloaded. Analytics and background fetches keep the network perpetually busy on ethereum.org, so networkidle never settles and causes timeouts or flakes.