skills.rest
zinohome
zinohomeCOMMUNITY
Explore all skills by this author →
GitHub

visual-regression-tester

Implements visual regression testing with screenshot comparison and CI integration using Playwright or Chromatic.

Updated Mar 16, 2026
Search Tags:#playwright#ui testing#chromatic#storybook#visual regression#ci integration#screenshot testing
One-click install
npx skills add https://github.com/zinohome/RTMessage --skill visual-regression-tester-zinohome
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-regression-tester
Source: https://github.com/zinohome/RTMessage/tree/main/.github/skills/visual-regression-tester
Command: npx skills add https://github.com/zinohome/RTMessage --skill visual-regression-tester-zinohome

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, chromatic, @chromatic-com/storybook.

What problem does it solve? Unintended UI changes often slip into production because functional tests cannot detect visual differences like layout shifts, broken styles, or theme regressions. This Skill sets up automated screenshot comparison so visual changes are caught and reviewed before merging. ## Core Features & Use Cases - Playwright Visual Testing: Configure snapshot directories, diff thresholds, and screenshot assertions for pages, components, and interactive states like hover and focus. - Responsive and Dark Mode Coverage: Capture screenshots across mobile, tablet, and desktop viewports plus light and dark color schemes. - Chromatic and CI Integration: Wire Chromatic into Storybook and GitHub Actions, upload diff artifacts on failure, and manage baseline updates. - Use Case: A team merging a CSS refactor runs visual tests in CI; the pipeline flags a 2-pixel navigation shift, uploads the diff image as an artifact, and blocks the merge until the change is approved or the baseline is updated. ## Quick Start Set up Playwright visual regression tests for my homepage with multi-viewport screenshots and a GitHub Actions workflow.

Frequently Asked Questions about visual-regression-tester

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

FAQPage Schema
How do I set up visual regression testing with Playwright?▼

Install @playwright/test, configure snapshotDir and toHaveScreenshot thresholds in playwright.config.ts, then write tests calling expect(page).toHaveScreenshot(). Run with --update-snapshots to create baselines and compare against them in subsequent runs.

Playwright vs Chromatic for visual testing, which should I use?▼

Playwright suits full-page and end-to-end screenshot comparisons you host yourself, while Chromatic integrates with Storybook for component-level snapshots with cloud review UI. The Skill covers configuration for both tools.

How do I test dark mode screenshots in Playwright?▼

Use page.emulateMedia({ colorScheme: 'dark' }) before capturing the screenshot to simulate the user's preferred color scheme. You can also click a theme toggle element and wait for transitions before snapshotting.

Why do my Playwright screenshot tests fail inconsistently?▼

Flaky visual tests usually come from animations, unloaded fonts, or network latency. Disable animations with injected CSS, wait for networkidle, and set maxDiffPixelRatio thresholds to tolerate minor rendering differences.

How do I update visual test baselines after intentional UI changes?▼

Run playwright test --update-snapshots to regenerate baseline images after reviewing the diffs. The Skill recommends a package.json script like test:visual:update and reviewing every baseline change before committing.

Related Skills

Explore More Software Engineering Skills→
gihwan-devgihwan-dev
1

component-screenshot

Capture Storybook story screenshots as PNG assets by story-id.

Community
Intermediate
PostHogPostHog
713

triaging-visual-review-runs

Inspects and triages PostHog Visual Review screenshot regression runs gating PR merges.

Official
Advanced
CodeAtCodeCodeAtCode
14

playwright-visual-regression

Compare UI screenshots against baselines with Playwright and report visual diffs.

Official
Advanced
pure-golangpure-golang
2

playwright-cli

Automate browser interactions to navigate, fill forms, capture screenshots, and extract page data.

Official
Advanced