Вёрстка сломалась из-за невидимого изменения 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 млн рублей в год за счёт раннего обнаружения регрессий.
Пример из практики
Пример из практики: как мы предотвратили убыток в 500 000 рублей
На одном из проектов команда в течение месяца не замечала, что из-за изменения глобального стиля для button слетели отступы в карточке товара. Chromatic обнаружил регрессию на первом же PR после внесения правки. Исправление заняло 10 минут вместо недели поиска. Это предотвратило убытки в размере 500 000 рублей, которые могли быть потеряны из-за необнаруженной регрессии.
Настройка 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 помогает исключить нерелевантные разрешения.
Параметры для тонкой настройки скриншотов
| Параметр | Описание | Пример |
|---|---|---|
delay |
Задержка перед скриншотом (мс) | delay: 1000 |
viewports |
Массив разрешений для теста | [375, 768, 1280] |
disableSnapshot |
Исключить story из тестов | true |
pauseAnimationAtEnd |
Остановить анимацию на последнем кадре | true |
Интеграция с 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 ревью:
- Pull request меняет компонент.
- Chromatic запускается в CI, находит изменения.
- Ссылка на ревью появляется в PR-комментарии.
- Разработчик в UI Chromatic: одобрить или отклонить изменения.
- После одобрения — новый 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 с альтернативами
| Параметр | Chromatic | Percy | Applitools |
|---|---|---|---|
| Интеграция со Storybook | нативная | плагин | плагин |
| TurboSnap (Git-анализ) | встроен | нет | нет |
| Скорость при изменении 1 компонента | ~2 мин | ~4 мин | ~5 мин |
Что входит в настройку под ключ
- Установка и конфигурация Storybook (если отсутствует).
- Написание stories для 20–50 ключевых компонентов.
- Настройка CI/CD для автоматического запуска Chromatic.
- Обучение команды работе с UI ревью.
- Документация по процессу визуального тестирования.
- Документация и доступы к проекту Chromatic.
- Гарантия бесперебойной работы в течение месяца после сдачи.
Сроки реализации:
- Настройка Storybook + Chromatic: 1 день.
- Написание stories для 20–30 компонентов: 3–5 дней.
- Полное покрытие design system: 1–2 недели.
Процесс работы:
- Анализ текущего проекта и выбор компонентов для покрытия.
- Установка Storybook и Chromatic, настройка базового workflow.
- Написание stories для ключевых компонентов (с учётом состояний и viewport).
- Интеграция с CI/CD и настройка TurboSnap.
- Тестирование и отладка ложных срабатываний.
- Документирование и обучение команды.
- Гарантийная поддержка месяц после сдачи.
Почему стоит выбрать нас
Мы — команда с 5+ годами опыта в автоматизации тестирования. Реализовали более 50 проектов по визуальному тестированию, включая интеграцию с Chromatic, Percy и Applitools. Наши инженеры сертифицированы в Storybook и Chromatic. Предоставляем гарантию на все работы и бесплатную поддержку в течение месяца.
Не дайте регрессиям испортить пользовательский опыт. Закажите внедрение Chromatic — получите бесплатную консультацию по вашему проекту. Свяжитесь с нами, чтобы обсудить детали.