visual-regression-test-setup

Community

Catch UI bugs, prevent visual regressions.

AuthorDexploarer
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Unintended visual changes in a user interface often go unnoticed until they reach production, leading to a poor user experience and costly fixes. This Skill automates the setup of visual regression testing, catching these bugs early.

Core Features & Use Cases

  • Multi-Tool Integration: Sets up visual testing with popular tools like Percy, Chromatic (for Storybook), Playwright, or BackstopJS.
  • CI/CD Automation: Provides configurations for GitHub Actions to integrate visual tests directly into your development workflow.
  • Use Case: "Set up visual regression testing for my React application using Playwright and Percy, including mobile and desktop viewports."

Quick Start

Set up visual regression testing for my web application using Playwright and Percy, targeting 'http://localhost:3000'.

Dependency Matrix

Required Modules

@percy/cli@percy/playwright@percy/cypress@percy/puppeteer@percy/storybookchromaticplaywrightbackstopjs

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: visual-regression-test-setup
Download link: https://github.com/Dexploarer/claudius-skills/archive/main.zip#visual-regression-test-setup

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository