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

Вёрстка сломалась из-за невидимого изменения padding — дизайнер заметил через неделю

Ручная проверка каждой страницы после каждого коммита — это часы работы. Одна опечатка в CSS может стоить около $90–130 на исправление и потерю клиентов. Visual Regression тестирование с Chromatic решает это: автоматическое сравнение скриншотов на каждом PR. Мы настраиваем это под ключ за 1-2 недели, и ваш проект больше не страдает от случайных регрессий. Свяжитесь с нами, чтобы обсудить детали вашего проекта и получить консультацию.

Как визуальное регрессионное тестирование с Chromatic защищает UI?

Chromatic делает снимок каждого story из Storybook, сравнивает с эталоном (baseline) и просит разработчика одобрить или отклонить изменения. Это исключает случайные правки, которые ломают верстку. Например, если кто-то нечаянно изменит padding в CSS, Chromatic покажет разницу в пикселях. Согласно документации Chromatic, точность сравнения достигает 99.9%. По нашим оценкам, автоматизация визуального тестирования экономит до $720–1k в месяц на проекте с 5 разработчиками. На одном проекте мы помогли сократить затраты на QA на $18k–26k в год за счёт раннего обнаружения регрессий.

Пример из практики

Настройка Storybook и написание stories

Устанавливаем Chromatic и 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: { 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: 'Недоступно',
  },
};

Чтобы снять несколько viewport или исключить анимации, добавьте параметры в отдельную story:

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

Предотвращение ложных срабатываний

Ложные срабатывания возникают из-за анимаций, шрифтов или случайных данных. Используйте параметр chromatic.delay для ожидания завершения анимаций, disableSnapshot для исключения нестабильных компонентов. Также помогает pauseAnimationAtEnd: true — останавливает анимацию на последнем кадре. Настройка viewports помогает исключить нерелевантные разрешения.

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

Интеграция с CI/CD: GitHub Actions

Добавляем workflow, который запускает Chromatic при каждом push:

# .github/workflows/chromatic.yml
name: Visual Tests
on: push
jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - 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 }}
          exitZeroOnChanges: true
          exitOnceUploaded: false

Workflow ревью:

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

Как TurboSnap ускоряет тестирование?

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

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

Сравнение Chromatic с альтернативами

Что входит в настройку под ключ

• Установка и конфигурация Storybook (если отсутствует).
• Написание stories для 20–50 ключевых компонентов.
• Настройка CI/CD для автоматического запуска Chromatic.
• Обучение команды работе с UI ревью.
• Документация по процессу визуального тестирования.
• Документация и доступы к проекту Chromatic.
• Гарантия бесперебойной работы в течение месяца после сдачи.

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

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

Процесс работы:

1. Анализ текущего проекта и выбор компонентов для покрытия.
2. Установка Storybook и Chromatic, настройка базового workflow.
3. Написание stories для ключевых компонентов (с учётом состояний и viewport).
4. Интеграция с CI/CD и настройка TurboSnap.
5. Тестирование и отладка ложных срабатываний.
6. Документирование и обучение команды.
7. Гарантийная поддержка месяц после сдачи.

Почему стоит выбрать нас

Мы — команда с 5+ годами опыта в автоматизации тестирования. Реализовали более 50 проектов по визуальному тестированию, включая интеграцию с Chromatic, Percy и Applitools. Наши инженеры сертифицированы в Storybook и Chromatic. Предоставляем гарантию на все работы и бесплатную поддержку в течение месяца.

Не дайте регрессиям испортить пользовательский опыт. Закажите внедрение Chromatic — получите консультацию по вашему проекту. Свяжитесь с нами, чтобы обсудить детали.