skills.rest
Acurioustractor
AcurioustractorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-testing

Capture and compare Playwright screenshot diffs across browsers and viewports.

Updated Aug 27, 2026
Search Tags:#screenshots#reporting#playwright#e2e-testing#visual-testing#viewport#visual-regression
One-click install
npx skills add https://github.com/Acurioustractor/empathy-ledger-v2 --skill visual-testing-acurioustractor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-testing
Source: https://github.com/Acurioustractor/empathy-ledger-v2/tree/main/.claude/skills/local/visual-testing
Command: npx skills add https://github.com/Acurioustractor/empathy-ledger-v2 --skill visual-testing-acurioustractor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams detect unintended UI changes by automatically capturing and comparing screenshots of web pages across multiple viewports using Playwright.

Core Features & Use Cases

  • Automated visual regression checks: capture baseline screenshots and compare them against current renderings to identify differences.
  • Viewport coverage: verify designs across Desktop, Laptop, Tablet, and Mobile sizes to ensure responsive layouts.
  • UI health reporting: generate HTML diffs and reports to review visual changes during development and before releases.
  • Use Case: after a UI update, run visual tests to confirm no unexpected changes on critical pages and surface diffs for review.

Quick Start

Run visual tests with npm run test:visual to capture screenshots across pages. Update baseline snapshots with npm run test:visual:update. Run UI-enabled tests with npm run test:e2e:ui for interactive testing. View the generated HTML report with npx playwright show-report.

Frequently Asked Questions about visual-testing

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 with Playwright by capturing baseline screenshots and comparing them against current renderings. Run npm run test:visual to generate screenshot diffs across multiple pages, then review the results in an HTML report.

How do I test responsive layouts across different viewport sizes?▼

Test responsive layouts across Desktop, Laptop, Tablet, and Mobile viewports by running visual regression checks. The tests capture screenshots at each viewport size to verify design consistency and surface unintended UI changes across screen dimensions.

How do I update baseline screenshots when intentional UI changes happen?▼

Update baseline screenshots by running npm run test:visual:update. This command regenerates the reference snapshots so subsequent visual regression tests compare against the new UI state instead of flagging expected design updates as failures.

Do I need Node.js to run Playwright visual regression tests?▼

Yes, Node.js is required to run Playwright visual regression tests. The Skill relies on Node.js with Playwright tooling via npm scripts, executing test specs located in the e2e/ directory and storing generated artifacts in e2e/test-results.

How do I review visual regression test failures?▼

Review visual regression test failures by running npx playwright show-report to open the generated HTML report. The report displays screenshot diffs highlighting pixel-level differences between baseline snapshots and current renderings for easy visual inspection.

Can I run Playwright visual tests interactively with a UI?▼

Yes, run Playwright visual tests interactively with a UI by executing npm run test:e2e:ui. This command enables interactive testing mode, allowing developers to observe and debug visual regression checks across configured viewports in real time.

Related Skills

Explore More Software Engineering Skills→
fritzprixfritzprix
8

system-setup

Install and verify MCP runtime dependencies across Windows, Linux, and macOS.

Community
Intermediate
mattbutlerengineeringmattbutlerengineering
1

rialto-visual-diff-review

Classify Playwright visual diff failures as intentional, regression, or stale.

Community
Intermediate
pwv-vcpwv-vc
6

playwright-tester

Automate browser-based visual testing and end-to-end validation with Playwright.

Official
Intermediate
jmaglyjmagly
175

regression-visual

Detect visual and UI regressions via automated screenshot comparison and pixel-diff analysis.

Community
Advanced