visual-regression-setup_skill

This skill helps you set up visual regression testing with Percy, Chromatic, or Playwright to catch UI changes early.

TypeScript

4

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill dexploarer/claudius-skills --skill visual-regression-setup

SKILL.md12.6 KB

Overview

This skill sets up automated visual regression testing using Percy, Chromatic, Playwright, BackstopJS, or similar tools to catch unintended UI changes via screenshot comparison. It provides concrete configuration, test examples, CI integration, and maintenance guidance so teams can add reliable screenshot tests quickly. The goal is repeatable, low‑noise visual checks across viewports and component states.

How this skill works

The setup installs the chosen test runner and assertion tool, adds snapshot tests that capture pages, components, or states, and compares screenshots to a stored baseline. CI jobs run the visual tests on pull requests or push events and report diffs to a dashboard (Percy/Chromatic) or CI artifacts. The workflow includes strategies to hide dynamic content, disable animations, and update baselines consciously.

When to use it

Add screenshot tests to prevent regressions in UI after CSS or component changes
Integrate visual checks into CI for pull requests touching components or pages
Validate responsive layouts and dark mode across multiple viewports
Add component‑level snapshots for design systems (use Chromatic with Storybook)
Use Playwright/BackstopJS for free, self‑hosted visual comparisons

Best practices

Test a targeted set of critical pages and components instead of every route
Hide or normalize dynamic content (timestamps, random IDs) before snapshots
Disable animations and transitions during captures for consistent results
Run tests across key viewports and relevant browsers in CI
Review diffs manually and update baselines only when changes are intentional

Example use cases

Percy + Playwright: snapshot homepage in mobile, tablet, desktop and dark mode
Chromatic + Storybook: capture component states (hover, focus, disabled) for a design system
Playwright native snapshots: assert specific button screenshots across viewports
BackstopJS: self‑hosted baseline/reference flow for staging environment
CI integration: run visual tests only on PRs that touch src/components/** or src/styles/**

FAQ

Chromatic with Storybook is the best fit for component libraries; it captures stories and provides a dedicated review UI.

How do I reduce flaky visual tests?

Hide dynamic elements, disable animations, wait for networkidle or specific elements, and constrain snapshots to focused selectors instead of whole pages.