Разработка Visual Regression тестов для сайта (Chromatic)

Разработка Visual Regression тестов для сайта (Chromatic)

Visual regression testing — автоматическое сравнение скриншотов UI для обнаружения непреднамеренных визуальных изменений. Chromatic — облачный сервис от команды Storybook: делает снимки каждого story, сравнивает с baseline и просит ревью при изменениях.

Установка и связка со Storybook

npm install -D chromatic @storybook/react
npx storybook init  # если Storybook ещё не настроен

Написание Stories для компонентов

// 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: задержка перед скриншотом для анимаций
        chromatic: { delay: 300 },
    },
};

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

export const Primary: Story = {
    args: { variant: 'primary', children: 'Сохранить' },
};

export const Secondary: Story = {
    args: { variant: 'secondary', children: 'Отмена' },
};

export const Loading: Story = {
    args: { loading: true, children: 'Загрузка' },
};

export const Disabled: Story = {
    args: { disabled: true, children: 'Недоступно' },
};

Первый запуск — создание baseline

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

Chromatic загружает все stories, делает скриншоты, сохраняет как baseline.

Интеграция с GitHub Actions

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

on: push

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # нужна полная история для 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 }}
          # Не ломать CI при визуальных изменениях — требовать ревью
          exitZeroOnChanges: true
          # Ломать при незаревьюированных изменениях
          exitOnceUploaded: false

Workflow ревью

1. Pull request меняет компонент
2. Chromatic запускается в CI, находит изменения
3. Ссылка на ревью появляется в PR-комментарии
4. Разработчик в UI Chromatic: одобрить (Accept) или отклонить изменения
5. После одобрения — новый baseline

Параметры для тонкой настройки

// Исключить story из visual тестов
export const AnimatedVersion: Story = {
    parameters: {
        chromatic: { disableSnapshot: true },
    },
};

// Снять несколько viewport
export const ResponsiveCard: Story = {
    parameters: {
        chromatic: {
            viewports: [375, 768, 1280],
        },
    },
};

// Задержка для анимации skeleton
export const Skeleton: Story = {
    parameters: {
        chromatic: { delay: 1000, pauseAnimationAtEnd: true },
    },
};

Turbosnap — ускорение через Git-анализ

Chromatic анализирует изменённые файлы через Git и тестирует только те stories, которые зависят от изменённых компонентов. На большом проекте сокращает время на 80%.

- name: Run Chromatic with TurboSnap
  uses: chromaui/action@latest
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    onlyChanged: true  # включить TurboSnap

Срок реализации

• Настройка Storybook + Chromatic: 1 день
• Написание stories для 20–30 ключевых компонентов: 3–5 дней
• Достижение полного покрытия design system: 1–2 недели