skills.rest
timinou
timinouCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-testing

Manage visual regression testing for web applications with Playwright and AI-readable screenshots.

Updated Feb 14, 2026
Search Tags:#frontend#regression testing#playwright#visual testing#ui testing#screenshot
One-click install
npx skills add https://github.com/timinou/sakya --skill visual-testing-timinou
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-testing
Source: https://github.com/timinou/sakya/tree/main/.claude/skills/visual-testing
Command: npx skills add https://github.com/timinou/sakya --skill visual-testing-timinou

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill prevents unintended visual changes in the user interface by automatically comparing screenshots against a baseline, catching layout and style regressions that traditional tests might miss.

Core Features & Use Cases

  • Visual Regression Baselines: Uses Playwright's toHaveScreenshot() to perform pixel-by-pixel comparisons against committed PNGs.
  • AI-Readable Screenshots: Generates screenshots in e2e/screenshots/ for AI analysis, enabling review without running the application.
  • Use Case: When refactoring CSS or updating components, this Skill ensures that the visual appearance remains consistent or that changes are intentional and reviewed.

Quick Start

Run bun run test:visual:update to generate or update visual regression baselines.

Frequently Asked Questions about visual-testing

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

FAQPage Schema
How do I catch CSS refactoring visual regressions with Playwright?▼

Catch CSS visual regressions by using Playwright's `toHaveScreenshot()` to perform pixel-by-pixel screenshot comparisons against committed PNG baselines. This detects unintended layout or style changes that traditional functional tests miss.

What is AI-assisted visual testing and how does it review UI updates?▼

AI-assisted visual testing generates AI-readable screenshots in the `e2e/screenshots/` directory, enabling AI to review visual updates and detect UI changes without manually running the web application.

How do I update visual regression baselines after intentional UI updates?▼

Update visual regression baselines by running `bun run test:visual:update` to generate or replace committed PNG screenshots. This ensures future pixel-by-pixel comparisons validate the new visual state.

Does visual regression testing catch layout issues that traditional UI tests miss?▼

Visual regression testing catches layout issues by comparing pixel-level screenshot differences against committed PNGs. It identifies unintended style and layout shifts that traditional UI testing often overlooks.

Do I need Playwright to run screenshot comparison tests for web applications?▼

Yes, you need Playwright to run screenshot comparison tests. The Skill requires Playwright to execute pixel-by-pixel screenshot comparisons and uses custom utilities for AI-readable image generation.

Why does my Playwright visual regression test fail after a component update?▼

Playwright visual regression tests fail after component updates because the new UI output no longer matches the committed PNG baseline. Run `bun run test:visual:update` to intentionally update the baseline.

Related Skills

Explore More Software Engineering Skills→
froide-kkfroide-kk
1

test-playwright

Provide Playwright test patterns for stable end-to-end browser tests.

Official
Intermediate
JansenAnalyticsJansenAnalytics
5

frontend-inspector

Analyze frontend screenshots to detect visual defects and generate structured reports.

Community
Intermediate
yunseo-kimyunseo-kim
1

webapp-testing

Automate local web app testing with Playwright while managing server lifecycles and capturing browser artifacts.

Community
Intermediate
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate