Visual regression tests development for website (Chromatic)

Visual Regression Testing for Websites (Chromatic)

Visual regression testing automatically compares UI screenshots to detect unintended visual changes. Chromatic is a cloud service by the Storybook team: it captures each story, compares it with baseline, and requests review for changes.

Installation and Storybook Integration

npm install -D chromatic @storybook/react
npx storybook init  # if Storybook is not yet configured

Writing Stories for Components

// components/Button/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
    component: Button,
    parameters: {
        // Chromatic: delay before screenshot for animations
        chromatic: { delay: 300 },
    },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
    args: { variant: 'primary', children: 'Save' },
};

export const Secondary: Story = {
    args: { variant: 'secondary', children: 'Cancel' },
};

export const Loading: Story = {
    args: { loading: true, children: 'Loading' },
};

export const Disabled: Story = {
    args: { disabled: true, children: 'Unavailable' },
};

First Run — Creating Baseline

npx chromatic --project-token=YOUR_TOKEN --auto-accept-changes

Chromatic uploads all stories, captures screenshots, and saves them as baseline.

GitHub Actions Integration

# .github/workflows/chromatic.yml
name: Visual Tests

on: push

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # full history needed for diff

      - uses: actions/setup-node@v4
        with: { node-version: 20 }

      - run: npm ci

      - name: Run Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          # Don't break CI on visual changes — require review
          exitZeroOnChanges: true
          # Break when unreviewed changes
          exitOnceUploaded: false

Review Workflow

1. Pull request changes a component
2. Chromatic runs in CI, finds changes
3. Review link appears in PR comment
4. Developer in Chromatic UI: approve (Accept) or reject changes
5. After approval — new baseline

Fine-tuning Parameters

// Exclude story from visual tests
export const AnimatedVersion: Story = {
    parameters: {
        chromatic: { disableSnapshot: true },
    },
};

// Capture multiple viewports
export const ResponsiveCard: Story = {
    parameters: {
        chromatic: {
            viewports: [375, 768, 1280],
        },
    },
};

// Delay for skeleton animation
export const Skeleton: Story = {
    parameters: {
        chromatic: { delay: 1000, pauseAnimationAtEnd: true },
    },
};

TurboSnap — Acceleration via Git Analysis

Chromatic analyzes changed files via Git and tests only stories that depend on changed components. For large projects, reduces time by 80%.

- name: Run Chromatic with TurboSnap
  uses: chromaui/action@latest
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    onlyChanged: true  # enable TurboSnap

Implementation Timeline

Storybook + Chromatic setup: 1 day Writing stories for 20–30 key components: 3–5 days Achieving full design system coverage: 1–2 weeks