skills.rest
MolcajeteAI
MolcajeteAIOFFICIAL
Explore all skills by this author →
GitHub

visual-regression

Automate visual regression testing with Playwright and Percy across browsers and viewports.

2|1|Updated Nov 13, 2025
Search Tags:#testing#playwright#ui automation#visual regression#percy#screenshot testing
One-click install
npx skills add https://github.com/MolcajeteAI/plugin --skill visual-regression-molcajeteai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-regression
Source: https://github.com/MolcajeteAI/plugin/tree/main/deprecated/tech-stacks/js/react/skills/visual-regression
Command: npx skills add https://github.com/MolcajeteAI/plugin --skill visual-regression-molcajeteai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @percy/cli, @percy/playwright, @percy/storybook, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of catching unintended visual changes in web applications by using screenshot-based testing, ensuring UI consistency across different browsers and viewports.

Core Features & Use Cases

  • Automated Screenshot Testing: Integrates with Playwright and Percy to capture and compare screenshots of web pages and components.
  • Dynamic Content Handling: Provides strategies for masking dynamic elements and handling animations to ensure stable visual tests.
  • Responsive Testing: Captures screenshots across various device viewports (mobile, tablet, desktop).
  • Use Case: After a UI update, automatically run visual regression tests to ensure that buttons, forms, and layouts still appear as expected across all supported devices, preventing visual bugs from reaching production.

Quick Start

Use the visual-regression skill to run all visual tests in the tests/visual/ directory.

Frequently Asked Questions about visual-regression

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

FAQPage Schema
How do I catch visual bugs with automated screenshot testing?▼

Automated visual regression testing catches visual bugs by capturing and comparing screenshots of web pages using Playwright and Percy to detect unintended UI changes across different browsers and viewports.

How do I handle dynamic content and animations during visual regression testing?▼

Visual regression testing handles dynamic content by providing strategies for masking dynamic elements and controlling animations, which ensures stable screenshot comparisons and prevents false positives.

Can I use Percy and Playwright together for responsive visual testing?▼

Yes, Percy integrates with Playwright to perform responsive visual testing, capturing and comparing screenshots across various device viewports including mobile, tablet, and desktop to validate UI consistency.

What is the best way to validate UI consistency across multiple browsers after an update?▼

Automated screenshot comparison is the best way to validate UI consistency, automatically running visual regression tests after a UI update to verify buttons, forms, and layouts appear as expected across all supported devices.

Do I need Percy to run Playwright visual regression tests?▼

Yes, this visual regression testing approach requires Percy dependencies like @percy/cli, @percy/playwright, and @percy/storybook to automate screenshot capture, comparison, and browser viewport validation alongside Playwright.

Related Skills

Explore More Software Engineering Skills→
AZANIRAZANIR
2

qa-visual-regression-writer

Generate visual regression tests with Playwright, Percy, or BackstopJS.

Community
Advanced
vecearvecear

visual-regression-tester

Automate visual regression testing of UI with Playwright, Chromatic, or Percy.

Community
Advanced
imbue-aiimbue-ai
213

storybook-screenshot

Automate Storybook component story screenshots with Playwright and Python scripts.

Official
Intermediate
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced