Chromatic vs Percy: цены 2026

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

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

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

Все наши сравнения по проверяемым критериям: Альтернативы и сравнения.

Прежде чем выбирать между двумя подписками с оплатой за снимок, попробуйте локальную альтернативу. Delta-QA сравнивает Ваши экраны — бесплатно, без банковской карты и без оплаты за использование. Попробовать Delta-QA бесплатно →

Сравнительная таблица: 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 снимков/мес. Starter: 179 $/мес (35 000 снимков, на 06/2026). Enterprise: по запросу. (chromatic.com/pricing)	Free: 5 000 скриншотов/мес. Сверх того: платные тарифы по использованию (прайс на browserstack.com/percy). Enterprise: по запросу.
Бесплатный тариф	5 000 снимков/мес, 1 проект, без расширенной параллелизации	5 000 снимков/мес, 1 проект, 1 браузер
Storybook	Нативная поддержка — понимает stories, args, decorators, viewports без настройки	Плагин доступен — функциональная интеграция, но менее глубокая, чем Chromatic

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

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

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

Как работает 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.

Ищете бесплатную альтернативу Chromatic и Percy? Delta-QA сравнивает визуальные эталоны без кода — создайте бесплатный аккаунт, без банковской карты. Попробовать Delta-QA бесплатно →

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

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

Applitools

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

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

Если Вы выбираете именно между Visual AI и попиксельным подходом, прямое противостояние мы разбираем в материале Applitools vs Percy: ИИ против пикселей.

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: no-code и бесплатная альтернатива

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

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

Суверенитет данных, при необходимости. Версия On-Premise гарантирует, что скриншоты никогда не покидают Вашу инфраструктуру — никакого облака, никакой передачи данных наружу. Ваше соответствие GDPR скажет Вам спасибо.

Бесплатно, честно. Никакого «enterprise» тарифа для разблокировки базовых функций. Delta-QA бесплатен для старта — 100 checkpoints в месяц включены, без банковской карты, а сценарии тестирования не ограничены.

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

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

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

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

Готовы сравнивать без оплаты за снимок? Запустите своё первое сравнение экранов в 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 скриншотов в месяц для одного проекта и одного браузера. Далее в дело вступают платные тарифы по использованию (прайс на browserstack.com/percy). Мультибраузерные и мультивьюпортные снимки потребляют несколько скриншотов на страницу, что снижает реальное покрытие бесплатного тарифа. Актуальные цены — на browserstack.com/percy.

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

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

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

Оба предлагают бесплатные тарифы по 5 000 снимков/скриншотов в месяц. Chromatic начинается от 179 $/мес за 35 000 снимков (план Starter, на 06/2026). У Percy за пределами бесплатного тарифа платные планы тарифицируются по использованию (прайс на browserstack.com/percy). Стоимость может быстро расти при большом количестве компонентов или страниц, особенно с мультипликаторами мультибраузерности Percy. Точные тарифы — на chromatic.com/pricing и browserstack.com/percy.

Можно ли использовать 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'ы до критичных размеров. Эти настройки снижают шум, но увеличивают объём поддержки.

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