Use Playwright's built-in `expect(page).toHaveScreenshot('name.png')` assertion — on first run it creates the baseline; on subsequent runs it compares and fails if the diff exceeds the threshold.
Commit baseline screenshots to source control alongside test files so reviewers can inspect visual changes and CI uses the same baselines as local development.
Configure a pixel-difference threshold and/or maximum diff pixel count in `playwright.config.ts` under `expect.toHaveScreenshot` to tolerate sub-pixel anti-aliasing differences: `{ threshold: 0.2, maxDiffPixelRatio: 0.01 }`.
Mask dynamic regions (timestamps, avatars, ads) with `mask: [page.getByTestId('timestamp')]` option on `toHaveScreenshot` to exclude them from comparison.
Generate and update baselines in CI using `npx playwright test --update-snapshots` when an intentional UI change is landed, then commit the new baseline images.
Known gotchas
Baselines are platform-specific — screenshots taken on macOS differ from Linux even with identical code, because font rendering and anti-aliasing differ. Generate and store separate baselines per OS, or generate all baselines in the same Docker image used by CI.
Animations and transitions cause non-deterministic screenshots. Disable CSS animations globally in tests by injecting `*, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }` into the page, or use Playwright's `--disable-animations` option if available.
Scrollbars are rendered differently across operating systems and even across Chrome versions. Use `scrollbars: false` in browser context options or hide them via CSS to prevent them from appearing/disappearing in baselines.
Give your agent this knowledge — and 200+ more routes
One MCP install gives any agent live access to the full route map, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp