Розробка 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 розробниками.

Приклад з практики

Налаштування 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 — отримайте безкоштовну консультацію щодо вашого проекту. Зв’яжіться з нами, щоб обговорити деталі.