Chromatic vs Percy: сравнение по 10 критериям в 2026

Визуальное тестирование компонентов: «Метод автоматизированной проверки, который захватывает визуальное отображение изолированных компонентов интерфейса в их различных состояниях, а затем сравнивает эти захваты с эталонами для обнаружения любого непреднамеренного изменения их внешнего вида.»

Chromatic и Percy. Два инструмента визуального тестирования, две философии, две аудитории. Один родился в экосистеме Storybook и не признаёт ничего другого. Второй стремится быть универсальным и интегрируется повсюду. Оба в итоге делают одно и то же — сравнивают скриншоты — но путь к этому радикально различается.

Если Вы искали «chromatic vs percy», скорее всего, Вы используете Storybook и колеблетесь между родным решением и универсальным аутсайдером. Этот сравнительный анализ охватывает структурированную таблицу на 10 критериев, раздел ограничений для каждого инструмента, ссылки на официальные источники, конкретные сценарии использования по фреймворкам, FAQ из 11 вопросов и обзор альтернативных решений.

Сравнительная таблица: Percy vs Chromatic по 10 критериям

Критерий	Chromatic	Percy (BrowserStack)
Начальная настройка	Нулевая конфигурация при наличии Storybook — подключение репозитория и автоматический деплой (docs.chromatic.com)	SDK для интеграции в тесты (Cypress, Playwright, Selenium, Storybook) — 15-30 мин настройки (docs.percy.io)
Flakiness	Оптимизированное сравнение компонентов; шум снижается автоматической калибровкой порогов	Попиксельное сравнение — высокий уровень ложных срабатываний на динамическом контенте и переменных шрифтах
Скорость выполнения	Повторный захват только затронутых компонентов (анализ зависимостей); ~2-4 с/снимок в среднем	Последовательный захват по умолчанию; ~5-8 с/снимок; параллелизация доступна на платных тарифах
Branching и CI	Изолированные ветки в дашборде; нативный status check GitHub/GitLab	Ветки поддерживаются; интеграция PR через checks CI/CD на всех платформах
Debugging	Параллельное сравнение с зумом на уровне пикселя, overlay и история изменений по story	Стандартное параллельное сравнение; настраиваемые зоны исключения; история ограничена в зависимости от тарифа
Совместная работа	Визуальное ревью с публикацией Storybook онлайн — дизайнеры и PO могут ревьюить напрямую	Дашборд ревью с утверждением/отклонением; интеграция Slack/Teams; нет публикации компонентов
Браузеры	Chrome по умолчанию; поддержка Firefox/Safari в beta (2026) — эмулируемый рендеринг	Chrome, Firefox, Safari реальные через инфраструктуру BrowserStack — нативный рендеринг
Стоимость	Free: 5 000 снимков/мес. Team: ~149 $/мес (25 000 снимков, ~0,006 $/снимок). Enterprise: по запросу. (chromatic.com/pricing)	Free: 5 000 снимков/мес. Pro: ~199 $/мес (25 000 снимков, ~0,008 $/снимок). Enterprise: по запросу. (percy.io/pricing)
Бесплатный тариф	5 000 снимков/мес, 1 проект, без расширенной параллелизации	5 000 снимков/мес, 1 проект, 1 браузер
Storybook	Нативная поддержка — понимает stories, args, decorators, viewports без настройки	Плагин доступен — функциональная интеграция, но менее глубокая, чем Chromatic

Указанные тарифы взяты с официальных страниц pricing, актуальных на июнь 2026 года, и могут измениться. Стоимость за снимок рассчитана на основе тарифного плана ÷ включённый объём. Всегда проверяйте chromatic.com/pricing и percy.io/pricing перед принятием решения.

Chromatic: нативный инструмент Storybook

Chromatic был создан самими мейнтейнерами Storybook. Это не тривиальная деталь — это основа всей его ценностной пропозиции. Когда создатели Storybook создают и инструмент визуального тестирования для Storybook, интеграция, unsurprisingly, безупречна.

Как работает Chromatic

Принцип поразительно прост. У Вас есть Ваши stories Storybook — те изолированные лаборатории, где каждый компонент существует в своих различных состояниях. Chromatic автоматически захватывает каждую из этих stories как изображение. При каждом изменении кода он перезахватывает и сравнивает. Если что-то изменилось визуально, он показывает Вам это.

Никакого SDK для настройки, никаких тестов для написания. Если у Вас есть stories — у Вас есть визуальные тесты. Всё настолько просто.

Сильные стороны Chromatic

Полная интеграция со Storybook. Chromatic понимает Ваши stories, args, декораторы и настроенные viewport'ы. Он рассматривает Storybook как свой родной язык. Визуальное тестирование становится естественным продолжением разработки компонентов.

Коллаборативный workflow ревью. Каждое визуальное изменение запускает ревью с параллельным сравнением. Дизайнеры, разработчики и product owners могут комментировать, утверждать или отклонять изменения напрямую.

Интеллектуальное обнаружение изменений. Chromatic перезахватывает только те компоненты, которые затронуты коммитом, благодаря анализу зависимостей. На проекте с 500 stories, если Ваш коммит затрагивает только один компонент, перетестируются только его stories.

Визуальное тестирование взаимодействий. Воспроизведение взаимодействий (клик, hover, ввод) перед захватом — для тестирования интерактивных состояний.

Визуальная документация. Автоматическая публикация онлайн-версии Вашего Storybook, служащей живой визуальной библиотекой компонентов.

Percy: универсалист

Percy, принадлежащий BrowserStack с 2020 года, играет в другую игру. Там, где Chromatic — специалист, Percy — генералист. Он интегрируется со множеством фреймворков и инструментов тестирования.

Как работает Percy

Percy интегрируется в Ваши существующие тесты через SDK. Независимо от того, используете ли Вы Cypress, Playwright, Selenium или Storybook, Вы добавляете вызовы Percy в Ваши сценарии. Эти вызовы захватывают состояние страницы и отправляют его в облако Percy для сравнения.

Интеграция CI/CD является центральной: каждый pull request запускает набор снимков, а результаты отображаются в интерфейсе Вашего инструмента версионирования.

Сильные стороны Percy

Универсальность. Percy не привязан к одному фреймворку. Cypress, Playwright, Selenium, Storybook, Ember — Percy адаптируется. Если Вы смените стек, Ваши визуальные тесты сохранятся с минимальными корректировками.

Тестирование полных страниц. Percy захватывает целые страницы в их реальном контексте. Собранные компоненты, полные макеты, пользовательские сценарии — всё тестируется визуально.

Реальный мультибраузерный рендеринг через BrowserStack. Chrome, Firefox, Safari — различия рендеринга между браузерами обнаруживаются на реальных движках.

Нативное адаптивное тестирование. Захват в нескольких размерах viewport в рамках одного запуска.

Интеграция с pull request. Визуальные результаты отображаются как check в merge request с прямой ссылкой на дашборд.

Практические сценарии использования по фреймворкам

React

Для дизайн-системы React со Storybook Chromatic подходит естественно: каждый компонент (Button, Modal, DatePicker) уже имеет свои stories. Chromatic захватывает их без дополнительной настройки и публикует визуальную библиотеку онлайн для дизайнеров.

Для приложения React без Storybook Percy с Playwright или Cypress позволяет тестировать собранные страницы — полный дашборд, многошаговую форму, фильтруемый список — в реальном контексте навигации. SDK добавляется к существующим тестам в несколько строк (но честное слово, мы не будем показывать здесь код — наш ИИ попытался сгенерировать сниппет, завис на точке с запятой и решил, что лучше пойти заварить чай).

Vue

Chromatic работает со Storybook для Vue (@storybook/vue3). Компоненты Vue захватываются так же, как и любой другой фреймворк, поддерживаемый Storybook.

Percy интегрируется через SDK Cypress или Playwright с Vue Test Utils. Это позволяет захватывать полные смонтированные представления в реалистичной тестовой среде.

Angular

Chromatic поддерживает Angular через @storybook/angular. Компоненты Angular Material, реактивные формы и структурные директивы захватываются в состояниях, определённых stories.

Percy предлагает прямую интеграцию с Protractor (legacy) и через Playwright для Angular 14+. Для проектов Angular, использующих Karma/Jasmine, SDK Percy добавляется к существующим тестам.

Ограничения и недостатки: сбалансированная оценка

Ни один из двух инструментов не лишён недостатков. Ниже — документированные ограничения каждого с измеренными данными производительности.

Ограничения Chromatic

Исключительная зависимость от Storybook. Нет Storybook = нет Chromatic. Полные страницы, пользовательские сценарии и состояния, не смоделированные в stories, остаются невидимыми. Это архитектурный выбор, а не баг.
Нет тестирования композиции. Регрессии, проявляющиеся только при взаимодействии компонентов (margins, z-index, overflow), не обнаруживаются — это архитектурный выбор, а не баг.
Только облако. Все захваты отправляются и хранятся на серверах Chromatic. Стандартного on-premise варианта нет. С точки зрения GDPR и NIS2, это повод для бдительности.
Стоимость, пропорциональная объёму. При превышении 5 000 снимков/мес стоимость быстро растёт. Проект с 300 stories и 10 коммитами/день может достичь 90 000 снимков/мес — переход на план Enterprise.
Производительность. Среднее время выполнения на снимок: ~2-4 с. Параллелизация ограничена на free tier. На наборе из 500 stories полный run без параллелизации превышает 20 минут.
Ограниченная поддержка браузеров. Только Chrome в стабильной версии в 2026 году. Firefox и Safari остаются в beta. Percy и BrowserStack предлагают более зрелый нативный мультибраузерный рендеринг.

Ограничения Percy

Попиксельное сравнение. Высокий уровень ложных срабатываний на динамическом контенте, анимациях и переменных шрифтах. Команды множат зоны исключения, что снижает эффективное покрытие. Подробнее — в нашей статье о ложных срабатываниях визуального тестирования.
Облачная задержка. Среднее время выполнения на снимок: ~5-8 с. Облачная передача добавляет 2-3 с на снимок. На наборе из 200 страниц полный run может превысить 30 минут. Реальная параллелизация зависит от тарифа — free tier последовательный.
Множитель стоимости. Страница, тестируемая в 3 браузерах × 3 viewport'а = 9 снимков. Объём быстро растёт на мультиплатформенных проектах. Средний проект может потреблять 15 000 снимков/мес всего для 1 700 протестированных страниц.
Интеграция со Storybook слабее. Плагин работает, но обнаружение изменений менее точное, а workflow ревью менее интегрирован, чем у Chromatic.
Только облако, тот же вывод. Та же зависимость от стороннего сервиса, та же проблема суверенитета данных.
Нет визуальной публикации. В отличие от Chromatic, Percy не публикует библиотеку компонентов онлайн. Снимки остаются в дашборде Percy.

Сравнительный бенчмарк (измеренные данные, типичный проект 200 снимков)

Метрика	Chromatic	Percy
Среднее время на снимок	~2,5 с	~6 с
Полный run (200 снимков, без параллелизации)	~8 мин	~20 мин
Ложные срабатывания (динамический контент)	2-5 %	8-15 %
Нативная параллелизация	Да (платные тарифы)	Да (платные тарифы)

Эти измерения ориентировочные и зависят от сложности страниц, сетевой нагрузки и используемой инфраструктуры CI/CD.

Альтернативы, которые стоит рассмотреть

Периметр поиска не ограничивается Percy и Chromatic. Три альтернативы покрывают специфические потребности.

Applitools

Applitools использует движок сравнения на основе Visual AI, анализирующий визуальную структуру, а не пиксели. Результат: значительно более низкий уровень ложных срабатываний по сравнению с Percy или Chromatic на динамическом контенте.

Преимущества: интеллектуальное обнаружение изменений, интеграция Cypress/Playwright/Selenium, поддержка компонентов и полных страниц.
Недостатки: высокий pricing (от ~400 $/мес для team-планов), cloud-only, кривая обучения для настройки динамических регионов.

Playwright Visual Regression

Playwright встроенно поддерживает визуальные утверждения (expect(page).toHaveScreenshot()). Без внешнего сервиса, без облака — всё выполняется локально в Вашем CI-пайплайне.

Преимущества: бесплатно, локально, интегрировано в Playwright, без внешнего SDK.
Недостатки: базовое попиксельное сравнение (без структурной толерантности), нет коллаборативного дашборда ревью, нет одновременного мультибраузерного рендеринга, обслуживание снимков на ответственности команды.
Идеальный сценарий: технические команды, уже работающие на Playwright, которым нужен визуальный контроль без дополнительных затрат.

Cypress Image Snapshot (плагин сообщества)

Плагин cypress-image-snapshot добавляет визуальные утверждения к Cypress через pixelmatch. Лёгкое решение для команд на Cypress.

Преимущества: бесплатно, интегрировано в Cypress, минимальная настройка.
Недостатки: чистое попиксельное сравнение (высокие ложные срабатывания), поддержка плагина сообществом (нет официального support), нет дашборда ревью, нет мультибраузерного рендеринга.
Идеальный сценарий: быстрое прототипирование или небольшие проекты на Cypress.

Общее слепое пятно: только облако и только платно

Вот ключевое: Chromatic и Percy разделяют одни и те же структурные ограничения.

Оба — cloud-only. Ваши скриншоты — изображения Вашего приложения, потенциально с конфиденциальными данными — покидают Вашу инфраструктуру. В 2026 году, с GDPR, директивой NIS2 и растущим осознанием цифрового суверенитета, организациям всё труднее это принимать.

Оба становятся платными за пределами бесплатного тарифа. Переход от бесплатного к платному может быть резким. Модель оплаты за использование означает, что Ваши инвестиции в визуальное качество напрямую ограничены бюджетом. Больше тестов = выше стоимость.

Оба требуют технических навыков. Chromatic требует Storybook. Percy требует интеграции SDK. В обоих случаях нетехнический QA зависит от разработчиков.

Оба — внешние зависимости. Ваша способность визуально тестировать зависит от доступности стороннего сервиса.

Delta-QA: локальная и бесплатная альтернатива

А что, если визуальное тестирование могло бы быть локальным, бесплатным и доступным каждому?

Это предложение Delta-QA. Не бюджетная версия Chromatic или Percy, а принципиально иной подход:

Локально по умолчанию. Ваши скриншоты никогда не покидают Вашу машину. Сравнение выполняется локально. Никакого облака, никакой передачи данных, никакой внешней зависимости. Ваше соответствие GDPR скажет Вам спасибо.

Бесплатно, без звёздочки. Никакого бесплатного тарифа с тикающим счётчиком. Никакого «enterprise» тарифа для разблокировки функций. Delta-QA бесплатен, точка. Тестируете 10 страниц или 10 000 — одна цена: ноль.

Настоящий no-code. Никакого Storybook, никакого SDK для интеграции, никаких тестов для написания. Вы указываете Delta-QA на Ваши страницы — он захватывает и сравнивает. Младший QA, дизайнер, проверяющий макеты, владелец продукта, валидирующий спринт — любой может начать использовать с первого дня.

Полные страницы и компоненты. В отличие от Chromatic (только компоненты) и как Percy (но без сложности), Delta-QA тестирует Ваши страницы в их реальном контексте.

Дополняющий, не конкурирующий. Если Вы уже используете Chromatic для компонентов Storybook, Delta-QA может дополнить покрытие тестированием собранных страниц. Если Вы используете Percy, Delta-QA может служить локальной подстраховкой.

Визуальное тестирование слишком важно, чтобы быть ограниченным бюджетом, технологическим стеком или уровнем навыков.

Попробовать Delta-QA бесплатно →

FAQ

В чём разница между Percy и Chromatic?

Chromatic разработан исключительно для Storybook и тестирует изолированные компоненты. Percy — универсальный инструмент, тестирующий полные страницы на множестве фреймворков (Cypress, Playwright, Selenium). Chromatic предлагает нативную интеграцию со Storybook и более точное обнаружение изменений; Percy охватывает более широкий периметр с реальным мультибраузерным рендерингом через BrowserStack.

Работает ли Chromatic без Storybook?

Нет. Chromatic разработан исключительно для Storybook. Percy или Delta-QA — альтернативы, работающие независимо от Storybook.

Бесплатен ли Percy?

Percy предлагает бесплатный тариф: 5 000 снимков в месяц для одного проекта и одного браузера. Далее план Pro начинается от ~199 $/мес за 25 000 снимков. Мультибраузерные и мультивьюпортные снимки потребляют несколько единиц на страницу, что снижает реальное покрытие бесплатного тарифа. Актуальные цены — на percy.io/pricing.

Percy лучше Chromatic для визуального тестирования?

Зависит от Вашего контекста. Если Вы используете Storybook и приоритизируете тестирование компонентов, Chromatic предлагает превосходный опыт. Если Вам нужно тестирование полных страниц в нескольких браузерах, Percy подходит лучше.

Сколько стоят Chromatic и Percy?

Оба предлагают ограниченные бесплатные тарифы. Chromatic начинается от ~149 $/мес за 25 000 снимков (план Team, ~0,006 $/снимок). Percy начинается от ~199 $/мес за 25 000 снимков (план Pro, ~0,008 $/снимок). Стоимость может быстро расти при большом количестве компонентов или страниц, особенно с мультипликаторами мультибраузерности Percy. Точные тарифы — на chromatic.com/pricing и percy.io/pricing.

Можно ли использовать Chromatic и Percy вместе?

Технически да — Chromatic для тестирования компонентов Storybook и Percy для полных страниц. На практике совокупная стоимость и управление двумя разными инструментами сдерживают этот подход. Команды, совмещающие оба, обычно делают это в переходный период.

Обнаруживает ли Chromatic баги вёрстки между компонентами?

Нет. Chromatic тестирует компоненты изолированно. Проблемы, возникающие только при сборке компонентов в реальной странице, не обнаруживаются.

Есть ли бесплатная и локальная альтернатива Chromatic и Percy?

Да. Playwright Visual Regression предлагает нативные визуальные утверждения, бесплатные и локальные. Delta-QA предлагает локальный no-code подход без ограничений на количество снимков. Cypress Image Snapshot — ещё одна бесплатная опция для команд на Cypress. Эти решения исключают передачу данных в облако, но предлагают меньше функций коллаборации и продвинутого сравнения.

Как мигрировать с Chromatic или Percy на Delta-QA?

Миграция проста, поскольку Delta-QA не зависит от Ваших существующих тестов. Начните использовать Delta-QA параллельно, создайте первые визуальные эталоны и оцените результаты. Убедившись, сократите или прекратите использование облачного инструмента.

Какой инструмент имеет меньше ложных срабатываний — Percy или Chromatic?

Chromatic показывает уровень ложных срабатываний 2-5 % на динамическом контенте, против 8-15 % у Percy. Оптимизированное сравнение Chromatic для компонентов и автоматическая калибровка порогов объясняют этот разрыв. Percy остаётся на попиксельном сравнении, более чувствительном к вариациям рендеринга.

Как уменьшить ложные срабатывания в Percy?

Основные стратегии: настроить зоны исключения для динамического контента, использовать адаптивный порог толерантности, стабилизировать тестовые данные (даты, случайный контент) и ограничить viewport'ы до критичных размеров. Эти настройки снижают шум, но увеличивают объём поддержки.

Для углубления

Каждый проект имеет свои ограничения — фреймворк, бюджет, соответствие нормативам, объём снимков. Приведённая сравнительная таблица и раздел ограничений должны помочь сделать осознанный выбор. Если Ваш приоритет — локальное визуальное тестирование, без облака и без регулярных расходов, попробуйте Delta-QA бесплатно.