visual-regression

Capture and compare UI screenshots against baselines to detect visual regressions.

13|3|Updated Mar 27, 2026

Search Tags:#screenshots #playwright #ci #visual-testing #visual-regression #baselines

Ready to run

npx skills add https://github.com/heaptracetechnology/heaptrace-skills --skill visual-regression-heaptracetechnology

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-regression
Source: https://github.com/heaptracetechnology/heaptrace-skills/tree/main/automation-qa/visual-regression
Command: npx skills add https://github.com/heaptracetechnology/heaptrace-skills --skill visual-regression-heaptracetechnology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual regressions slip into products when UI changes are introduced without notice. This skill provides automated screenshot-based checks that detect unintended layout shifts, color changes, and typography regressions before shipping.

Core Features & Use Cases

Automated screenshot comparisons across desktop, tablet, and mobile viewports to catch layout and rendering regressions.
Threshold configuration and masking to minimize false positives from dynamic content or animations.
Baseline management and CI integration to keep a stable, reviewable visual history.
Workflow guidance for component libraries, dashboards, marketing pages, and admin interfaces.

Quick Start

Configure your Playwright visual tests and run the visual regression suite to generate baselines.

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 regressions in my UI automatically?▼

Visual regression testing catches unintended UI changes by automatically capturing screenshots across multiple viewports and comparing them against stored baselines to detect layout shifts before shipping.

How do I set up Playwright visual tests to generate baselines?▼

Configure your Playwright visual tests to capture initial UI screenshots, run the visual regression suite to generate baselines, then use baseline management to maintain a reviewable visual history in CI.

Can I mask dynamic content to avoid false positives in visual testing?▼

Visual testing supports threshold configuration and dynamic-content masking to minimize false positives caused by animations or changing data, ensuring stable and reliable visual validation in CI.

Does visual regression testing work for component libraries and admin interfaces?▼

Visual regression testing provides workflow guidance and automated screenshot comparisons applicable to component libraries, dashboards, marketing pages, and admin interfaces across multiple themes and viewports.

What is the best way to maintain a stable visual history in CI?▼

Maintain a stable visual history in CI by using baseline management for your visual regression suite, automatically capturing and comparing UI screenshots to prevent unintended layout and rendering regressions.