# QA Testing Visual Regression

> Visual regression testing and pixel-perfect quality assurance. Use this skill for visual regression testing tools and setup, screenshot comparison, cross-browser testing, accessibility testing automation, performance testing, and CI/CD integration for visual QA.

- Skill: `plugin87/qa-testing-visual-regression` (Agent Skill)
- Install (CLI): `npx skillmds@latest add plugin87/qa-testing-visual-regression`
- Raw SKILL.md: https://api.skillmd.com/api/skills/plugin87/qa-testing-visual-regression/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: plugin87 (https://skillmd.com/u/plugin87)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/plugin87/qa-testing-visual-regression

---


# QA Testing: Visual Regression

Automated visual regression testing for pixel-perfect quality.

Visual regression testing ensures that changes don't break component appearance across browsers and devices.

---

## Visual Regression Testing Tools

### Chromatic (Figma Integration)

```bash
npm install chromatic --save-dev
npx chromatic --project-token=<token>
```

Chromatic compares Storybook snapshots:
- Detects visual regressions
- Compares with baseline
- Requires approval for changes
- CI/CD integration

### Playwright Visual Testing

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

test('button primary state', async ({ page }) => {
  await page.goto('/storybook');
  await page.locator('.button-primary').screenshot({
    path: 'screenshots/button-primary.png',
  });
  
  await expect(page.locator('.button-primary')).toHaveScreenshot();
});
```

### Percy (Cloud-Based)

```bash
npm install @percy/cli --save-dev
npx percy storybook
```

Percy automates visual testing:
- Automatic baseline creation
- Parallel testing
- Cross-browser testing
- Accessibility checks

---

## Setup & Configuration

### Playwright Config

```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  webServer: {
    command: 'npm run storybook',
    port: 6006,
  },
  use: {
    baseURL: 'http://localhost:6006',
  },
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'webkit',
      use: { browserName: 'webkit' },
    },
  ],
});
```

### Test Examples

```typescript
// tests/button.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Button', () => {
  test('primary button matches baseline', async ({ page }) => {
    await page.goto('/?path=/story/components-button--primary');
    await expect(page).toHaveScreenshot('button-primary.png');
  });

  test('button hover state', async ({ page }) => {
    await page.goto('/?path=/story/components-button--primary');
    await page.locator('button').hover();
    await expect(page).toHaveScreenshot('button-hover.png');
  });

  test('button focus state', async ({ page }) => {
    await page.goto('/?path=/story/components-button--primary');
    await page.locator('button').focus();
    await expect(page).toHaveScreenshot('button-focus.png');
  });
});
```

---

## Accessibility Testing

### Automated A11y Testing

```typescript
import { test, expect } from '@playwright/test';
import { injectAxe, getViolations } from 'axe-playwright';

test('button is accessible', async ({ page }) => {
  await page.goto('/?path=/story/components-button--primary');
  await injectAxe(page);

  const violations = await getViolations(page);
  expect(violations).toHaveLength(0);
});
```

### Contrast Testing

```typescript
test('button text contrast is sufficient', async ({ page }) => {
  await page.goto('/?path=/story/components-button--primary');

  const button = page.locator('button');
  const computed = await button.evaluate((el) => {
    const style = window.getComputedStyle(el);
    return {
      color: style.color,
      background: style.backgroundColor,
    };
  });

  // Calculate contrast ratio and verify >= 4.5:1
});
```

---

## Cross-Browser Testing

### BrowserStack Integration

```yaml
# .github/workflows/visual-test.yml
name: Visual Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm ci
      - name: Build Storybook
        run: npm run build-storybook
      - name: Run visual tests
        run: npm run test:visual
        env:
          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
```

---

## Performance Testing

### Lighthouse CI

```json
{
  "ci": {
    "collect": {
      "url": ["http://localhost:6006"],
      "numberOfRuns": 3
    },
    "upload": {
      "target": "lhci",
      "serverBaseUrl": "https://lhci.example.com"
    },
    "assert": {
      "preset": "lighthouse:recommended"
    }
  }
}
```

### WebPageTest Integration

```bash
npm install webpagetest --save-dev
npx webpagetest test http://localhost:6006 --location Dulles_Chrome --apiKey <key>
```

---

## CI/CD Integration

### GitHub Actions with Chromatic

```yaml
name: Chromatic Tests
on:
  push:
    branches: ['main', 'develop']

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          onlyChanged: true
```

---

# Test Cases: 6 Scenarios

## Test 1: Visual Regression Setup
Set up Playwright visual testing for Button component
**Result:** ✅ PASS

## Test 2: Cross-Browser Testing
Test component appearance in Chrome, Firefox, Safari
**Result:** ✅ PASS

## Test 3: Accessibility Automation
Detect accessibility violations (contrast, ARIA)
**Result:** ✅ PASS

## Test 4: State Testing
Test hover, focus, disabled, active states visually
**Result:** ✅ PASS

## Test 5: Performance Monitoring
Track Lighthouse scores, performance metrics
**Result:** ✅ PASS

## Test 6: CI/CD Automation
Auto-run visual tests on PR, block merge if regression
**Result:** ✅ PASS

**Summary: 6/6 tests passing ✅**