How does this skill help with flaky visual tests?

It provides patterns for masking dynamic content like timestamps and ads, and includes custom fixtures to disable animations and transitions to ensure screenshots remain stable.

Can I use this for Storybook components?

Yes, it includes specific configurations and examples for integrating Percy with Storybook to capture component-level snapshots in various interaction states.

Does it support dark mode testing?

Absolutely. The skill includes implementation patterns for programmatically toggling dark mode classes to validate UI appearance in both light and dark themes.

Is CI/CD integration covered?

Yes, it provides ready-to-use GitHub Actions configurations for running Playwright visual tests and syncing results with Percy on every pull request.

Visual Regression Testing for React

Name: Visual Regression Testing for React
Author: IvanTorresEdge

byIvanTorresEdge

セキュリティとテスト

Automates UI visual consistency checks using Playwright and Percy to detect unintended layout or style changes across browsers and devices.

概要

This skill empowers developers to implement robust visual regression testing workflows within React applications. By leveraging Playwright for local screenshot comparisons and Percy for cloud-based visual review, it helps catch subtle UI bugs, broken layouts across screen sizes, and unintended CSS side effects that traditional functional tests often miss. It provides pre-configured patterns for handling dynamic content, stabilizing animations, dark mode testing, and Storybook integration to ensure a polished and consistent user experience across every deployment.

主な機能

Advanced stability techniques for masking dynamic content and freezing animations
Cloud-based visual review integration with Percy and Storybook
0 GitHub stars
Cross-browser and responsive layout validation for mobile, tablet, and desktop viewports
Automated screenshot comparison with Playwright's toHaveScreenshot API
Pre-configured GitHub Actions workflows for continuous visual integration

ユースケース

Catching CSS regressions during large-scale refactors of global stylesheets
Implementing visual approval workflows for design system components using Storybook
Verifying UI consistency across a wide range of device resolutions and browsers

概要

主な機能

Advanced stability techniques for masking dynamic content and freezing animations
Cloud-based visual review integration with Percy and Storybook
0 GitHub stars
Cross-browser and responsive layout validation for mobile, tablet, and desktop viewports
Automated screenshot comparison with Playwright's toHaveScreenshot API
Pre-configured GitHub Actions workflows for continuous visual integration

ユースケース

Catching CSS regressions during large-scale refactors of global stylesheets
Implementing visual approval workflows for design system components using Storybook
Verifying UI consistency across a wide range of device resolutions and browsers