Visual Regression Testing

aj-geddes/useful-ai-prompts/skills/visual-regression-testing

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Detect unintended visual changes in UI by comparing screenshots across versions. Use for visual regression, screenshot diff, Percy, Chromatic, UI testing, and visual validation.

Instructions onlySoftware Development

AI-generated overview

Guides visual regression testing of UI by comparing screenshots across versions to catch unintended visual changes.

What it does: This skill provides instructions and reference guides for setting up visual regression testing of UI components and pages. It covers capturing screenshots and comparing them against baselines to detect CSS bugs, layout shifts, and design regressions. It includes guidance for Playwright, Percy, Chromatic, Cypress, and BackstopJS, plus handling dynamic content and responsive components. It produces test configurations and practices rather than running scripts itself.
When to use it: Use it when you need to detect unintended visual changes in a web UI, such as catching CSS regressions, validating responsive layouts across viewports, or reviewing visual diffs in pull requests. It is also suited to verifying design system components and theme changes.
Requirements: No scripts are shipped; it is instructions and reference documentation only. Following the examples requires a visual testing toolchain such as Playwright, Percy, Chromatic, Cypress, or BackstopJS, plus a browser environment and baseline screenshots.

Overview

Visual regression testing captures screenshots of UI components and pages, then compares them across versions to detect unintended visual changes. This automated approach catches CSS bugs, layout issues, and design regressions that traditional functional tests miss.

When to Use

Detecting CSS regression bugs
Validating responsive design across viewports
Testing across different browsers
Verifying component visual consistency
Catching layout shifts and overlaps
Testing theme changes
Validating design system components
Reviewing visual changes in PRs

Quick Start

Minimal working example:

typescript

// tests/visual/homepage.spec.tsimport { test, expect } from "@playwright/test";
test.describe("Homepage Visual Tests", () => {  test("homepage matches baseline", async ({ page }) => {    await page.goto("/");
    // Wait for images to load    await page.waitForLoadState("networkidle");
    // Full page screenshot    await expect(page).toHaveScreenshot("homepage-full.png", {      fullPage: true,      maxDiffPixels: 100, // Allow small differences    });  });
  test("responsive design - mobile", async ({ page }) => {    await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE    await page.goto("/");
    await expect(page).toHaveScreenshot("homepage-mobile.png");  });
  test("responsive design - tablet", async ({ page }) => {// ... (see reference guides for full implementation)

// tests/visual/homepage.spec.tsimport { test, expect } from "@playwright/test";
test.describe("Homepage Visual Tests", () => {  test("homepage matches baseline", async ({ page }) => {    await page.goto("/");
    // Wait for images to load    await page.waitForLoadState("networkidle");
    // Full page screenshot    await expect(page).toHaveScreenshot("homepage-full.png", {      fullPage: true,      maxDiffPixels: 100, // Allow small differences    });  });
  test("responsive design - mobile", async ({ page }) => {    await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE    await page.goto("/");
    await expect(page).toHaveScreenshot("homepage-mobile.png");  });
  test("responsive design - tablet", async ({ page }) => {// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Playwright Visual Testing [blocked]	Playwright Visual Testing
Percy Visual Testing [blocked]	Percy Visual Testing
Chromatic for Storybook [blocked]	Chromatic for Storybook
Cypress Visual Testing [blocked]	Cypress Visual Testing
BackstopJS Configuration [blocked]	BackstopJS Configuration
Handling Dynamic Content [blocked]	Handling Dynamic Content
Testing Responsive Components [blocked]	Testing Responsive Components

Best Practices

✅ DO

Hide or mock dynamic content (timestamps, ads)
Test across multiple viewports
Wait for animations and images to load
Use consistent viewport sizes
Disable animations during capture
Test interactive states (hover, focus)
Review diffs carefully before approving
Store baselines in version control

❌ DON'T

Test pages with constantly changing content
Ignore small legitimate differences
Skip responsive testing
Forget to update baselines after design changes
Test pages with random data
Use overly strict thresholds (0% diff)
Skip browser/device variations
Commit unapproved diffs

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/visual-regression-testingat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Visual Regression Testing

Visual Regression Testing

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

User Persona Creation

User Guide Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices