Chromatic — эталонный инструмент визуального тестирования UI-компонентов через Storybook. Delta-QA тестирует полные веб-страницы с реальными пользовательскими сценариями. Это не прямые конкуренты — это два разных уровня тестирования. И понимание разницы между ними убережёт вас от ложной уверенности: вы можете считать себя защищённым, хотя на самом деле покрыта лишь половина рисков.
Что тестирует Chromatic
Chromatic захватывает каждую story из Storybook и сравнивает её с предыдущей версией. Кнопка в пяти состояниях. Карточка с коротким и длинным заголовком. Пустая и предварительно заполненная форма.
Это мощный механизм защиты библиотеки компонентов. Любая модификация общего компонента обнаруживается мгновенно. Интерфейс рецензирования отлично подходит для совместной работы дизайнера и разработчика.
Проблема в том, что Chromatic тестирует компоненты в изоляции. Компонент сам по себе, в нейтральном контейнере, без контекста страницы. А именно там прячутся баги.
Что тестирует Delta-QA
Delta-QA тестирует полные страницы. Не изолированные компоненты — настоящие страницы с реальными макетами, реальным контентом, реальными компонентами, взаимодействующими друг с другом.
Идеальный компонент Card в Storybook может сломаться при размещении в сетке из трёх колонок с сайдбаром. Кнопка, валидированная в изоляции, может оказаться скрытой за футером в реальном контексте. Безупречная форма в story может выйти за пределы контейнера при интеграции в модальное окно.
Эти баги? Chromatic их не видит. Delta-QA видит, потому что тестирует то, что пользователь видит на самом деле — полную страницу, в реальном браузере, с реальным контентом.
Обязательное наличие Storybook
Chromatic требует Storybook. Если ваш проект не использует Storybook, Chromatic не имеет смысла. А настройка Storybook исключительно для визуального тестирования — это серьёзная инвестиция: написание stories для каждого компонента, их актуализация, управление демонстрационными данными.
Delta-QA ничего не требует. Никакого Storybook, никакого конкретного фреймворка, никакого кода. У вас есть веб-сайт? Вы можете его тестировать.
Облако vs локальное окружение
Chromatic работает исключительно в облаке. Ваши скриншоты отправляются и хранятся на инфраструктуре Chromatic. Нет возможности self-hosted развёртывания.
Delta-QA по умолчанию работает локально. Всё остаётся на вашей машине. Никакие данные не покидают её.
Стоимость
Chromatic предлагает 5 000 бесплатных снимков в месяц, но только в Chrome. Мультибраузерное тестирование начинается от $179/месяц. И снимки накапливаются быстро: 180 stories × 3 viewport'а = 540 снимков за сборку, то есть примерно 9 сборок до достижения бесплатного лимита.
Delta-QA Desktop полностью бесплатен без ограничений. Мультибраузерность включена.
Настоящий вопрос
Вопрос не в том, «Chromatic или Delta-QA?». Вопрос в том, «вы тестируете компоненты, страницы или оба уровня?»
Если у вас есть Storybook и дизайн-система, Chromatic защищает вашу библиотеку компонентов. Это первая линия обороны.
Но вам также нужна вторая линия для полных страниц. Именно здесь подключается Delta-QA. Эти два инструмента дополняют друг друга — ни один не заменяет другой.
А если вы не используете Storybook, Delta-QA — единственный вариант, который вам нужен.
FAQ
Chromatic работает без Storybook?
Chromatic начал открываться к Playwright и Cypress с 2025 года, но эти интеграции ещё молодые. На практике Storybook остаётся основным prerequisite.
Может ли идеальный компонент из Storybook сломаться на странице?
Да. Изоляция Storybook маскирует взаимодействия с родительским макетом, соседними компонентами, реальным контентом и ограничениями экрана. Это главная ловушка изолированного тестирования компонентов.
Можно использовать Chromatic и Delta-QA одновременно?
Да, и это рекомендуемый подход. Chromatic для компонентов, Delta-QA для страниц. Каждый инструмент покрывает свой уровень.
Что быстрее настроить?
Delta-QA: несколько минут. Chromatic: от нескольких часов до нескольких дней (настройка Storybook + написание stories + конфигурация CI).
Chromatic тестирует изолированные UI-компоненты через Storybook. Delta-QA тестирует полные веб-страницы и реальные пользовательские сценарии — без Storybook, без кода, без технических навыков.
Для углубления
- Delta-QA vs Chromatic: изолированные компоненты или полные страницы?
- Визуальное тестирование дизайн-систем: изолированные компоненты vs полные страницы
- Визуальное тестирование: изолированные компоненты vs собранные страницы — какой уровень действительно важен?