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

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

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

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

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

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

Настройка 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 — получите бесплатную консультацию по вашему проекту. Свяжитесь с нами, чтобы обсудить детали.