visual-testing

Detects pixel-level UI differences by comparing baselines with current renders across browsers and viewports.

64|12|Updated Mar 23, 2026

Search Tags:#diff #playwright #ci-cd #screenshot #visual-testing #masking #baselines

Ready to run

npx skills add https://github.com/petrkindlmann/qa-skills --skill visual-testing-petrkindlmann

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pixel-perfect visual regressions can hide behind functional tests; this Skill provides a structured approach to detect unintended UI changes by comparing baselines against current renders, ensuring design fidelity.

Core Features & Use Cases

Full-page and component-level screenshot testing with Playwright and optional tools like Chromatic, Percy, and Argos CI.
Baseline management, masking of dynamic content, threshold tuning, and cross-browser coverage to maintain stable visual quality in CI.
Use cases include validating design changes, catching layout shifts, and approving visual diffs before releases.

Quick Start

Create your first visual baseline by capturing a screenshot of the target page and reviewing subsequent diffs in CI.

Frequently Asked Questions about visual-testing

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

FAQPage Schema

How do I set up visual regression testing with Playwright to catch UI changes?▼

Visual regression testing with Playwright captures baseline screenshots and compares them against current UI renders to detect pixel-level differences. You capture a full-page or component-level screenshot of the target page, then review subsequent diffs in CI to validate design changes and catch layout shifts before release.

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

Visual regression testing identifies pixel-level differences between baseline screenshots and current UI renders across multiple viewports. You need it when functional tests pass but you must ensure design fidelity, validate layout shifts, and catch unintended UI changes that hide behind functional tests.

Does visual regression testing work with Chromatic, Percy, and Argos CI?▼

Visual regression testing integrates with Chromatic, Percy, and Argos CI for CI-driven validation. These tools work alongside Playwright to enforce baseline management, dynamic content masking, threshold tuning, and cross-browser consistency through dedicated workflows.

How do I mask dynamic content in screenshot tests to prevent false positives?▼

Masking dynamic content in screenshot tests involves configuring Playwright and CI tools to ignore specific UI elements that change between renders. This prevents false positive visual diffs by stabilizing visual quality checks across viewports and browsers.

What's the best way to manage visual testing baselines across multiple viewports?▼

The best way to manage visual testing baselines is capturing full-page and component-level screenshots across multiple viewports and enforcing baseline management within your CI-CD pipeline. You review and approve visual diffs, tuning thresholds to maintain stable cross-browser consistency.

Why does visual regression testing fail in CI and how do I tune thresholds?▼

Visual regression testing fails in CI when current UI renders differ from baselines beyond allowed thresholds. You tune thresholds and mask dynamic content to stabilize CI-driven validation, preventing false positives while still detecting genuine pixel-level UI regressions across viewports.