Delta-QA vs Percy: Структурное визуальное тестирование или скриншоты в облаке?
Визуальное тестирование на основе скриншотов (screenshot testing): метод обнаружения визуальных регрессий, заключающийся в захвате полного изображения веб-страницы или компонента, а затем в попиксельном сравнении с эталонным изображением — любое отличие, превышающее настраиваемый порог, отмечается как потенциальная регрессия.
Percy долгое время был первым именем, которое приходило на ум при упоминании автоматизированного визуального тестирования. Приобретённый BrowserStack в 2020 году, инструмент утвердился как «очевидное» решение для команд, желающих добавить слой визуального сравнения в свой тестовый пайплайн. И долгое время это действительно был лучший доступный вариант — скорее по умолчанию, чем по превосходству, но всё же лучший.
Ландшафт изменился. И вопрос, который каждая команда должна задавать себе сегодня — не «как интегрировать Percy в мои тесты?», а «по-прежнему ли подход Percy наиболее релевантен для моей задачи?»
Delta-QA предлагает радикально иной ответ на ту же проблему. Без скриншотов, без облака, без SDK, без оплаты за скриншот. Структурный, локальный, no-code и бесплатный подход. Сравним оба инструмента без обиняков.
Percy: визуальное тестирование как расширение ваших существующих тестов
Percy работает по внешне простому принципу: в стратегических точках ваших автоматизированных тестов вы запускаете захват скриншота. Этот скриншот отправляется на серверы BrowserStack, где сравнивается попиксельно с эталонным изображением (baseline). Различия отображаются в веб-панели, где ваша команда может одобрить или отклонить каждое изменение.
Идея элегантна. Реализация — менее.
Чтобы использовать Percy, вам сначала нужны автоматизированные тесты — Cypress, Playwright, Selenium, Puppeteer или один из многих поддерживаемых фреймворков. Затем вы устанавливаете SDK Percy для вашего фреймворка. Модифицируете тесты, добавляя вызовы захвата в нужных точках. Настраиваете токен аутентификации для связи с серверами Percy. И надеетесь, что ваш CI-пайплайн имеет достаточно стабильное сетевое соединение для отправки скриншотов высокого разрешения при каждом запуске.
Если вы разработчик, знакомый с инструментами тестирования, всё это выполнимо за несколько часов. Если вы не разработчик — а значительная часть людей, отвечающих за визуальное качество, таковыми не являются — вы полностью зависите от кого-то другого для настройки и поддержки вашего инструмента визуального тестирования.
Delta-QA: визуальное тестирование как самостоятельная деятельность
Delta-QA основывается на противоположном постулате: визуальное тестирование не должно быть надстройкой над вашими функциональными тестами. Это самостоятельная деятельность со своими потребностями, своими пользователями и своими ограничениями.
На практике вы предоставляете Delta-QA две версии страницы (два URL, два окружения или два момента времени), и инструмент анализирует структурные различия между ними. Никаких скриншотов, отправляемых в облако. Никакого попиксельного сравнения. Delta-QA исследует DOM, вычисленные CSS-свойства и иерархию элементов, чтобы определить, что изменилось.
Результат — чёткий отчёт о значимых различиях: добавленные, удалённые, изменённые, перемещённые элементы с указанием затронутых CSS-свойств. Никакой размытой интерпретации, никаких «этот пиксель изменил цвет на незаметный оттенок». Структурные факты, проверяемые и объяснимые.
И всё это без написания ни единой строки кода. Если вы умеете пользоваться веб-браузером, вы умеете пользоваться Delta-QA. Это не маркетинговый слоган — это буквально реальность интерфейса.
Код vs no-code: почему это меняет всё
Самое фундаментальное различие между Percy и Delta-QA не техническое — оно организационное.
Percy — это инструмент разработчика. Он живёт в коде, устанавливается через npm или pip, настраивается в конфигурационных файлах и запускается в CI/CD-пайплайнах. Это совершенно логично, когда ваши тестировщики — разработчики. Это стена, когда нет.
Подумайте о своей команде. Кого волнует визуальное качество вашего продукта? Разработчиков, безусловно. Но также дизайнеров, создавших макеты. Продакт-оунеров, утвердивших пользовательские сценарии. QA-менеджеров, определяющих критерии приёмки. Маркетологов, управляющих контентными страницами. Никому из этих людей не нужно писать код, чтобы проверить, что сайт выглядит правильно.
Percy структурно исключает их из процесса визуального тестирования. Они могут просматривать результаты в панели — одобрять или отклонять изменения — но не могут настраивать новые тесты, добавлять новые страницы для мониторинга или корректировать параметры обнаружения. Они пассивные потребители инструмента, созданного для других.
Delta-QA их включает. Любой член команды может запустить визуальное сравнение, добавить страницы для мониторинга, настроить пороги чувствительности и интерпретировать результаты. Визуальное тестирование становится общей ответственностью, а не делегированной технической задачей.
Оплата за скриншот: модель, наказывающая за тщательность
Ценовая модель Percy заслуживает особого внимания, потому что создаёт порочный стимул.
Percy взимает плату за количество скриншотов в месяц. Планы начинаются с включённой квоты скриншотов, и каждый дополнительный скриншот сверх квоты оплачивается. Чем больше вы тестируете, тем больше платите. Чем тщательнее ваше визуальное покрытие, тем выше счёт.
Подумайте на мгновение, что это означает на практике. У вас интернет-магазин с 500 страницами товаров. Вы хотите визуально проверять каждую страницу после каждого деплоя. Это 500 скриншотов за деплой. Если вы деплоите ежедневно — это 15 000 скриншотов в месяц. Если тестируете в трёх разрешениях (десктоп, планшет, мобильный) — это 45 000 скриншотов в месяц. План, покрывающий такой объём, не будет стоить 400 долларов.
Эта модель создаёт нездоровое напряжение между покрытием тестами и бюджетом. Команды в итоге ограничивают тестируемые страницы, снижают частоту тестирования или тестируют в меньшем числе разрешений — не потому, что это правильное техническое решение, а потому, что бюджет диктует. Ценовая модель инструмента активно ухудшает качество тестирования.
Delta-QA не берёт ничего. Ни за скриншот, ни за страницу, ни за месяц. Вы тестируете столько страниц, сколько хотите, так часто, как хотите, в стольких разрешениях, сколько хотите. Тщательность вашего тестового покрытия ограничена вашими амбициями, а не кошельком.
Облако vs локально: суверенитет ваших данных
Каждый скриншот, отправленный в Percy, проходит через серверы BrowserStack и хранится там. Для большинства публичных сайтов это не проблема. Но публичные сайты — лишь малая часть того, что тестируют команды.
А как насчёт вашей административной панели? Вашей внутренней панели мониторинга с данными клиентов? Вашего staging-окружения с анонимизированными (или не всегда идеально анонимизированными) данными продакшена? Вашего медицинского портала, банковского интерфейса, системы управления персоналом?
Отправка скриншотов этих страниц на серверы третьей стороны, даже сертифицированной SOC 2, поднимает вопросы, которые некоторые организации не могут игнорировать. Отраслевые регламенты (GDPR, HIPAA, PCI-DSS), внутренние политики безопасности и здравый смысл в области защиты данных устанавливают границы того, что может проходить через внешние серверы.
Delta-QA снимает вопрос. Инструмент работает локально. Ваши страницы анализируются локально. Результаты остаются локальными. Никакие данные не покидают вашу среду. Это не премиум-функция и не корпоративная опция развёртывания — это базовая архитектура инструмента.
Стабильность результатов: капризные пиксели vs надёжная структура
Любой, кто использовал инструмент визуального тестирования на основе скриншотов, знает, что ложные срабатывания — бич этого подхода. Percy добился значительного прогресса с умными алгоритмами сравнения, настраиваемыми порогами чувствительности и зонами исключения. Но фундаментальная проблема остаётся: сравнение пикселей по своей природе нестабильно.
Рендеринг шрифтов варьируется от одной операционной системы к другой. Сглаживание отличается в зависимости от видеокарты. Анимации, захваченные в немного разные моменты, дают разные изображения. Динамический контент (даты, счётчики, реклама) меняется между захватами. Изображения, загружаемые с CDN, могут прийти в другом порядке. Полоса прокрутки, появляющаяся или исчезающая, сдвигает все элементы на несколько пикселей.
Каждый из этих случаев генерирует «diff» в Percy, который не является реальным багом. И каждое ложное срабатывание отнимает время: кто-то должен посмотреть на diff, решить, что это не настоящая проблема, и одобрить его. Умножьте на сотни скриншотов и десятки деплоев — и вы получите часы работы, потраченные на сортировку ложных срабатываний. В жизни есть вещи поинтереснее — практически все остальные, собственно.
Структурный подход Delta-QA невосприимчив к этим проблемам. Рендеринг шрифта может варьироваться — CSS-структура остаётся идентичной. Сглаживание может различаться — вычисленные CSS-свойства не меняются. Текстовый контент может обновляться — иерархия DOM и стили остаются стабильными. Процент ложных срабатываний структурного подхода — малая доля от процента подхода на основе скриншотов.
Интеграция CI/CD: два подхода, одна цель
Percy интегрируется в CI/CD-пайплайны через свой SDK. Это зрелая интеграция, хорошо работающая с основными CI-системами (GitHub Actions, GitLab CI, Jenkins, CircleCI). Но она добавляет сетевую зависимость: если серверы Percy медленные или недоступны, ваш пайплайн страдает.
Delta-QA тоже интегрируется в CI/CD-пайплайны, но без SDK и внешних зависимостей. Инструмент запускается локально на вашем CI-раннере. Без сетевой задержки, без таймаутов из-за падения стороннего сервиса. Ваш пайплайн зависит только от вашей собственной инфраструктуры.
Когда Percy остаётся правильным выбором
Percy — хороший инструмент в определённых специфических контекстах.
Вы хотите визуальное тестирование как дополнение к существующим функциональным тестам. Если у вас уже есть надёжный набор тестов на Cypress или Playwright, добавить Percy к этому набору — путь наименьшего сопротивления. Вы добавляете захваты в ключевых точках тестов, и ваше визуальное покрытие сразу работает.
Вам нужно кросс-браузерное визуальное тестирование. Percy может захватывать скриншоты в разных комбинациях браузер/разрешение через инфраструктуру BrowserStack. Если проверка визуального рендеринга одновременно в Chrome, Firefox, Safari и Edge — требование, Percy предоставляет эту возможность.
Ваша команда состоит исключительно из разработчиков. Если единственные люди, которые будут заниматься визуальным тестированием — разработчики, комфортно чувствующие себя с SDK и CI/CD-пайплайнами, порог входа Percy ничтожен.
Когда Delta-QA — лучший выбор
Визуальное тестирование — самостоятельная потребность, а не расширение функциональных тестов. Если вы хотите визуальное тестирование независимо от автоматизированных тестов — или если у вас просто нет автоматизированных тестов — Delta-QA самодостаточен.
Не-разработчикам нужно участвовать в визуальном тестировании. QA, дизайнеры, продакт-оунеры, маркетологи — если этим профилям нужно запускать и интерпретировать визуальные тесты без посредничества разработчика, Delta-QA — единственный реалистичный выбор.
Бюджет ограничен или вы отказываетесь от оплаты по объёму. Если вы не хотите, чтобы покрытие тестами диктовалось бюджетом на скриншоты, бесплатность Delta-QA устраняет это ограничение.
Конфиденциальность данных не обсуждается. Если ваши страницы содержат конфиденциальные данные или политики безопасности запрещают отправку скриншотов на сторонние серверы, локальный подход Delta-QA — единственный соответствующий требованиям вариант.
Вы устали от ложных срабатываний. Если вы уже экспериментировали с визуальным тестированием на основе скриншотов, и сортировка ложных срабатываний заставила вас отказаться от него, структурный подход Delta-QA примирит вас с визуальным тестированием.
Вердикт без прикрас
Percy — зрелый инструмент, хорошо интегрированный в экосистему BrowserStack, эффективный для команд разработчиков, желающих добавить визуальный слой к своим автоматизированным тестам. Хороший инструмент для своего конкретного случая использования.
Но этот случай использования уже, чем маркетинг Percy предполагает. Большинству команд не нужен SDK, облачный сервис и оплата за скриншот для обнаружения визуальных регрессий. Им нужен простой, быстрый инструмент, доступный каждому, который не наказывает за тщательность тестирования растущим счётом.
Delta-QA — этот инструмент. Не потому, что он сложнее Percy — это не так, и он не претендует на это. А потому, что он решает проблему визуального тестирования с меньшим трением, меньшими затратами и большей доступностью. И в реальном мире инструмент, который внедряется, всегда полезнее инструмента, который впечатляет.
FAQ
Percy бесплатен?
Percy предлагает бесплатный план с ограниченным количеством скриншотов в месяц (порог менялся со временем). Далее платные планы начинаются от нескольких сотен долларов в месяц и растут в зависимости от объёма скриншотов. Для серьёзного профессионального использования с существенным тестовым покрытием бесплатного плана недостаточно. Delta-QA бесплатен без ограничений по объёму.
Можно ли использовать Percy без написания кода?
Нет. Percy требует интеграции SDK в фреймворк автоматизированного тестирования. Даже самые простые варианты интеграции (Percy CLI с URL) требуют использования терминала и команд командной строки. Delta-QA полностью no-code — веб-интерфейс достаточен для настройки и запуска визуальных тестов.
Структурный подход обнаруживает те же баги, что и скриншоты?
Он обнаруживает подавляющее большинство визуальных регрессий — вызванных изменениями CSS, структуры HTML или компоновки. Он не обнаруживает чисто графические проблемы рендеринга (повреждение изображения, проблемы с веб-шрифтами, баги рендеринга, специфичные для браузера), требующие попиксельного визуального сравнения. Для большинства команд структурные регрессии составляют более 90% визуальных багов, встречающихся на практике.
Percy работает со страницами с аутентификацией?
Да, но только в контексте ваших автоматизированных тестов. Ваш тестовый скрипт должен обрабатывать аутентификацию (логин, куки, токены), после чего Percy захватывает скриншоты аутентифицированных страниц. С Delta-QA доступ к аутентифицированным страницам прямой, поскольку инструмент работает в вашей локальной среде, где у вас уже есть доступ к вашим приложениям.
Сколько времени экономится при устранении ложных срабатываний?
Команды, использующие инструменты визуального тестирования на основе скриншотов, регулярно сообщают, что сортировка ложных срабатываний составляет от 30% до 60% времени, затрачиваемого на визуальное тестирование. За типичную неделю с 20 деплоями и сотнями скриншотов это несколько часов человеческого труда на одобрение различий, не являющихся багами. Структурный подход Delta-QA кардинально сокращает эту пропорцию.
Percy и Delta-QA могут сосуществовать?
Безусловно. Вы можете использовать Percy в автоматизированных тестах для попиксельного сравнения критичных компонентов, а Delta-QA параллельно для ежедневного покрытия всех страниц. Оба инструмента независимы и не мешают друг другу. Это даже разумная комбинация, если вы хотите лучшее от обоих подходов.
Визуальное тестирование должно быть широко развёрнутой страховочной сетью, а не инструментом роскоши для команд, которые могут позволить себе SDK и облачную подписку. Percy проложил путь. Delta-QA делает его доступным для всех.