Визуальное тестирование компонентов (component visual testing): метод автоматической проверки, при котором компоненты пользовательского интерфейса отображаются изолированно (вне контекста целой страницы), а их внешний вид сравнивается с утверждённым эталоном. Так визуальные регрессии на уровне дизайн-системы обнаруживаются до того, как попадут на страницы в продакшене.
Есть вопрос, которого фронтенд-команды старательно избегают: «наши компоненты визуально протестированы в Storybook, а страницы в продакшене тоже протестированы?». В большинстве случаев ответ отрицательный. И этот пробел обходится дорого, потому что визуальные баги, которые доходят до пользователей, живут не в Storybook, а в реальных страницах: с реальными данными, реальными взаимодействиями и реальными сочетаниями компонентов.
Chromatic отлично подходит для тестирования изолированных компонентов. Delta-QA создан для тестирования целых страниц. Введение в визуальное тестирование есть в нашем руководстве по визуальной регрессии. Это не конкуренты в строгом смысле, а инструменты, которые смотрят на одну и ту же задачу с разной высоты. Но если выбрать нужно что-то одно или если вы хотите понять, что даёт каждый из них, это сравнение сразу переходит к сути.
Все наши сравнения по проверяемым критериям: Альтернативы и сравнения.
Chromatic проверяет изолированные компоненты. А кто тестирует ваши реальные страницы в продакшене? Delta-QA покрывает их без написания кода, с бесплатным аккаунтом и без банковской карты. Попробовать Delta-QA бесплатно →
Chromatic: хранитель дизайн-системы
Chromatic, созданный мейнтейнерами Storybook, стал естественным продолжением экосистемы Storybook для визуального тестирования. Обзор визуального тестирования для дизайн-систем есть в нашем отдельном руководстве. Идея логична и сильна: вы уже описали компоненты в Storybook вместе с их состояниями (stories). Chromatic делает скриншот каждой story при каждом коммите, сравнивает его с базовой версией (baseline) и сообщает об изменениях.
Для команд, работающих с дизайн-системами, это идеально встроенный процесс. Дизайнер описывает кнопку с четырьмя вариантами (primary, secondary, disabled, loading). Разработчик реализует эти варианты и создаёт соответствующие stories. При каждом изменении кода Chromatic проверяет, что ни один из четырёх вариантов визуально не изменился. Если border-radius кнопки случайно поменяется, Chromatic заметит это ещё до код-ревью.
Инструмент также предлагает функцию ревью интерфейса (UI Review): дизайнеры и разработчики могут визуально утвердить изменения до слияния. По сути это визуальное код-ревью, и оно действительно полезно для поддержания единообразия дизайн-системы.
По состоянию на 10/2026 Chromatic не ограничивается stories: он также запускает тесты взаимодействий и доступности, опирается на уже существующие тесты Playwright, Cypress или Vitest и отрисовывает снимки в четырёх браузерах (Chrome, Firefox, Safari, Edge). Он также позиционирует себя как защитный барьер для интерфейсов, написанных ИИ-агентами, и имеет задокументированный сервер MCP, который передаёт им контекст утверждённых компонентов.
Слепая зона Chromatic: реальный мир
Вот проблема, которую Chromatic не решает (не из-за недостатка качества, а по архитектурному выбору): изолированные компоненты ведут себя иначе, чем собранные страницы.
Кнопка, протестированная отдельно в Storybook, отображается в контролируемой среде: фиксированный viewport, нет соседей, нет унаследованного CSS-контекста, нет динамических данных, нет взаимодействия с другими компонентами. Именно это делает тест надёжным на уровне компонента. Но именно это делает его слепым к проблемам сборки.
Что ломается визуально в продакшене? Редко отдельный компонент. Ломается сочетание. Компонент шапки накладывается на компонент навигации, потому что изменился z-index. Сетка товаров съезжает, потому что карточка получила лишний margin. Форма вылезает за свой контейнер, потому что подпись на другом языке оказалась длиннее ожидаемой. Подвал поднимается на основное содержимое, потому что промежуточная секция потеряла минимальную высоту.
В Storybook эти баги не видны. Каждый компонент по отдельности выглядит правильно. Проблема в их сборке. А Chromatic по своей конструкции сборку не тестирует: он проверяет кирпичи, а не здание.
Delta-QA тестирует здание. Вы записываете сценарий на своём сайте без кода, и инструмент воспроизводит его в настоящем браузере при каждой версии, со всеми собранными компонентами, их унаследованными стилями, взаимодействиями и данными. Каждая страница сравнивается с эталоном так, как это сделал бы человеческий глаз: отчёт сообщает, какой элемент изменился (кнопка из синей стала зелёной, сместился отступ). Это тест реальности, а не тест по чертежу архитектора.
Разрыв между Storybook и продакшеном
Между тем, что показывает Storybook, и тем, что отображает продакшен, есть структурное расхождение, о котором говорят редко.
Данные. В Storybook компоненты получают мок-данные, тщательно подобранные так, чтобы быть репрезентативными и помещаться в макет. В продакшене они получают реальные данные: название товара на 150 символов, которое никто не предусматривал, изображение с невероятными пропорциями, цену с переменным числом знаков после запятой, список категорий, занимающий три строки вместо одной. Эти реальные данные создают визуальные ситуации, которые Storybook никогда не воспроизводит.
Унаследованные стили. В Storybook каждый компонент отображается в относительно чистой песочнице CSS. В продакшене компоненты наследуют глобальные стили, CSS-сбросы, темы, контекстные переопределения, а иногда и сторонние стили (виджеты аналитики, чат-боты, баннер cookies). Компонент может быть безупречным в Storybook и визуально сломанным в продакшене из-за конфликта стилей, который не воспроизводит ни одна story.
Динамические состояния. Storybook тестирует заранее заданные состояния, те, которые разработчик счёл нужным задокументировать. В продакшене компоненты проходят через промежуточные состояния, непредвиденные состояния ошибок, сочетания состояний, которые никто не догадался проверить. Форма с идущей валидацией, кнопка во flex-контейнере, который меняет размер, карточка товара с акцией, добавляющей бейдж: каждое сочетание это визуальный тест, который Storybook не покрывает.
Delta-QA тестирует то, что ваши пользователи видят на самом деле. А не то, что Storybook обещает им показать.
No-code и Storybook: вопрос аудитории
Chromatic адресован фронтенд-разработчикам, которые работают со Storybook. Это законная и важная аудитория. Но узкая.
Чтобы использовать Chromatic, нужны тесты, написанные в коде: stories Storybook или тесты Playwright, Cypress, Vitest. Нужно уметь их писать. Нужно понимать концепцию baseline и визуального снимка. Нужно уверенно чувствовать себя в процессе, построенном на pull request и непрерывной интеграции. Словом, нужно быть фронтенд-разработчиком.
А ваш QA-менеджер, который хочет проверить страницу перед релизом? Напрямую Chromatic он использовать не может. Ваш product owner, заметивший визуальную проблему на приёмке? Запустить тест он не может. Ваш дизайнер, который хочет сравнить макет с результатом в продакшене? Без разработчика у него нет доступа к процессу Chromatic.
Delta-QA открывает визуальное тестирование всей команде. Не нужен Storybook. Не нужен код. Не нужно разбираться в пайплайне CI/CD. Вы проходите по своему сайту как пользователь, Delta-QA записывает сценарий, воспроизводит его в следующей версии, и вы читаете отчёт. QA проверяет путь оформления заказа перед выкладкой в продакшен. Product owner убеждается, что доработка ничего не сломала в другом месте. Каждый действует самостоятельно.
Разработчикам, которые хотят проверять страницы из своих тестов Playwright в CI, у Delta-QA теперь есть SDK, SDK Vision: одна строка на каждую проверяемую страницу, и неподтверждённое различие приводит к падению теста.
Это не технологический антиинтеллектуализм. Это признание того, что визуальное качество касается всех и что инструменты должны отражать эту реальность.
Компоненты и страницы: два взаимодополняющих уровня тестирования
Вместо того чтобы противопоставлять Chromatic и Delta-QA, точнее рассматривать их как два уровня полной стратегии визуального тестирования.
Уровень компонента (Chromatic): проверить, что каждый кирпич дизайн-системы визуально соответствует спецификации. Это модульный тест для визуальной части. Он находит регрессии на самом детальном уровне и как можно раньше в цикле разработки (ещё до слияния).
Уровень страницы (Delta-QA): проверить, что собранные страницы, с реальными данными и каскадными стилями, выглядят правильно. Это интеграционный тест для визуальной части. Он находит проблемы сборки, конфликты стилей и регрессии, существующие только в контексте целой страницы.
Команда, делающая и то и другое, получает выдающееся визуальное покрытие. Регрессии компонентов рано обнаруживает Chromatic. Регрессии страниц обнаруживает Delta-QA. Страховочная сетка двойная.
Но если выбрать можно только один (из-за бюджета, времени или ресурсов), вопрос звучит так: какой уровень тестирования лучше защищает ваших пользователей? И ответ однозначен: уровень страницы. Ведь ваши пользователи видят не компоненты. Они видят страницы.
Облако или On-Premise: куда попадают ваши снимки?
Помимо модели «компоненты и страницы», есть архитектурное различие, которое весит много для некоторых организаций: где хранятся ваши скриншоты.
Chromatic это облачный сервис. Ваши скриншоты отправляются и хранятся на инфраструктуре Chromatic; по состоянию на 10/2026 в его тарифной сетке нет развёртывания на собственных серверах (self-hosted), даже на плане Enterprise (который предлагает SSO, SLA и настройки срока хранения данных). Для большинства публичных проектов это не проблема. Но для внутреннего приложения, бэк-офиса с данными клиентов или организации со строгими нормативными требованиями сам факт того, что снимки интерфейса покидают периметр компании, может оказаться препятствием.
Delta-QA предлагает вариант On-Premise, устанавливаемый в Docker на вашей инфраструктуре: ваши снимки не покидают вашу сеть, а предложение можно оценить на бесплатном POC в течение месяца. Это та же логика суверенитета данных, подробно описанная ниже, но сформулированная на уровне архитектуры: data stays и data leaves.
Экономическая модель: оплата за снимок
Chromatic выставляет счёт по числу снимков (snapshots) в месяц. Один снимок = одна story, один браузер, одно разрешение. При 200 компонентах по 3 stories в 2 браузерах получается 1 200 снимков на сборку. Двадцать сборок в день (активная команда) это 720 000 в месяц.
По состоянию на 10/2026 бесплатный план даёт 5 000 тарифицируемых снимков в месяц: хватает на первый охват, но быстро заканчивается по мере роста дизайн-системы. К тому же бесплатный план ограничен Chrome: кросс-браузерное тестирование (Firefox, Safari, Edge) начинается с плана Starter, 179 $/мес за 35 000 снимков. План Pro стоит 399 $/мес за 85 000 снимков, каждый дополнительный снимок оплачивается по 0,008 $, а Enterprise только по запросу. TurboSnap смягчает счёт: заново снимаются только тесты, затронутые изменением файлов, остальные считаются в квоте с меньшим весом. Конкретно: 180 stories × 3 разрешения = 540 снимков на сборку, то есть всего 9 сборок до исчерпания бесплатной квоты. И это создаёт то же напряжение, что и у Percy: покрытие тестами обратно пропорционально бюджету. Без TurboSnap команды в итоге ограничивают число тестируемых stories или частоту сборок, чтобы уложиться в квоту.
С Delta-QA можно начать с бесплатного аккаунта, без банковской карты. Его покрытие измеряется сценариями и проверяемыми шагами, а не числом stories, умноженным на браузеры и разрешения.
Chromatic тестирует изолированные компоненты. А ваши целые страницы? Delta-QA покрывает их в no-code и без банковской карты. Попробовать Delta-QA бесплатно →
Что умеет Chromatic, а Delta-QA нет
Честность требует признать уникальные сильные стороны Chromatic.
Совместное ревью интерфейса. Процесс Chromatic позволяет разработчикам и дизайнерам визуально утверждать изменения компонентов в рамках pull request. Это встроенный процесс ревью, у которого нет точного аналога в Delta-QA.
Тестирование всех состояний компонента. Если у вашей кнопки 12 вариантов (размер, цвет, состояние, тема), Chromatic систематически проверяет их все. Чтобы проверить эти 12 вариантов на уровне страницы, пришлось бы найти 12 разных страниц, где они встречаются, а это не всегда возможно.
Мультибраузерность. Chromatic снимает ваши тесты в Chrome, Firefox, Safari и Edge (начиная с плана Starter). Delta-QA сегодня сравнивает в Chromium; Firefox и WebKit запланированы.
Нативная интеграция со Storybook. Chromatic сделан создателями Storybook. Интеграция максимально глубокая: автоматическое обнаружение новых stories, минимальная настройка, плавный процесс. Это реальное преимущество, если Storybook находится в центре вашей разработки интерфейса.
Живая визуальная документация. Chromatic хранит визуальную историю каждого компонента во времени. Это живая библиотека дизайна, показывающая эволюцию каждого компонента, ценная возможность для дизайн-систем.
Что даёт Delta-QA, чего Chromatic не покрывает
Тест реальности. Страницы в продакшене, с настоящими данными, настоящими унаследованными стилями, настоящими взаимодействиями между компонентами. Не чистая идеализация Storybook, а мир таким, какой он есть.
Универсальная доступность. Любой член команды может запустить визуальный тест. Не нужно быть разработчиком, знать Storybook или иметь доступ к CI-пайплайну. Демократизация визуального тестирования.
Технологическая независимость. Delta-QA работает с любым вашим фронтенд-стеком. React, Vue, Angular, Svelte, WordPress, Shopify, статический сайт, легаси-приложение на jQuery, неважно. Если это отображается в браузере, Delta-QA это протестирует. Chromatic опирается на тесты, написанные в коде (Storybook, Playwright, Cypress, Vitest), то есть на фронтенд-проект, оснащённый для этого.
Суверенитет данных. С вариантом On-Premise сравнение выполняется на вашей инфраструктуре, и ни один снимок не отправляется третьим лицам. Для внутренних приложений, чувствительных данных и организаций со строгими нормативными требованиями.
Отчёт, который называет элементы. Каждое различие привязано к элементу страницы и описано понятным языком: цвет, отступ, шрифт, позиция. Вы знаете, на что смотреть, не расшифровывая изображение различий.
Идеальный сценарий: оба вместе
Если ваша команда уже использует Storybook и у неё есть бюджет на Chromatic, сочетание двух инструментов это самая надёжная стратегия.
Chromatic следит за вашими компонентами на уровне дизайн-системы. Каждое изменение стиля, каждая вариация, каждое состояние проверяется визуально. Регрессии выявляются на этапе разработки, до того как код попадёт в основную ветку.
Delta-QA следит за вашими страницами в продакшене (или на staging). Проблемы сборки, конфликты стилей, баги, проявляющиеся только в реальном контексте, обнаруживаются до того, как их увидят пользователи.
Вместе это двойное покрытие: кирпичи с одной стороны, собранные сценарии с другой.
Прагматичный сценарий: один инструмент
Если нужно выбрать один инструмент (потому что бюджет ограничен, потому что команда небольшая или потому что вы хотите начать с простого), вопрос сводится к следующему: что лучше защищает ваших пользователей?
Ваши пользователи не видят ваши компоненты Storybook. Они видят ваши страницы. Они взаимодействуют с вашими страницами. Мнение о вашем продукте они складывают, глядя на ваши страницы. Компонент, безупречный в Storybook, но сломанный в собранной странице, с точки зрения пользователя сломан.
Delta-QA тестирует то, что видят ваши пользователи. Всё так просто.
Готовы протестировать страницы, которые ваши пользователи видят на самом деле? Запустите первое сравнение с Delta-QA, с бесплатным аккаунтом и без банковской карты. Попробовать Delta-QA бесплатно →
FAQ
Работает ли Chromatic без Storybook?
Да. По состоянию на 10/2026 Chromatic также снимает страницы из ваших тестов Playwright, Cypress или Vitest, помимо stories Storybook. Однако нужны тесты, написанные в коде: именно они определяют, что снимается. Delta-QA исходит из сценария, записанного без кода, независимо от стека, который выдаёт ваши страницы; для тестов Playwright у него есть SDK Vision.
Достаточно ли тестирования компонентов в Storybook, чтобы гарантировать визуальное качество?
Нет. Компоненты, протестированные в изоляции, не воспроизводят реальные условия собранной страницы: наследование стилей, динамические данные, взаимодействие между компонентами, сторонние стили. Chromatic проверяет, что ваши кирпичи в порядке. Delta-QA проверяет, что сборка в порядке. Для полного покрытия нужны оба уровня.
Обнаруживает ли Chromatic проблемы адаптивности?
Да, в пределах того, что показывает Storybook. Вы можете настроить stories под разные размеры viewport, и Chromatic их проверит. Но проблемы адаптивности, характерные для собранной страницы (элемент вылезает в сочетании с другими, вёрстка ломается на длинных реальных данных), обнаружены не будут. Delta-QA же сравнивает собранную страницу в настоящем браузере с её реальными данными.
Что покрывает бесплатный план Chromatic?
По состоянию на 10/2026 бесплатный план Chromatic даёт 5 000 тарифицируемых снимков в месяц, только в Chrome, чего хватает на несколько десятков компонентов при редких сборках. Как только число компонентов или частота сборок растёт, квота быстро исчерпывается. Проект со 100 компонентами, 3 stories на компонент и 2 сборками в день расходует около 18 000 снимков в месяц без TurboSnap.
Можно ли использовать Delta-QA для тестирования изолированных компонентов?
Delta-QA оптимизирован для целых страниц, а не для изолированных компонентов. Если у вас есть среда, где компоненты отображаются по отдельности по доступным URL (например, развёрнутый Storybook), технически можно использовать Delta-QA для их сравнения. Но это не основной сценарий. Для тестирования изолированных компонентов Chromatic остаётся эталонным инструментом.
Как Delta-QA работает с дизайн-системами, если не на уровне компонентов?
Delta-QA проверяет визуальную согласованность вашей дизайн-системы там, где это важнее всего: на страницах, которые её используют. Если изменение в дизайн-системе ломает вёрстку десятка страниц, Delta-QA обнаружит это напрямую. Это сквозной (end-to-end) тест дизайн-системы, дополняющий модульный тест Chromatic.