Визуальное регрессионное тестирование (Visual Regression Testing): «Автоматизированная техника обеспечения качества, сравнивающая внешний вид пользовательского интерфейса между двумя версиями приложения для выявления непреднамеренных визуальных изменений — структурных (компоновка), стилистических (цвета, шрифты) или функциональных (отсутствующие или смещённые элементы)».
На арене SaaS визуального тестирования два имени уже много лет доминируют в разговорах: Applitools и Percy. Один делает ставку на искусственный интеллект и enterprise-рынок. Другой — на интеграцию с CI/CD и экосистему BrowserStack. Оба обещают обнаруживать то, что упускают Ваши функциональные тесты: визуальные регрессии.
Но что выбрать? Ответ, как часто в инженерии, — «зависит от обстоятельств». Эта статья не будет продавать Вам ни один из них. Она объективно разберёт сильные и слабые стороны каждого с объективностью арбитра — который, кстати, знает третий вариант, о котором оба гиганта предпочли бы, чтобы Вы не знали.
Applitools: ИИ для enterprise
Applitools была основана в 2013 году с амбициозной идеей: использовать искусственный интеллект для понимания пользовательских интерфейсов так, как это делал бы человек. Не простое попиксельное сравнение, а структурный анализ, способный отличить реальный баг от незначительного изменения.
Сильные стороны Applitools
Visual AI — главный дифференциатор. Флагманская технология Applitools, называемая «Visual AI» и эволюционировавшая в «Ultrafast Grid», действительно впечатляет. Там, где попиксельное сравнение отмечает каждую микровариацию рендеринга как потенциальную проблему, Visual AI Applitools понимает структуру страницы. Он знает, что два немного разных рендеринга одного и того же текста — не регрессия. Он знает, что кнопка, изменившая цвет, вероятно, регрессия.
На практике это означает значительно более низкий уровень ложных срабатываний по сравнению с традиционными подходами. Для команд, тонущих в нерелевантных алертах, это смена парадигмы — подробнее о сокращении ложных срабатываний мы рассказывали отдельно.
Ultrafast Grid. Вместо запуска Ваших тестов на каждой комбинации браузер/разрешение локально, Applitools захватывает DOM и CSS Вашей страницы, затем воссоздаёт рендеринг в своей облачной grid. Вы запускаете тест один раз локально, а Applitools «воспроизводит» его визуально на десятках комбинаций. Это элегантно и быстро.
Экосистема интеграций. Applitools интегрируется практически со всем: Selenium, Cypress, Playwright, Puppeteer, Storybook, Appium и многим другим. Более 70 SDK доступны. Каков бы ни был Ваш стек, для него, вероятно, есть Applitools SDK.
Enterprise-функции. Управление командами, контроль доступа, продвинутая отчётность, интеграции Jira/Slack, пакетное обслуживание эталонов — Applitools закрывает все галочки, которых ожидают крупные организации.
Слабые стороны Applitools
Цена. Обратимся к слону в комнате. Applitools не публикует цены открыто, что редко хороший знак для Вашего кошелька. Отзывы рынка указывают на цены, способные быстро взлететь, особенно для команд с высоким объёмом захватов. Модель ценообразования, основанная на «контрольных точках», означает, что чем больше Вы тестируете, тем больше Вы платите — создавая извращённый стимул ограничивать Ваше тестирование.
Сложность. Широта функций Applitools — палка о двух концах. Для команды, которая просто хочет «сравнить скриншоты до и после развёртывания», кривая обучения значительна. Между разными типами тестов (classic, ultrafast, native mobile), уровнями matching (strict, content, layout) и опциями конфигурации требуется время, чтобы освоить инструмент.
Зависимость от облака. Все Ваши скриншоты транзитируют через серверы Applitools. Для определённых организаций — банковских, медицинских, оборонных — это категорический стоп. Даже для других это создаёт зависимость: если сервис недоступен, Ваши визуальные тесты тоже.
Требуется кодинг. Несмотря на весь свой ИИ, Applitools остаётся инструментом для разработчиков. Каждый тест должен быть написан на языке программирования, интегрирован через SDK и поддерживаться как код. Нетехническое QA остаётся в стороне.
Percy: CI/CD-нативно от BrowserStack
Percy, приобретённый BrowserStack в 2020 году, позиционируется иначе. Там, где Applitools нацелен на enterprise со сложным ИИ, Percy ставит на простоту интеграции в CI/CD pipeline.
Сильные стороны Percy
Образцовая CI/CD-интеграция. Percy блистает в workflow непрерывной интеграции. Каждый pull request может автоматически запускать визуальные захваты с результатами, прямо видимыми в интерфейсе Вашего инструмента версионирования (GitHub, GitLab, Bitbucket). Workflow review/approve ощущается естественным для команд, привыкших к code reviews.
Поддержка BrowserStack. Со времени приобретения Percy пользуется массивной инфраструктурой BrowserStack для мультибраузерного рендеринга. Захваты делаются на реальных браузерах (не эмуляция), обеспечивая высокую точность рендеринга.
Относительная простота. Percy легче запустить, чем Applitools. Концепция ясна: интегрируйте SDK в Ваши тесты, Percy захватывает и сравнивает. Дашборд чистый, результаты читаемы, а workflow approve/reject интуитивен.
Поддержка Storybook и компонентов. Percy предлагает выделенную интеграцию Storybook, автоматически захватывающую каждую story. Для команд, использующих Storybook как источник истины для своих компонентов, это очень естественный путь адаптации.
Щедрый бесплатный уровень. Percy предлагает бесплатный уровень, позволяющий тестировать инструмент перед обязательством. Этого достаточно для небольших проектов или серьёзной оценки — то, что Applitools делает более сложным.
Слабые стороны Percy
Попиксельное сравнение. Это техническая ахиллесова пята Percy. В отличие от Applitools с его Visual AI, Percy преимущественно использует попиксельное сравнение (с некоторыми улучшениями). Результат: больше ложных срабатываний, особенно на проектах с динамическим контентом, анимациями или переменным рендерингом шрифтов.
Percy улучшил свои алгоритмы со временем, но разрыв с подходом Applitools на основе ИИ остаётся заметным. Это немного как разница между базовым проверщиком орфографии и языковой моделью — оба находят очевидные ошибки, но один понимает контекст, а другой нет.
Ограничения бесплатного уровня. Бесплатный уровень Percy, хоть и приятный, имеет строгие ограничения на ежемесячные захваты. Когда они превышены, ценообразование следует типичным паттернам SaaS: эскалирующие тарифы, быстро растущие.
Меньше гибкости matching. Percy предлагает меньше опций конфигурации, чем Applitools, для регулировки чувствительности сравнения. У Вас меньше рычагов для снижения ложных срабатываний, что может стать фрустрирующим на сложных проектах.
Зависимость от BrowserStack. Как и Applitools, Percy — облачный сервис. Ваши данные идут в BrowserStack. Ваша тестовая ёмкость зависит от их доступности. А Ваш бюджет зависит от их прайса — который может быть пересмотрен в большую сторону при следующем продлении.
Прямое сравнение: 7 критериев, которые имеют значение
1. Технология сравнения
Applitools использует проприетарный ИИ-подход, анализирующий визуальную структуру страницы, а не отдельные пиксели. Percy использует улучшенное попиксельное сравнение. На практике Applitools обнаруживает регрессии с меньшим шумом. Percy чаще отмечает незначительные различия.
Преимущество: Applitools, явно.
2. Интеграция CI/CD
Оба интегрируются в CI/CD pipelines, но Percy был спроектирован вокруг этого workflow. Опыт pull request от Percy — с визуальными результатами прямо в ревью — немного плавнее, чем у Applitools.
Преимущество: Percy, слегка.
3. Мультибраузерный рендеринг
Applitools воссоздаёт рендеринг через свой Ultrafast Grid (быстро, но воссоздано). Percy использует реальные браузеры BrowserStack (медленнее, но более достоверно). Оба покрывают основные браузеры.
Преимущество: ничья — скорость vs точность, каждый выбирает свой приоритет.
4. Простота принятия
Percy проще настроить для первого проекта. Applitools предлагает больше мощности, но требует больше времени на обучение. Оба требуют навыков разработки.
Преимущество: Percy для старта, Applitools в долгосрочной перспективе.
5. Ценообразование
Ни один не блистает прозрачностью ценообразования. Оба берут плату по использованию (захваты/контрольные точки) с тарифами, увеличивающимися с объёмом. Percy предлагает более доступный бесплатный уровень. Applitools обычно воспринимается как более дорогой, особенно в масштабе.
Преимущество: Percy на бесплатном уровне, переменно дальше.
6. Экосистема и интеграции
Applitools поддерживает 70+ SDK и интегрируется практически со всеми тестовыми фреймворками. Percy более избирателен, но покрывает основные (Cypress, Playwright, Selenium, Storybook). Интеграция Storybook от Percy особенно отшлифована.
Преимущество: Applitools по широте, Percy для Storybook.
7. Приватность данных
Оба — облачные сервисы, обрабатывающие Ваши скриншоты на своих серверах. Applitools предлагает опции приватного хостинга для крупных аккаунтов (по премиум-цене). Percy не предлагает эту опцию как стандарт.
Преимущество: Applitools для enterprise-опций, но ни один не локальный по умолчанию.
Для кого каждый инструмент?
Выбирайте Applitools, если:
Вы крупная организация с выделенным бюджетом на тестирование. У Вас сотни страниц для тестирования в нескольких браузерах. Вы перегружены ложными срабатываниями попиксельного подхода. У Вас разработчики, посвящённые поддержанию тестов. Вы можете обосновать значительные инвестиции в премиум-инструмент.
Выбирайте Percy, если:
Вы команда разработки со зрелым CI/CD workflow. Вы ищете естественную интеграцию в Ваши pull request. Вы используете Storybook для Ваших компонентов. Вы хотите быстро стартовать с бесплатным уровнем. Вы уже в экосистеме BrowserStack.
Выбирайте... что-то другое, если:
У Вас нет разработчиков для написания и поддержания тестов. Вы не хотите отправлять Ваши скриншоты в сторонний cloud. Ваш бюджет не позволяет регулярных SaaS-расходов. Вы ищете что-то, что вся команда сможет использовать, не только разработчики.
Третий путь: а что если визуальному тестированию не нужно облако?
Applitools и Percy заслуживают огромного признания: они демократизировали концепцию автоматизированного визуального тестирования. До них обнаружение визуальных регрессий было либо ручным (люди сравнивали скриншоты на глаз), либо несуществующим.
Но оба разделяют допущения, которые мы считаем спорными:
Допущение №1: Визуальное тестирование должно быть в облаке. Почему? Потому что так работает SaaS, а SaaS — самая прибыльная бизнес-модель. Но технически сравнение изображений может прекрасно работать локально. Вашим скриншотам не нужно пересекать интернет, чтобы быть сравненными.
Допущение №2: Визуальное тестирование — это расширение тестирования кода. Оба инструмента интегрируются через SDK в существующие тестовые фреймворки. Это логично для разработчиков, но де-факто исключает всех, кто не кодит. QA-аналитики, дизайнеры, продакт-овнеры — люди, у которых есть экспертные мнения о том, как должен выглядеть интерфейс — низведены до ожидания, пока разработчики покажут им результаты.
Допущение №3: Визуальное тестирование имеет регулярную стоимость, пропорциональную объёму. Чем больше Вы тестируете, тем больше платите. Это классическая SaaS-модель usage-based. Но должна ли Ваша приверженность качеству зависеть от Вашей способности платить за скриншот? Это немного как если бы Ваш дымовой детектор брал с Вас за каждую инспекцию воздуха — в какой-то момент возникло бы искушение его отключить.
Delta-QA оспаривает все три допущения:
- Локально, не облако: Ваши данные остаются с Вами. Никаких передач, никакой внешней зависимости, никаких вопросов соответствия.
- No-code, не SDK: каждый в команде может создавать и интерпретировать визуальные тесты. Никаких навыков кодинга не нужно.
- Бесплатно, не за захват: тестируйте сколько хотите, не глядя на счётчик. У визуального качества не должно быть ценового потолка.
Delta-QA здесь не для того, чтобы «убить» Applitools или Percy. У этих инструментов есть своё место, особенно в организациях, которые хотят глубокой интеграции со своими pipeline разработки. Но для команд, ищущих более доступный, более суверенный и более экономичный подход к визуальному тестированию, теперь есть третий путь.
Попробовать Delta-QA бесплатно →
FAQ
Лучше ли Applitools, чем Percy, для визуального тестирования?
Applitools имеет превосходную технологию сравнения благодаря своему Visual AI, генерирующему меньше ложных срабатываний, чем попиксельный подход. Percy, со своей стороны, предлагает лучшую CI/CD-интеграцию и более доступный бесплатный уровень. «Лучше» зависит от Ваших приоритетов: точность (Applitools) или простота интеграции (Percy).
Сколько стоят Applitools и Percy?
Ни Applitools, ни Percy не публикуют детальный прайс. Оба работают по модели usage (захваты/контрольные точки) с эскалирующими тарифами. Applitools обычно считается более дорогим из двух, особенно в масштабе. Percy предлагает бесплатный уровень, ограниченный по ежемесячным захватам. Для точных цен Вам нужно связаться с их отделами продаж.
Можно ли использовать Applitools или Percy без кодинга?
Нет. Оба инструмента требуют интеграции через SDK в существующий тестовый фреймворк (Selenium, Cypress, Playwright и т. д.). Вам нужно писать код для создания тестов и поддержания сценариев. Для no-code подхода к визуальному тестированию альтернативы, такие как Delta-QA, позволяют нетехническим профилям создавать и управлять тестами.
Работает ли Percy вне экосистемы BrowserStack?
Да, Percy работает независимо, даже если Вы не используете другие продукты BrowserStack. Однако интеграция с BrowserStack — это преимущество, если Вы уже его используете для cross-browser тестирования. Приобретение BrowserStack усилило мультибраузерные возможности рендеринга Percy.
Существуют ли бесплатные альтернативы Applitools и Percy?
Да. В open source BackstopJS предлагает базовые, но функциональные возможности визуального тестирования. Playwright нативно включает toHaveScreenshot() для сравнения скриншотов. Для no-code, локального решения с неограниченными захватами Delta-QA предлагает бесплатную альтернативу, не требующую навыков разработки.
Безопасны ли мои данные с Applitools или Percy?
Оба сервиса обрабатывают Ваши скриншоты на своих облачных серверах. Applitools предлагает опции приватного хостинга для крупных аккаунтов. Percy хранит данные на инфраструктуре BrowserStack. Если суверенитет данных — абсолютный приоритет, локальные решения (такие как Delta-QA) устраняют вопрос, держа всё на Вашей инфраструктуре.
Хотите визуальное тестирование без SDK, без облака, без счетов?