Can I test different device sizes?

Absolutely. The configurations include predefined viewports for mobile, tablet, and desktop to ensure your responsive design remains intact across all breakpoints.

Does this work with GitHub Actions?

Yes, it includes full configuration examples for integrating visual tests into GitHub Actions pipelines, including secret management for tokens.

Which visual testing tool should I choose?

Percy is recommended for general projects due to its ease of use. Chromatic is the gold standard for Storybook users, while Playwright and BackstopJS are excellent free, self-hosted alternatives.

How does it handle dynamic content like dates and times?

The skill provides patterns to 'stabilize' snapshots by automatically hiding dynamic elements using CSS or masking techniques, preventing false-positive test failures.

Visual Regression Test Setup

Name: Visual Regression Test Setup
Author: Dexploarer

byDexploarer

•

Seguridad y Pruebas

Configures automated visual regression testing to detect unintended UI changes using pixel-perfect screenshot comparison tools.

This skill streamlines the implementation of visual regression testing by providing standardized setups for industry-leading tools like Percy, Chromatic, Playwright, and BackstopJS. It helps developers catch subtle UI regressions that functional tests often miss by automating screenshot comparisons across various viewports and browsers. Whether you are building a component library with Storybook or a complex web application, this skill provides the configuration templates, CI/CD integration steps, and best practices for handling dynamic content and animations to ensure a stable and consistent user interface.

Características Principales

01Pre-configured CI/CD workflows for GitHub Actions

02Multi-tool support including Percy, Chromatic, Playwright, and BackstopJS

03Cross-viewport testing templates for mobile, tablet, and desktop

04Advanced strategies for stabilizing tests by hiding dynamic content

05Ready-to-use boilerplate for Storybook and Playwright integrations

062 GitHub stars

Casos de Uso

01Automating cross-browser and responsive design verification

02Preventing visual regressions in shared UI component libraries

03Implementing visual review checkpoints in pull request workflows

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dexploarer/claudius-skills visual-regression-setup

For use in Claude.ai and ChatGPT

Download Skill