← ClaudeAtlas

playwright-visual-regressionlisted

Create and maintain visual regression tests, what to screenshot, how to stabilize state first, threshold selection, masking third-party noise, and baseline management. Use when adding VR coverage or diagnosing a flaky screenshot.
ella79/agentic-playwright-suite · ★ 8 · Testing & QA · score 78
Install: claude install-skill ella79/agentic-playwright-suite
# Visual Regression Skill ## Outcome Screenshots that fail when the product's appearance changes and at no other time. A VR suite that cries wolf gets ignored, which is worse than having none. ## Repository Conventions | Path | Purpose | | --------------------------------------- | ----------------------------------------------------- | | `vr-tests/` | VR spec files, one per feature area | | `vr-tests/<name>.vr.spec.ts-snapshots/` | Baseline PNGs, created by Playwright next to the spec | | `specs/vr-test-plans/` | VR test plans | | Item | Pattern | Example | | ---------- | -------------------- | --------------------------- | | Spec file | `<area>.vr.spec.ts` | `cart.vr.spec.ts` | | Screenshot | `<area>-<state>.png` | `cart-with-single-item.png` | Playwright appends the platform suffix (`-chromium-linux.png`) itself. Baselines are generated on Linux to match CI. A baseline captured on Windows or macOS will not match and must not be committed. ## Plan shape `specs/vr-test-plans/` follows [references/vr-plan-template.md](references/vr-plan-template.md). ## Before adding a capture Four questions, and a no to any of them means the case does not exist. Answer the first and the third by **taking one throwaway capture and looking at it**, never