playwright-visual-testing

# Playwright Visual Testing Skill

Patterns for visual regression testing with Playwright.

## Screenshot Assertions

### Basic Screenshot Comparison

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

test('visual comparison', async ({ page }) => {
  await page.goto('/')

  // Compare full page
  await expect(page).toHaveScreenshot()

  // With custom name
  await expect(page).toHaveScreenshot('homepage.png')
})

// Element screenshot
test('component visual test', async ({ page }) => {
  await page.goto('/components')

  const card = page.locator('.card').first()
  await expect(card).toHaveScreenshot('card-component.png')
})
```

### Screenshot Options

```typescript
await expect(page).toHaveScreenshot('name.png', {
  // Comparison options
  maxDiffPixels: 100,           // Allow N different pixels
  maxDiffPixelRatio: 0.05,      // Allow 5% difference
  threshold: 0.2,                // Color difference threshold (0-1)

  // Capture options
  fullPage: true,                // Capture entire scrollable page
  clip: { x: 0, y: 0, width: 800, height: 600 },
  scale: 'css',                  // 'css' or 'device'
  animations: 'disabled',        // Disable animations
  mask: [page.locator('.dynamic')],  // Mask dynamic content
  maskColor: '#FF00FF',          // Mask overlay color
})
```

### Updating Snapshots

```bash
# Update all snapshots
npx playwright test --update-snapshots

# Update specific test
npx playwright test visual.spec.ts --update-snapshots
```

## Handling Dynamic Content

### Masking Elements

```typescript
test('mask dynamic content', async ({ page }) => {
  await page.goto('/dashboard')

  await expect(page).toHaveScreenshot('dashboard.png', {
    mask: [
      page.locator('.timestamp'),
      page.locator('.user-avatar'),
      page.locator('.random-ad'),
    ],
  })
})
```

### Waiting for Stability

```typescript
test('wait for animations', async ({ page }) => {
  await page.goto('/animated-page')

  // Wait for animations to complet