Розробка 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

Робочий процес ревью

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

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

// Виключити story з візуальних тестів
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 тижні