visual-regression

Name: visual-regression
Availability: InStock
Author: vivekmano27

Apply Playwright visual tests to desktop and mobile viewports and generate diffs.

Updated Mar 14, 2026

Search Tags:#automation #playwright #ui-testing #screenshot #visual-regression #baselines

Ready to run

npx skills add https://github.com/Vivekmano27/agent-orchestrator --skill visual-regression-vivekmano27

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-regression
Source: https://github.com/Vivekmano27/agent-orchestrator/tree/main/plugins/project-orchestrator/skills/visual-regression
Command: npx skills add https://github.com/Vivekmano27/agent-orchestrator --skill visual-regression-vivekmano27

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Capture and compare UI screenshots to detect unintended visual differences after changes, reducing regressions and manual verification.

Core Features & Use Cases

Automated visual regression tests across desktop and mobile breakpoints using Playwright.
Baseline management, diff reporting, and masked regions to handle dynamic content.
Use case: verify that a UI refresh does not alter layout, typography, or colors across pages.

Quick Start

Run the visual regression workflow to capture and compare UI screenshots against baselines and report diffs.

Frequently Asked Questions about visual-regression

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

FAQPage Schema

How do I automate visual regression testing with Playwright?▼

Automate visual regression testing by applying Playwright visual tests to desktop and mobile viewports, generating baselines, and producing diffs for regressions. It identifies UI routes needing coverage and reports unintended visual differences after code changes.

How do I handle dynamic content in screenshot comparisons?▼

Handle dynamic content in screenshot comparisons by mocking data and masking dynamic regions during test execution. This prevents transient elements from triggering false positive regression diffs in the baseline comparison.

How do I update visual baselines after an intentional UI refresh?▼

Update visual baselines after an intentional UI refresh by following the provided guidance for accepting new screenshots. The workflow produces clear instructions for replacing outdated baselines when layout, typography, or color changes are deliberate.

Can I run visual regression tests across both desktop and mobile viewports?▼

Yes, you can run visual regression tests across both desktop and mobile viewports. The workflow applies Playwright visual tests to multiple breakpoints to verify that UI changes do not alter layouts across different screen sizes.

What is visual regression testing and when do I need it?▼

Visual regression testing captures and compares UI screenshots to detect unintended visual differences after code changes. You need it to reduce manual verification and catch regressions in layout, typography, or colors across pages.