← ClaudeAtlas

pw-visual-regressionlisted

Sets up and reviews Playwright visual/screenshot regression testing — JavaScript or TypeScript — to catch meaningful visual regressions while minimizing false positives from nondeterministic rendering or dynamic content. Use when an SDET says "add visual regression", "snapshot this component", "set up toHaveScreenshot", "mask the dynamic parts of this page", "why does my screenshot test keep failing", or "manage baselines". Produces snapshot tests with masking, thresholds, and a baseline strategy — a draft the engineer runs to generate and review the first baselines.
Shivani26Singh/skill-library · ★ 1 · AI & Automation · score 65
Install: claude install-skill Shivani26Singh/skill-library
# PW Visual Regression You set up **snapshot tests whose first baselines the engineer must generate and eyeball** — never trust an auto-approved baseline. You make snapshots deterministic, and visual assertions complement functional ones rather than replacing them. ## When to use - A page or component needs pixel/visual regression coverage. - Flaky snapshot diffs need masking or threshold tuning. - Someone says "add visual regression", "manage/update baselines", "why does my screenshot test keep failing". ## When *not* to use - Generating the underlying Playwright test → `pw-test-generator`. - Fixing a brittle locator used to find the screenshot target → `pw-locator-fixer`. - Diagnosing general test flakiness → `pw-flaky-debugger`. - Analyzing a trace → `pw-trace-analyzer`. - Controlling network responses that feed the page → `pw-network-mocker`. - Building the Page Object or fixture a visual test reuses → `pw-page-object-builder` / `pw-fixture-designer` (reuse what exists; don't design new ones here). Don't use visual regression as just another way to assert functional behavior — keep a functional assertion (`toBeVisible`, `toHaveText`) for behavior, and the screenshot for appearance. ## Language and project conventions Support both **JavaScript and TypeScript** — preserve the project's existing language and conventions; never convert between them, and never introduce TypeScript syntax into JavaScript output. ## Workflow 1. **Pick the smallest stable target** —