Визуальное тестирование компонентов: метод автоматической проверки, при котором UI-компоненты рендерятся изолированно — вне контекста полной страницы — и их внешний вид сравнивается с валидированным эталонным состоянием для обнаружения визуальных регрессий на уровне дизайн-системы до их распространения на страницы в продакшне.
Есть вопрос, который front-end команды старательно избегают задавать: «наши компоненты визуально тестируются в Storybook, но тестируются ли наши продакшен-страницы?» Ответ в большинстве случаев — нет. И этот разрыв обходится дорого, потому что визуальные баги, доходящие до ваших пользователей, не живут в Storybook — они живут на реальных страницах, с реальными данными, реальными взаимодействиями и реальными комбинациями компонентов.
Chromatic — отличный инструмент для тестирования изолированных компонентов. Delta-QA создан для тестирования полных страниц. Они не конкуренты в строгом смысле — это инструменты, смотрящие на одну и ту же проблему с разных высот. Но если вам нужно выбрать один или вы хотите понять, что даёт каждый, это сравнение сразу переходит к делу.
Chromatic: страж дизайн-системы
Chromatic, созданный мейнтейнерами Storybook, — естественное расширение Storybook для визуального тестирования. Концепция блестящая по своей логике: вы уже определили компоненты в Storybook с их различными состояниями (stories). Chromatic захватывает скриншот каждой story при каждом коммите, сравнивает с baseline и помечает изменения.
Это идеально интегрированный workflow для команд дизайн-системы. Ваш дизайнер определяет кнопку с четырьмя вариантами (primary, secondary, disabled, loading). Ваш разработчик их реализует и создаёт соответствующие stories. Chromatic при каждом изменении кода проверяет, что эти четыре варианта не регрессировали визуально. Если border-radius кнопки случайно меняется, Chromatic ловит это раньше, чем кто-либо успеет провести code review.
Инструмент также предлагает UI Review, позволяющий дизайнерам и разработчикам визуально валидировать изменения до merge. По сути, это визуальный code review, и он действительно полезен для поддержания консистентности дизайн-системы.
Слепое пятно Chromatic: реальный мир
Вот проблема, которую Chromatic не решает — не из-за дефицита качества, а в силу архитектурного выбора: изолированные компоненты ведут себя не так, как собранные страницы.
Кнопка, тестируемая изолированно в Storybook, рендерится в контролируемой среде: фиксированный viewport, нет соседей, нет унаследованного CSS-контекста, нет динамических данных, нет взаимодействий с другими компонентами. Именно это и делает тестирование на уровне компонентов надёжным. Но это же делает его слепым к проблемам сборки.
Что ломается визуально в продакшне? Редко изолированный компонент. Ломается комбинация. Компонент header перекрывает компонент nav, потому что изменился z-index. Сетка товаров теряет выравнивание, потому что у компонента карточки появился лишний margin. Форма выходит за пределы своего контейнера, потому что label на другом языке оказался длиннее ожидаемого. Footer наезжает на основной контент, потому что промежуточная секция потеряла минимальную высоту.
Эти баги невидимы в Storybook. Каждый компонент по отдельности визуально корректен. Проблему создаёт их сборка. А Chromatic по своему дизайну не тестирует сборку — он тестирует кирпичи, а не здание. Тестирование изолированных компонентов vs полных страниц — это две дополняющие стратегии, каждая из которых покрывает свой уровень.
Delta-QA тестирует здание. Инструмент сравнивает полные страницы в том виде, в каком они отрендерены в реальном браузере, со всеми их собранными компонентами, унаследованными стилями, взаимодействиями и данными. Это тест реальности, а не тест чертежа архитектора.
No-code vs Storybook: вопрос аудитории
Chromatic ориентирован на front-end разработчиков, работающих со Storybook. Это легитимная и важная аудитория. Но узкая.
Чтобы пользоваться Chromatic, нужен сконфигурированный Storybook-проект, навык написания stories, понимание baseline и визуальных снапшотов, привычка к PR-based CI-воркфлоу. Короче говоря: нужно быть front-end разработчиком.
Ваш QA-менеджер хочет проверить страницу перед релизом? Не сможет напрямую использовать Chromatic. Ваш product owner заметил визуальную проблему в staging? Не сможет запустить тест. Ваш дизайнер хочет сравнить макет с продакшеном? Нет доступа к workflow Chromatic без посредничества разработчика.
Delta-QA открывает визуальное тестирование всей команде. Storybook не нужен. Код не нужен. Не нужно понимать CI/CD-пайплайн. Вы даёте два URL, запускаете сравнение, читаете отчёт. Все автономны. Этот no-code подход снижает порог входа и расширяет аудиторию визуального тестирования.
Компоненты vs страницы: два взаимодополняющих уровня тестирования
Вместо того чтобы противопоставлять Chromatic и Delta-QA, точнее позиционировать их как два уровня полноценной стратегии визуального тестирования.
Уровень компонентов (Chromatic): убедиться, что каждый кирпич дизайн-системы соответствует своей спецификации. Это визуальный unit-тест. Он ловит регрессии на самом гранулярном уровне, на самой ранней стадии цикла разработки.
Уровень страниц (Delta-QA): убедиться, что собранные страницы с реальными данными и каскадными стилями визуально корректны. Это визуальный интеграционный тест. Он ловит проблемы сборки, конфликты стилей и регрессии, которые существуют только в контексте полной страницы.
Команда, делающая и то, и другое, имеет выдающееся визуальное покрытие. Но если можно выбрать только один — вопрос звучит так: что лучше защищает ваших пользователей? Ваши пользователи не видят компоненты в Storybook. Они видят страницы.
Модель ценообразования: snapshots vs свобода
Chromatic тарифицирует по snapshot в месяц. С 200 компонентами по 3 stories в каждом на 2 браузера — это 1 200 snapshots на сборку. Двадцать сборок в день (активная команда) — это 720 000 в месяц.
Бесплатный план предлагает 5 000 snapshots в месяц — достаточно для маленького проекта, исчерпывается за дни на средней дизайн-системе. Платные планы масштабируются с объёмом. Команды в итоге ограничивают количество тестируемых stories или частоту сборок, чтобы оставаться в рамках квоты. Качественный инструмент, который стимулирует уменьшать покрытие тестами — парадокс восхитительный.
Delta-QA бесплатна. Никаких квот на snapshots, никаких лимитов на страницы, никаких ограничений по частоте. Качество вашего визуального покрытия зависит от вашего желания делать хорошо, а не от вашей платёжеспособности.
Что Chromatic делает, а Delta-QA — нет
Совместный UI Review. Workflow Chromatic позволяет разработчикам и дизайнерам валидировать визуальные изменения компонентов в рамках PR. Точного эквивалента в Delta-QA нет.
Тестирование всех состояний компонента. Если у вашей кнопки 12 вариантов, Chromatic систематически тестирует их все. Тестирование этих 12 на уровне страниц потребовало бы найти 12 разных страниц, где они появляются.
Нативная интеграция со Storybook. Сделана создателями Storybook. Интеграция настолько глубокая, насколько это вообще возможно.
Живая визуальная документация. Chromatic поддерживает визуальную историю каждого компонента во времени.
Что приносит Delta-QA, чего не покрывает Chromatic
Тест реальности. Продакшен-страницы с реальными данными, реальными унаследованными стилями, реальными взаимодействиями компонентов. Не чистая идеализация Storybook.
Универсальная доступность. Любой член команды может запустить визуальный тест. Навыков разработчика не нужно.
Технологическая независимость. Delta-QA работает независимо от вашего front-end стека — no-code визуальное тестирование, не требующее ни Storybook, ни современного JavaScript-фреймворка. React, Vue, Angular, Svelte, WordPress, Shopify, legacy на jQuery — если оно отображается в браузере, Delta-QA это тестирует. Chromatic требует Storybook, который требует современного JavaScript-фреймворка.
Суверенитет данных. Локальное выполнение, никаких данных, отправляемых на сторонние серверы.
Нулевая стоимость. Никаких расчётов snapshots, никакого выбора плана, никакой кредитной карты для ввода.
FAQ
Работает ли Chromatic без Storybook?
Нет. Chromatic зависит от stories для определения того, что подлежит визуальному тестированию. Delta-QA работает независимо от любого фреймворка — она тестирует веб-страницы вне зависимости от стека, который их генерирует.
Достаточно ли тестировать компоненты в Storybook, чтобы гарантировать визуальное качество?
Нет. Компоненты, тестируемые изолированно, не воспроизводят реальные условия страницы: наследование стилей, динамические данные, взаимодействия компонентов, сторонние стили. Chromatic проверяет, что ваши кирпичи корректны. Delta-QA проверяет, что сборка корректна.
Обнаруживает ли Chromatic проблемы адаптивности?
Да, в пределах того, что показывает Storybook. Но проблемы адаптивности, специфичные для страницы (элемент, выходящий за пределы при сочетании с другими, layout, ломающийся при длинных реальных данных), не будут обнаружены.
Достаточен ли бесплатный план Chromatic для маленького проекта?
Бесплатный план предлагает 5 000 snapshots в месяц. Проект со 100 компонентами по 3 stories в каждом и 2 ежедневными сборками потребляет около 18 000 snapshots в месяц. У Delta-QA нет ограничений по объёму.
Можно ли использовать Delta-QA для тестирования изолированных компонентов?
Delta-QA оптимизирован для полных страниц. Если компоненты рендерятся на доступных URL (например, развёрнутый Storybook), технически их можно тестировать. Но для тестирования изолированных компонентов Chromatic остаётся эталоном.
Для углубления
- Delta-QA vs Chromatic: полные страницы или изолированные компоненты?
- Визуальное тестирование: изолированные компоненты vs собранные страницы — какой уровень действительно важен?
Chromatic и Delta-QA — не противники, это две стороны одной медали. Один защищает ваши компоненты, другой защищает ваши страницы. Если можете иметь оба — берите оба. Если приходится выбирать, выбирайте тот, что защищает то, что ваши пользователи действительно видят.