Playwright visual regression with masked timestamps and a 1% tolerance so fonts stop false-flagging

Visual regression setup for a Next.js component library using Playwright's built-in screenshot comparison. Covers three breakpoints, masks dynamic content, and gates PRs. ```typescript // playwright.config.ts import { defineConfig, devices } from "@playwright/test"; export default defineConfig({ expect: { toHaveScreenshot: { maxDiffPixelRatio: 0.01 }, // 1% tolerance for AA noise }, projects: [ { name: "desktop", use: { ...devices["Desktop Chrome"], viewport: { width: 1440, height: 900 } } }, { name: "tablet", use: { viewport: { width: 768, height: 1024 } } }, { name: "mobile", use: { ...devices["iPhone 13"] } }, ], }); ``` ```typescript // tests/visual/button.spec.ts import { test, expect } from "@playwright/test"; test("Button — all states", async ({ page }) => { await page.goto("/storybook/button"); await page.waitForLoadState("networkidle"); // fonts loaded await expect(page.getByTestId("btn-primary")).toHaveScreenshot("primary.png"); await page.getByTestId("btn-primary").hover(); await expect(page.getByTestId("btn-primary")).toHaveScreenshot("primary-hover.png"); }); test("Pricing page — full, dynamic content masked", async ({ page }) => { await page.goto("/pricing"); await expect(page).toHaveScreenshot("pricing.png", { mask: [page.getByTestId("live-timestamp"), page.locator(".ad-slot")], animations: "disabled", }); }); ``` **Anti-flakiness:** `waitForLoadState("networkidle")` prevents shooting before web fonts swap; `animations: "disabled"` freezes transitions; the `mask` hides the timestamp so it never false-positives. **Baselines** live in `__screenshots__/` committed to git; update intentional changes with `npx playwright test --update-snapshots`. **CI gate:** the diff job fails the PR on any pixel delta over threshold and uploads a side-by-side HTML report for approval.