Переключение display
Обнаруживает, когда элементы переключаются между значениями display (none, block, flex, grid, inline).
Регрессии видимости — одни из самых коварных, потому что заставляют пайплайн думать, будто всё в порядке: элемент в DOM, юнит-тесты зелёные, но визуально он исчез, скрыт за другим компонентом или обрезан родительским контейнером. Это в точности сценарий с промо-баннером, всё ещё присутствующим в коде, но ставшим невидимым из-за overflow: hidden, добавленного в другом месте, или мобильной кнопкой «Купить», накрытой виджетом чата с слишком высоким z-index. На бизнес-интерфейсах сообщение об ошибке валидации, перешедшее в opacity 0 по каскаду, может сорвать критическую операцию в ERP без понимания причины оператором. Обычные источники включают переработку header с добавлением overflow, плохо скоординированные между командами наслоения z-index, A/B-тесты, частично откаченные с забытым display: none, вариации opacity, введённые ради эффекта, но распространившиеся слишком широко, или конфликты между таблицами стилей, грузящимися в production в другом порядке. Delta-QA закрывает эту слепую зону, сравнивая отрендеренные браузером эталонные скриншоты, а не сырое DOM-дерево. Если элемент перестаёт быть видимым, частично обрезан, теряет прозрачность или накрыт другим компонентом, визуальный diff чётко это сигнализирует. Инструмент также захватывает интерактивные состояния, что позволяет через визуальное тестирование убедиться, что выпадающее меню, модалка или overlay остаются корректно видимыми после каждого деплоя, без ручного воспроизведения сценариев пользователя на каждой странице и без риска необнаруженной визуальной регрессии.
Обнаруживает, когда элементы переключаются между значениями display (none, block, flex, grid, inline).
Фиксирует изменения visibility:hidden, когда элементы становятся невидимыми, но занимают место.
Мониторит вариации opacity от полной прозрачности (0) до полной непрозрачности (1).
Обнаруживает изменения контекста наложения, где элементы перекрываются по-разному.
Определяет изменения поведения overflow (visible, hidden, scroll, auto), которые могут скрывать или раскрывать контент.
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
Разработчик переделывает шапку и добавляет overflow: hidden на родительский контейнер. Промо-баннер «-20% по коду SUMMER» остаётся в коде, но визуально он обрезан — невидим на экране. Посетители не видят акцию, вы теряете продажи несколько дней подряд. Команда доверилась пайплайну тестов — баннер есть в DOM, тесты зелёные. Delta-QA сравнивает скриншоты и обнаруживает исчезновение баннера — пустое пространство вверху страницы сразу видно в diff.
Разработчик добавляет виджет чата с z-index: 9999. На мобильном виджет оказывается точно поверх плавающей кнопки «Купить» внизу экрана. Кнопка по-прежнему в коде, но визуально скрыта за чатом — клиенты не могут купить товар. Тестировщик проверил на десктопе, но не на мобильном, где элементы перекрываются. Delta-QA сравнивает мобильные скриншоты и обнаруживает, что кнопка «Купить» перекрыта виджетом — скрытая зона видна в diff.
Разработчик уменьшает непрозрачность тёмного оверлея на hero-изображении, чтобы «лучше показать фото». Белый текст оказывается на слишком светлом фоне — становится практически нечитаемым. Посетители не могут прочитать главное сообщение на главной странице. Изменение казалось косметическим, разработчик смержил его, решив, что так красивее. Delta-QA сравнивает скриншоты и выделяет ставший нечитаемым текст — потеря контраста между текстом и фоном чётко видна при наложении.
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.