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)

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

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)

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

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

// 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');
  });
});