visual-regression

name

visual-regression

description

Use this skill when writing, reviewing, or debugging visual regression tests and responsive design checks. Covers screenshot comparison with Playwright, baseline management, pixel difference thresholds, responsive breakpoint testing, dark mode testing, and component-level visual testing. Trigger when the user mentions visual regression, screenshot testing, UI comparison, responsive design testing, or layout verification.

Visual & UI Regression Testing Skill

A reference for GitHub Copilot to generate visual regression tests and responsive design checks.

---

Screenshot Comparison

When to use: Catching unintended visual changes across releases.

Prompting patterns:

Write a visual regression test using Playwright that:
- Takes screenshots of [page/component] at mobile (375px), tablet (768px), and desktop (1440px)
- Compares against baseline images
- Highlights pixel differences above a threshold
- Covers key states: default, hover, active, disabled, error

Example:

import { test, expect } from '@playwright/test';

test('homepage matches baseline', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png');
});

test('mobile layout matches baseline', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 812 });
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage-mobile.png', {
    maxDiffPixelRatio: 0.002,
  });
});

test('header component matches baseline', async ({ page }) => {
  await page.goto('/');
  const header = page.getByRole('banner');
  await expect(header).toHaveScreenshot('header.png');
});

---

Responsive Design

Prompting patterns:

Verify [page/component] renders correctly at these breakpoints:
- 375px (mobile portrait)
- 768px (tablet)
- 1024px (desktop)
- 1440px (large desktop)
Check for: overflow, text truncation, tap target sizes, image scaling.

---

Best Practices

• Use toHaveScreenshot() in Playwright for built-in visual comparison
• Set an appropriate pixel difference threshold (e.g., 0.2%) to avoid false positives from anti-aliasing
• Update baselines intentionally — never auto-accept
• Test dark mode and high-contrast mode if supported
• Capture component-level screenshots, not just full pages
• Test interactive states (hover, focus, active) for key UI elements
• Run visual tests on a consistent OS/browser to avoid cross-platform rendering differences