Control everything that changes between runs. Playwright's toHaveScreenshot retries until the page stabilizes and supports masking dynamic regions, disabling animations and pixel-difference thresholds. Its docs say to keep the operating system and browser versions the same for visual comparisons, which is why teams generate and check baselines in one pinned container image with the same fonts. Fix the viewport, mask timestamps, avatars and ads, re-generate baselines after Playwright upgrades because rendering changes, and review baseline updates in pull requests like code. Prefer element-level screenshots over full-page ones to limit noise.

A typical assertion with explicit tolerances (threshold: 0.2 is Playwright's default per-pixel color tolerance, so the ratio is the setting that changes here):

await expect(page).toHaveScreenshot('landing-page.png', {
  maxDiffPixelRatio: 0.02,
  threshold: 0.2,
});

Start with small tolerances and raise them only for a known source of noise, because a loose threshold hides real regressions.

Sources: Playwright visual comparisons, Playwright best practices