Почти идентичные цветовые сдвиги
Обнаруживает изменения цвета всего на 1-2 значения RGB (напр. #666666 vs #626262), невидимые невооружённым глазом.
Самые опасные регрессии — те, которые невозможно увидеть невооружённым глазом. Различия субпиксельного рендеринга и вариации сглаживания могут ускользнуть от ручного QA. Delta-QA работает на уровне пикселей.
Обнаруживает изменения цвета всего на 1-2 значения RGB (напр. #666666 vs #626262), невидимые невооружённым глазом.
Фиксирует вариации сглаживания шрифтов и краёв, создающие различные паттерны субпиксельного сглаживания.
Мониторит дробное позиционирование пикселей и различия рендеринга, вызванные transform или процентным размерированием.
Обнаруживает изменения -webkit-font-smoothing и рендеринга шрифтов, влияющие на чёткость и восприятие веса.
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
Разработчик добавляет глобальный CSS-сброс, который удаляет стили hover на ссылках и кнопках. При наведении кнопки больше не меняют цвет и тень — выглядят точно так же, как в покое. У посетителей больше нет визуальной обратной связи, что элемент кликабельный. CTR падает, и никто не понимает почему. Изменение было частью большого CSS-рефакторинга, никто не проверил состояния hover. Delta-QA делает скриншоты элементов в состоянии hover и сравнивает: кнопки, не меняющие вид при наведении, сразу видны в diff.
Разработчик меняет глобальные стили ссылок, и побочным эффектом ссылки в тексте теряют подчёркивание и отличительный цвет. Теперь они выглядят как обычный текст — тот же цвет, тот же стиль. Посетители не знают, куда кликать в статьях и на страницах контента. Разработчик проверил главную навигацию (которая использует специфические классы), но не ссылки в контенте. Delta-QA сравнивает скриншоты и выделяет ссылки, которые больше не отличаются от текста — отсутствие подчёркивания и отличительного цвета видно в diff.
CSS-изменение затирает кастомные стили скроллбара. Тонкая элегантная полоса прокрутки заменяется стандартным скроллбаром браузера — толстым и серым. Сайт теряет отделку, зона контента визуально сужается. Это та регрессия, которую никто активно не ищет — её замечают смутно, не определяя причину. Delta-QA сравнивает скриншоты и выделяет изменение — толстая полоса, заменившая кастомный дизайн, видна при наложении.
Разработчик добавляет новый CSS-сброс, который меняет -webkit-font-smoothing с antialiased на auto. На macOS весь текст сайта выглядит жирнее и менее чётко — как будто типографику слегка размыли. Пользователи Mac воспринимают сайт как «менее аккуратный», не понимая в чём дело. На стейджинге всё было нормально, потому что тестовое окружение работало на Linux с другим рендерингом. Delta-QA сравнивает скриншоты и обнаруживает изменение рендеринга — более жирные и менее чёткие символы видны при наложении.
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.