# 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.

- **Type:** Skill
- **Install:** `agentstack add skill-plugin87-full-stack-design-skills-qa-testing-visual-regression`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [plugin87](https://agentstack.voostack.com/s/plugin87)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [plugin87](https://github.com/plugin87)
- **Source:** https://github.com/plugin87/full-stack-design-skills/tree/main/skills/tier-3-workflow-integration/qa-testing-visual-regression

## Install

```sh
agentstack add skill-plugin87-full-stack-design-skills-qa-testing-visual-regression
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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=
```

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 
```

---

## 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 ✅**

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [plugin87](https://github.com/plugin87)
- **Source:** [plugin87/full-stack-design-skills](https://github.com/plugin87/full-stack-design-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-plugin87-full-stack-design-skills-qa-testing-visual-regression
- Seller: https://agentstack.voostack.com/s/plugin87
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.