visual-regression

# Visual Regression Testing Skill

Expert in visual regression testing - automated detection of unintended visual changes in web applications using screenshot comparison, pixel diffing, and visual testing frameworks.

## Why Visual Regression Testing?

**Problems It Solves**:
- CSS changes breaking layout unexpectedly
- Responsive design regressions (mobile/tablet/desktop)
- Cross-browser rendering differences
- Component library changes affecting consumers
- UI regressions that functional tests miss

**Example Scenario**:
```
Developer changes global CSS: `.container { padding: 10px }`
  ↓
Accidentally breaks checkout page layout
  ↓
Functional E2E tests pass (buttons still clickable)
  ↓
Visual regression test catches layout shift
```

## Core Tools

### 1. Playwright Visual Snapshots (Built-in)

**Why Playwright?**
- No third-party service required (free)
- Fast (parallel execution)
- Built-in automatic masking (hide dynamic content)
- Cross-browser support (Chromium, Firefox, WebKit)

#### Basic Snapshot Test

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

test('homepage should match visual baseline', async ({ page }) => {
  await page.goto('https://example.com');

  // Take full-page screenshot and compare to baseline
  await expect(page).toHaveScreenshot('homepage.png');
});
```

**First Run** (create baseline):
```bash
npx playwright test --update-snapshots
# Creates: tests/__screenshots__/homepage.spec.ts/homepage-chromium-darwin.png
```

**Subsequent Runs** (compare to baseline):
```bash
npx playwright test
# Compares current screenshot to baseline
# Fails if difference exceeds threshold
```

#### Element-Level Snapshots

```typescript
test('button should match visual baseline', async ({ page }) => {
  await page.goto('/buttons');

  const submitButton = page.locator('[data-testid="submit-button"]');
  await expect(submitButton).toHaveScreenshot('submit-button.png');
});
```

#### Configurable Thresholds

```typescript
// playwright.config.