Налаштування Chromatic для візуального тестування компонентів
Chromatic — це хмарний сервіс для візуального тестування UI-компонентів, побудований поверх Storybook. Він робить скриншот кожної story до та після змін, порівнює попіксельно та вимагає ревью при розбіжностях. Це ловить регресії, які звичайні unit та e2e тести пропускають: padding змінився на 2px, колір кнопки зсунувся, адаптивність сломалась на планшеті.
Попередні вимоги
Chromatic працює поверх Storybook — він має бути вже налаштований. Підтримує React, Vue, Angular, Svelte, Web Components. Підтримувані версії Storybook: 6.x, 7.x, 8.x.
Підключення
npm install --save-dev chromatic
npx chromatic --project-token=YOUR_PROJECT_TOKEN
При першому запуску Chromatic приймає всі stories як baseline. При наступних запусках — порівнює з baseline та показує diff.
Інтеграція з GitHub Actions
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.
TurboSnap — прискорення тестування
TurboSnap аналізує, які файли змінились у коміті, та тестує тільки stories, які використовують змінені компоненти. На великих проектах скорочує час тестування з 20 хвилин до 2–3 хвилин.
- uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
onlyChanged: true # Включає TurboSnap
Процес ревью змін
Коли Chromatic виявляє візуальні змінення, створює посилання на інтерфейс ревью. Там: список змінених stories, попіксельний diff (додав/убрав), можливість прийняти або відкинути кожну змінення.
Прийняті змінення стають новим baseline. Workflow вбудовується в GitHub Pull Requests: статус-чек «UI Review» блокує мерж до аппруву.
Вартість
Chromatic — платний сервіс. Безплатний тариф: 5000 snaps/місяць. Для активно розвивається проекту з 200+ stories зазвичай потрібен платний план від $149/місяць.
Терміни
Налаштування Chromatic для існуючого Storybook з підключенням GitHub Actions та налаштуванням PR статус-чека — 1 день.