Skills
.Work. You
Rest

visual-testing

Community

Spot visual regressions with Playwright

Software Engineering#screenshots#reporting#playwright#e2e-testing#visual-testing#viewport#visual-regression
AuthorAcurioustractor
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: visual-testing
Download link: https://github.com/Acurioustractor/empathy-ledger-v2/archive/main.zip#visual-testing

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.