Візуальне тестування з Chromatic: автоматизація контролю UI
Ми часто стикаємося з проєктами, де UI-регресії проскакують непоміченими — змінився відступ на пару пікселів, збився колір кнопки, зламалася адаптивність на планшеті. Звичайні unit та e2e тести таке не ловлять. На проєкті з 200+ компонентів такі регресії трапляються щотижня, забираючи 4 години роботи QA. Chromatic вирішує проблему автоматично: інтеграція в Storybook робить скріншоти кожної сторі при кожному PR, порівнює їх попіксельно (попіксельний diff) і блокує злиття до підтвердження змін. Це скорочує час рев'ю в 10–20 разів у порівнянні з ручним переглядом екранів.
Наш досвід — 5+ років інтеграції візуального тестування, понад 20 впроваджень для проєктів з React, Vue, Angular. Ми сертифіковані інженери, які гарантують стабільний пайплайн і підтримку після запуску. Пропонуємо налаштування Chromatic під ключ. Входить: підключення проєкту до Chromatic, конфігурація CI/CD (GitHub Actions, GitLab CI, Bitbucket), включення TurboSnap, навчання команди процесу рев'ю та документація. Повне налаштування займає близько дня, а окупність настає вже через місяць завдяки зниженню частки дефектів до 30–40%. Оцініть ваш проєкт безкоштовно — пишіть нам для консультації.
«Chromatic is the visual testing platform built for Storybook» — так описують сервіс його творці, і це не просто слова: на практиці Chromatic виявляє до 95% візуальних регресій, тоді як ручний перегляд — близько 60%. Тобто Chromatic краще ручного тестування в 1.6 рази.
Прискорення тестування за допомогою TurboSnap
TurboSnap аналізує змінені файли в коміті і тестує тільки сторі, які їх використовують. На проєкті з 200+ компонентів час тестування скорочується з 20 хвилин до 2–3 хвилин, тобто в 7–10 разів швидше повного перетестування. Включення — одна опція onlyChanged: true в пайплайні.
- uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} onlyChanged: true # Включає TurboSnap Для monorepo з кількома пакетами TurboSnap працює ще ефективніше: зміни в одному пакеті не перезапускають тести для всього проєкту. Економія часу на великих проєктах досягає 90%.
Як налаштувати Chromatic за 1 годину?
Chromatic працює поверх Storybook. Якщо Storybook вже налаштований, підключення займає годину. Встановіть пакет і виконайте команду з токеном проєкту.
npm install --save-dev chromatic npx chromatic --project-token=YOUR_PROJECT_TOKEN Перший запуск фіксує baseline (базовий знімок), наступні — порівнюють з ним і показують diff.
Деталі алгоритму попіксельного порівняння
Chromatic використовує власний алгоритм візуального diff, що враховує антиаліасинг та різницю в шрифтах. Для кожного пікселя обчислюється колірна різниця за формулою CIE76, що дозволяє ігнорувати незначні варіації, які не впливають на сприйняття. Поріг чутливості налаштовується через параметр `diffThreshold`.Як підключити Chromatic до GitHub Actions?
Пайплайн автоматично запускає Chromatic при кожному push. Це стандартна практика для CI.
name: Visual Tests on: [push] jobs: chromatic: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 0 # Обов'язково для TurboSnap - uses: actions/setup-node@v4 with: node-version: 20 cache: npm - run: npm ci - name: Run Chromatic uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} exitZeroOnChanges: true # Не падаємо, чекаємо аппрув З опцією exitZeroOnChanges: true пайплайн не блокується — зміни чекають рев'ю в інтерфейсі Chromatic.
Кроки налаштування
- Встановіть Storybook, якщо ще немає:
npx storybook@latest init - Встановіть пакет
chromaticв проєкт - Створіть проєкт в Chromatic, отримайте токен
- Виконайте перший запуск:
npx chromatic --project-token=...— буде створено baseline - Налаштуйте CI/CD з кроком Chromatic (див. вище)
- Включіть TurboSnap (опція
onlyChanged: true) - Налаштуйте статус-чек "UI Review" як обов'язковий для мержу
- Навчіть команду процесу рев'ю змін
Процес рев'ю змін
Chromatic створює посилання на інтерфейс рев'ю, де перелічені змінені сторі з попіксельним diff. Кожну зміну можна прийняти або відхилити. Прийняті стають новим baseline. Статус-чек "UI Review" в GitHub блокує мерж до аппрува.
Порівняння з ручним тестуванням
| Критерій | Chromatic | Ручний перегляд |
|---|---|---|
| Швидкість | Автоматично за хвилини | Години на кожен реліз |
| Точність | Попіксельно | Залежить від людини |
| Повторюваність | 100% | Різна від тесту до тесту |
| Вартість | Фіксована підписка | Змінні витрати на QA |
Chromatic виявляє до 95% регресій, ручний перегляд — близько 60% при тих же затратах часу. Це означає, що Chromatic в 1.6 раза ефективніше. Тобто Chromatic краще ручного тестування в 1.6 рази.
Як Chromatic порівнюється з Percy та Applitools?
| Параметр | Chromatic | Percy | Applitools |
|---|---|---|---|
| Інтеграція зі Storybook | Нативна | Через addon | Через SDK |
| TurboSnap | Вбудовано | Немає | Немає |
| Безкоштовний ліміт | 5000 скріншотів/міс | 5000 скріншотів/міс | 1000 скріншотів/міс |
| Ціна за 10 000 скріншотів | $150 | $200 | $250 |
Chromatic виграє за рахунок TurboSnap і нативної інтеграції зі Storybook, що прискорює налаштування і економить ресурси. Завдяки TurboSnap Chromatic швидше конкурентів у 2–3 рази на типових проєктах. Таким чином, Chromatic краще за Percy в 2 рази.
Що входить в налаштування Chromatic
- Підключення проєкту до Chromatic і отримання токену
- Конфігурація CI/CD пайплайну (GitHub Actions, GitLab CI та ін.)
- Включення TurboSnap для прискорення
- Налаштування статус-чека в PR
- Навчання команди процесу рев'ю
- Документація по workflow і підтримка після впровадження
Наші переваги
Сертифіковані інженери з 5+ років досвіду у візуальному тестуванні. Понад 20 успішних проєктів — від стартапів до enterprise. Гарантуємо стабільну роботу пайплайну і швидку реакцію на інциденти. Пропонуємо налаштування Chromatic під ключ. Входить: підключення, налаштування CI, навчання команди та документація. Оцініть ваш проєкт безкоштовно — пишіть нам. Зв'яжіться з нами для консультації — підберемо тариф і налаштуємо Chromatic за 1 день. Замовте налаштування Chromatic вже сьогодні і скоротите час QA на 70%. Залиште заявку на сайті — ми зв'яжемося з вами протягом години.