Визуальное регрессионное тестирование: автоматизированный процесс обнаружения непреднамеренных изменений внешнего вида пользовательского интерфейса путём сравнения эталонного состояния (baseline) с текущим, позволяющий выявлять регрессии вёрстки, цветов, типографики или отступов до того, как они попадут в продакшн. — Общепринятое определение в front-end QA инженерии.
Diffy — один из тех инструментов, которые QA-команды обнаруживают, когда ищут простое и бесплатное решение для визуального регрессионного тестирования. И на бумаге Diffy — именно это: open source инструмент, который сравнивает скриншоты между двумя окружениями — продакшн и staging, например — и сигнализирует о визуальных различиях.
Просто. Прямолинейно. Привлекательно.
И при этом фундаментально ограничено.
Diffy сравнивает пиксели. Только пиксели. Каждое различие в рендеринге, значительное или тривиальное, обрабатывается одинаково. Текст изменился? Отмечено. Кнопка исчезла? Отмечено. Субпиксельное различие anti-aliasing между двумя окружениями? Тоже отмечено, с той же срочностью.
Delta-QA использует радикально иной подход. Это детерминированный движок визуального сравнения, который идёт дальше простого попиксельного сравнения: он отрисовывает обе страницы в реальном браузере, сравнивает визуальный результат и выявляет реальные регрессии — те, что затрагивают вёрстку, позиционирование, размеры — игнорируя визуальный шум, который никого не касается.
Это сравнение поможет вам понять, что на самом деле делает каждый инструмент, в чём каждый из них силён и какой подходит для ваших задач.
Попиксельное сравнение Diffy топит реальные регрессии в ложных срабатываниях. Delta-QA сигнализирует только о том, что заметил бы человеческий глаз, без написания кода, локально и бесплатно. Попробовать Delta-QA бесплатно →
Что такое Diffy: подход через сравнение окружений
Diffy — это open source инструмент визуального регрессионного тестирования, центральный принцип которого — сравнение между окружениями. Вместо сравнения скриншота с сохранённым эталоном Diffy делает скриншоты одной и той же страницы в двух (или трёх) разных окружениях и сравнивает их.
Концепция: prod vs staging vs dev
Идея Diffy элегантна. У вас есть сайт в продакшне. У вас есть сайт в staging с последними изменениями. Diffy делает снимок одной и той же страницы в обоих окружениях и показывает различия.
Если staging выглядит как продакшн, всё в порядке — ваши изменения не привнесли визуальную регрессию. Если staging отличается от продакшна, Diffy сигнализирует об этом и показывает, где именно различия.
Diffy также может использовать третье окружение (dev, например) для фильтрации различий, которые уже существуют между продакшном и staging независимо от ваших изменений. Это форма динамического эталона, которая не требует хранения референсных изображений.
Простота как преимущество
Главное преимущество Diffy — его концептуальная простота. Нет эталонов для управления, нет истории скриншотов для поддержки, нет процесса утверждения изменений. Вы сравниваете два окружения в реальном времени. И всё.
Для небольшой команды, которая хочет первую визуальную страховку без вложений в сложный инструмент, Diffy предлагает доступную точку входа. Установка разумна, освоение быстрое, результаты немедленные.
Что Diffy требует от вас
Diffy — технический инструмент. Установка и настройка требуют навыков работы с командной строкой. Вы должны предоставить URL окружений для сравнения, настроить viewports, управлять аутентификацией, если ваши окружения защищены, и интерпретировать результаты попиксельного сравнения.
У Diffy нет богатого визуального интерфейса для навигации по результатам. Различия представлены как наложенные или расположенные рядом изображения с процентом отличающихся пикселей. Интерпретация — «это реальный баг или шум?» — полностью на вас.
Фундаментальные ограничения попиксельного сравнения
Проблема Diffy не в том, что он делает. А в том, чего он не может делать. И эти ограничения присущи попиксельному подходу, а не конкретной реализации Diffy.
Ложные срабатывания: враг номер один
Когда вы сравниваете пиксели между двумя окружениями, вы сравниваете конечный результат рендеринга — после операционной системы, браузера, CSS-движка, рендеринга шрифтов, anti-aliasing и графического рендеринга. Каждый из этих слоёв может вносить различия на уровне пикселей, которые не соответствуют никакому визуальному изменению, воспринимаемому человеком.
Шрифты — главный источник ложных срабатываний. Один и тот же текст, с тем же шрифтом, того же размера не производит в точности те же пиксели на двух машинах — даже если обе используют одну операционную систему. Параметры рендеринга шрифтов (hinting, anti-aliasing, субпиксельное сглаживание) варьируются в зависимости от конфигурации системы, версии библиотеки рендеринга и иногда нагрузки CPU в момент рендеринга.
В межокружном сравнении, как у Diffy, эта проблема усиливается. Продакшн, вероятно, работает на другой инфраструктуре, чем staging. Серверы могут иметь разные версии системных библиотек, разные конфигурации рендеринга, разные версии браузеров. Каждое из этих различий генерирует ложные срабатывания, которые нужно классифицировать вручную.
Динамический контент: слепое пятно
Если ваш сайт отображает динамический контент — счётчик посетителей, временную метку, случайно рекомендованный товар, таргетированную рекламу — скриншоты продакшна и staging никогда не совпадут, даже без каких-либо изменений кода.
Diffy предлагает механизмы исключения областей изображения («ignore regions»). Но определение и поддержка этих зон исключения — постоянная работа. Каждый новый динамический компонент должен быть идентифицирован и исключён. Каждая реорганизация страницы делает недействительными координаты существующих зон исключения.
Это проблема обслуживания, которая растёт линейно с усложнением вашего сайта. Чем динамичнее ваш сайт, тем сложнее поддерживать Diffy.
Отсутствие диагностики
Diffy говорит, что есть различие. Он не говорит почему. Вы видите два скриншота с красными зонами, отмечающими различия, но затем вам нужно открыть DevTools, проинспектировать DOM, сравнить CSS и самостоятельно определить, является ли различие регрессией (padding изменился) или шумом (слегка иной рендеринг шрифта).
Отсутствие диагностики превращает каждую сессию обзора результатов в расследование. Для QA-команд, которым нужно обрабатывать десятки различий после каждого деплоя, это расследование — пожиратель времени.
Что такое Delta-QA: визуальное тестирование без кода
Delta-QA подходит к визуальному тестированию с принципиально другой стороны. Это детерминированный движок визуального сравнения: он отрисовывает обе страницы в реальном браузере и сравнивает визуальный результат, отличая настоящие регрессии от шума рендеринга.
Сравниваем то, что видит пользователь
Движок Delta-QA откалиброван под человеческое восприятие: он отмечает только то, что заметил бы человеческий глаз. Сдвинувшийся контейнер, переполнение, исчезнувший отступ, элемент, который перепозиционировался, — то, что реально ломает вёрстку, а не безобидные различия в рендеринге.
Это ключевое различие. Изменение текста меняет пиксели, но не ломает вёрстку (если только текст не выходит за границы — и тогда это именно та регрессия, которую вы хотите обнаружить). Изменение шрифта меняет пиксели, но не сдвигает элементы. Изменение фонового цвета меняет пиксели, но не меняет размеры.
Поскольку движок откалиброван под человеческое восприятие, он устраняет целые категории ложных срабатываний, которые отравляют попиксельное сравнение: вариации рендеринга шрифтов, различия anti-aliasing, микровариации рендеринга между браузерами. Результат — ноль ложных срабатываний на шуме рендеринга.
No-code: не маркетинговый аргумент, а необходимость
Diffy — инструмент для разработчиков. Установка, настройка, запуск — всё через командную строку. Результаты — изображения для технической интерпретации.
Delta-QA создан для использования любым членом команды. Ручные QA, product owner-ы, дизайнеры, руководители проектов. Не потому что no-code в моде, а потому что визуальное тестирование — общая ответственность.
Front-end разработчик знает, что он изменил в коде. Но именно QA проверяет, что изменение ничего не сломало. Именно product owner подтверждает, что рендеринг соответствует спецификации. Именно дизайнер оценивает, соответствует ли реализация макету. Если инструмент визуального тестирования доступен только разработчикам, эти люди исключены из процесса — и визуальное тестирование теряет значительную часть своей ценности.
Попиксельное сравнение тонет в ложных срабатываниях? Delta-QA предлагает детерминированный движок визуального сравнения без кода — бесплатно и с локальным хранением ваших скриншотов. Попробовать Delta-QA бесплатно →
Прямое сравнение: Diffy vs Delta-QA
Рассмотрим конкретные критерии сравнения, которые важны при выборе инструмента визуального тестирования.
Метод обнаружения
Diffy обнаруживает изменения, сравнивая пиксели между окружениями. Любое изменение пикселей сигнализируется без различия между значимым изменением и шумом рендеринга. Чувствительность бинарна: либо пиксели идентичны, либо нет (возможно, с пороговым допуском в процентах).
Delta-QA отрисовывает обе страницы в реальном браузере, сравнивает визуальный результат и отличает настоящие регрессии от шума рендеринга. Изменение текста не вызывает тревоги. Контейнер, который переполняется, элемент, который перепозиционируется, отступ, который исчезает — эти регрессии вызывают тревогу. Различие между изменением контента и регрессией вёрстки — автоматическое.
Ложные срабатывания
С Diffy процент ложных срабатываний прямо пропорционален динамичности вашего сайта и различиям между окружениями. Статический сайт на идентичных окружениях даст мало ложных срабатываний. Динамический сайт с гетерогенными окружениями даст их в изобилии.
С Delta-QA процент ложных срабатываний близок к нулю, потому что движок откалиброван под человеческое восприятие и отмечает только то, что заметил бы человеческий глаз, отличая настоящие регрессии от шума рендеринга. Это не порог допуска, маскирующий различия — это принципиально иной подход, который не считает их регрессиями изначально.
Удобство использования
Diffy ориентирован на разработчиков и DevOps-инженеров. Установка через командную строку. Настройка техническая. Интерпретация результатов требует понимания веб-рендеринга.
Delta-QA ориентирован на всю команду. Интерфейс визуальный. Настройка — с подсказками. Результаты представлены с чётким диагнозом: какой элемент изменился и каково влияние на вёрстку.
Требования к инфраструктуре
Diffy требует минимум два работающих окружения для сравнения. Идеально — три (продакшн, staging, dev) для фильтрации шума. Если ваши окружения не синхронизированы на уровне данных, сравнение искажено.
Delta-QA работает с одним окружением. Вы фиксируете baseline на staging-окружении, деплоите изменения, перезапускаете тест. Не нужно второе параллельное окружение. Никаких проблем с синхронизацией данных между окружениями.
Обслуживание
Обслуживание Diffy пропорционально сложности вашего сайта. Чем динамичнее сайт, тем больше зон исключения нужно определять и поддерживать. Чем больше расходятся окружения, тем больше нужно корректировать пороги допуска. Это непрерывная работа.
Delta-QA сокращает обслуживание, устраняя необходимость в зонах исключения для динамического контента и делая baseline независимыми от окружения рендеринга. Обслуживание сводится к обновлению baseline, когда изменение вёрстки является намеренным.
Стоимость
Diffy — open source и бесплатный. Это неоспоримое преимущество для команд с ограниченным бюджетом. Реальная стоимость Diffy — во времени, потраченном на установку, настройку, обслуживание и сортировку ложных срабатываний — но это стоимость во времени, а не в деньгах.
Delta-QA — коммерческий продукт с бесплатным тарифом для старта. Финансовые затраты компенсируются сокращением времени на ложные срабатывания, уменьшением обслуживания и доступностью для всей команды.
Когда выбрать Diffy
Diffy остаётся актуальным выбором в определённых контекстах.
Если ваш сайт в основном статический, с малым количеством динамического контента, и ваши окружения продакшна и staging размещены на идентичной инфраструктуре, Diffy может обеспечить надёжные результаты с приемлемым уровнем ложных срабатываний.
Если ваша команда состоит исключительно из разработчиков, комфортно работающих с командной строкой, и никому другому не нужен доступ к результатам визуальных тестов, технический интерфейс Diffy — не препятствие.
Если ваш бюджет строго нулевой и у вас есть время на настройку и обслуживание инструмента, Diffy предлагает бесплатное базовое покрытие.
Но будем честны: эти условия в совокупности встречаются редко. Большинство сайтов динамичны. Большинство команд включают нетехнических специалистов. Большинство проектов не имеют идеально идентичных окружений.
Когда выбрать Delta-QA
Delta-QA — правильный выбор, когда вы хотите надёжные результаты без траты времени на сортировку ложных срабатываний. Когда ваш сайт динамичен, когда окружения неидентичны, когда в команде есть люди, которые не живут в терминале.
Delta-QA — также правильный выбор, когда вам нужен диагноз, а не просто тревога. Знать, что страница изменилась — полезно. Знать, что padding основного контейнера изменился с 24 пикселей на 16 — это действенная информация. Delta-QA даёт вам эту информацию. Diffy показывает красные пиксели.
И Delta-QA — правильный выбор, когда вы хотите масштабировать визуальное тестирование. Перейти с 10 тестируемых страниц на 100, со 100 на 1 000 — с Diffy каждая добавленная страница — потенциальный источник дополнительных ложных срабатываний. С Delta-QA движок масштабируется без пропорционального роста шума, потому что отличает настоящие регрессии от шума рендеринга.
Готовы покончить с ручной сортировкой ложных срабатываний? Запустите первое сравнение в Delta-QA — бесплатно и без регистрации. Попробовать Delta-QA бесплатно →
FAQ
Diffy всё ещё активно поддерживается?
Diffy — open source проект с переменной активностью обслуживания. Проверьте репозиторий на GitHub на предмет последних коммитов и открытых issues. Open source проект со спорадическим обслуживанием может вызвать проблемы совместимости с новыми версиями браузеров и операционных систем.
Можно ли использовать Diffy и Delta-QA вместе?
Технически да, но обычно это не нужно. Оба инструмента выполняют одну функцию — обнаружение визуальных регрессий — разными методами. Если вы уже используете Diffy и хотите оценить Delta-QA, можете запускать их параллельно в переходный период для сравнения релевантности результатов.
Обнаруживает ли Delta-QA изменения цвета, которые увидел бы Diffy?
Delta-QA отрисовывает обе страницы в реальном браузере и сравнивает визуальный результат, поэтому замечает изменения цвета, заданного в CSS (background-color, color, border-color), — если такой цвет меняется, Delta-QA это видит. Изменение же цвета внутри изображения (логотип, фотография) движок не отмечает: это изменение контента, а не вёрстки.
Сколько времени занимает настройка каждого инструмента?
Diffy обычно требует несколько часов на начальную установку и настройку плюс переменное время на корректировку зон исключения и порогов допуска для вашего сайта. Delta-QA может быть готов к работе за несколько минут для базового теста, с постепенным наращиванием покрытия всего сайта.
Как перейти с Diffy на Delta-QA?
Миграция проста, потому что у двух инструментов нет общих данных. Вы настраиваете Delta-QA на тех же страницах, которые тестировали с Diffy, фиксируете первые baseline и готовы к работе. Никакого преобразования данных или миграции baseline — пиксельные baseline Diffy и baseline Delta-QA имеют разную природу.
Хорошо ли Diffy работает с адаптивным дизайном?
Diffy может делать скриншоты при разных разрешениях, что позволяет тестировать адаптивный дизайн. Однако каждое дополнительное разрешение умножает количество сравнений и потенциально количество ложных срабатываний. Delta-QA обрабатывает адаптивный дизайн нативно, отрисовывая и сравнивая каждый breakpoint в реальном браузере с тем же уровнем надёжности.
Попиксельное сравнение было первым поколением визуального тестирования. Детерминированный движок, откалиброванный под человеческое восприятие, — следующее. Перейдите от шума к сигналу.