skills.rest
kalilurrahman
kalilurrahmanCOMMUNITY
Explore all skills by this author →
Website𝕏@krahmanGitHub

visual-regression

Implement visual regression testing with Playwright and Percy screenshot comparison to detect unintended UI changes.

1|Updated Mar 21, 2026
Search Tags:#playwright#ui testing#visual regression#percy#snapshot testing#screenshot testing#ci pipeline
One-click install
npx skills add https://github.com/kalilurrahman/kr-claudiator-skills-original-prompts --skill visual-regression-kalilurrahman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-regression
Source: https://github.com/kalilurrahman/kr-claudiator-skills-original-prompts/tree/main/07-testing-quality/visual-regression
Command: npx skills add https://github.com/kalilurrahman/kr-claudiator-skills-original-prompts --skill visual-regression-kalilurrahman

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, @percy/playwright.

What problem does it solve? Functional tests verify behavior but miss visual defects like layout shifts, color changes, and broken components. This Skill sets up screenshot-based comparison testing that catches unintended UI changes before they reach production. ## Core Features & Use Cases - Playwright Snapshot Testing: Configure built-in screenshot comparison with diff thresholds, animation disabling, and dynamic content masking across desktop, mobile, and tablet viewports. - Percy Integration: Use managed visual testing with multi-width responsive snapshots and richer diff reporting for checkout flows and page-level captures. - CI Pipeline Setup: Run visual tests on pull requests, upload diff artifacts on failure, comment results on PRs, and manage baseline updates through a deliberate workflow. - Use Case: A team refactoring their design system runs component-level screenshot tests against Storybook stories for every button and alert state, catching a padding regression on mobile before merge. ## Quick Start Set up Playwright visual regression tests for my React app covering the homepage and dashboard across desktop and mobile viewports with CI integration.

Frequently Asked Questions about visual-regression

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up visual regression testing with Playwright?▼

Configure Playwright's toHaveScreenshot assertion with maxDiffPixelRatio and threshold settings, then capture page or component screenshots in tests. Run with --update-snapshots to create baselines, and subsequent runs compare against them automatically.

Playwright snapshots vs Percy for visual testing?▼

Playwright snapshots are free and self-hosted, storing baselines in your repository. Percy is a managed service offering richer diff reporting, automatic multi-width responsive snapshots, and a web-based approval workflow.

Why are my visual regression tests flaky?▼

Flakiness usually comes from animations, dynamic content like timestamps or live metrics, and screenshots taken before assets finish loading. Disable CSS animations, mask dynamic elements with the mask option, and wait for network idle before capturing.

How do I update visual regression baselines safely?▼

Use a deliberate update workflow rather than an accidental flag. Run tests with UPDATE_SNAPSHOTS=true, review the git diff of changed snapshots, and commit only after confirming the UI changes are intentional.

Should I test full pages or individual components?▼

Component-level tests are more stable because full-page tests fail on any change anywhere on the page. Use Storybook stories for component states and reserve full-page captures for critical flows like checkout.

Related Skills

Explore More Software Engineering Skills→
mauriciodelriomauriciodelrio
3

storybook

Configure Storybook environments and author CSF3 stories for React applications.

Community
Advanced
PostHogPostHog
713

triaging-visual-review-runs

Inspects and triages PostHog Visual Review screenshot regression runs gating PR merges.

Official
Advanced
cosmicstack-labscosmicstack-labs
364

e2e-testing

Write stable end-to-end tests for web apps using Playwright and Cypress.

Official
Intermediate
growilabsgrowilabs
1.5k

essential-test-design

Guide test authors to verify observable behavior instead of internal implementation details.

Official
Intermediate