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