20 тест-кейсов

Неуловимые Изменения

Самые опасные регрессии — те, которые невозможно увидеть невооружённым глазом. Различия субпиксельного рендеринга и вариации сглаживания могут ускользнуть от ручного QA. Delta-QA работает на уровне пикселей.

Что мы обнаруживаем

1

Почти идентичные цветовые сдвиги

Обнаруживает изменения цвета всего на 1-2 значения RGB (напр. #666666 vs #626262), невидимые невооружённым глазом.

2

Различия сглаживания

Фиксирует вариации сглаживания шрифтов и краёв, создающие различные паттерны субпиксельного сглаживания.

3

Субпиксельный рендеринг

Мониторит дробное позиционирование пикселей и различия рендеринга, вызванные transform или процентным размерированием.

4

Вариации сглаживания шрифтов

Обнаруживает изменения -webkit-font-smoothing и рендеринга шрифтов, влияющие на чёткость и восприятие веса.

Живой пример

Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.

До
После

Реальные сценарии

🎯

Hover, который исчезает с кнопок

Разработчик добавляет глобальный 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-изменения на ваших веб-страницах — без кода.