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

Видимость и Прозрачность

Регрессии видимости — одни из самых коварных, потому что заставляют пайплайн думать, будто всё в порядке: элемент в DOM, юнит-тесты зелёные, но визуально он исчез, скрыт за другим компонентом или обрезан родительским контейнером. Это в точности сценарий с промо-баннером, всё ещё присутствующим в коде, но ставшим невидимым из-за overflow: hidden, добавленного в другом месте, или мобильной кнопкой «Купить», накрытой виджетом чата с слишком высоким z-index. На бизнес-интерфейсах сообщение об ошибке валидации, перешедшее в opacity 0 по каскаду, может сорвать критическую операцию в ERP без понимания причины оператором. Обычные источники включают переработку header с добавлением overflow, плохо скоординированные между командами наслоения z-index, A/B-тесты, частично откаченные с забытым display: none, вариации opacity, введённые ради эффекта, но распространившиеся слишком широко, или конфликты между таблицами стилей, грузящимися в production в другом порядке. Delta-QA закрывает эту слепую зону, сравнивая отрендеренные браузером эталонные скриншоты, а не сырое DOM-дерево. Если элемент перестаёт быть видимым, частично обрезан, теряет прозрачность или накрыт другим компонентом, визуальный diff чётко это сигнализирует. Инструмент также захватывает интерактивные состояния, что позволяет через визуальное тестирование убедиться, что выпадающее меню, модалка или overlay остаются корректно видимыми после каждого деплоя, без ручного воспроизведения сценариев пользователя на каждой странице и без риска необнаруженной визуальной регрессии.

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

1

Переключение display

Обнаруживает, когда элементы переключаются между значениями display (none, block, flex, grid, inline).

2

Свойство visibility

Фиксирует изменения visibility:hidden, когда элементы становятся невидимыми, но занимают место.

3

Изменения прозрачности

Мониторит вариации opacity от полной прозрачности (0) до полной непрозрачности (1).

4

Перестановка z-index

Обнаруживает изменения контекста наложения, где элементы перекрываются по-разному.

5

Overflow и обрезка

Определяет изменения поведения overflow (visible, hidden, scroll, auto), которые могут скрывать или раскрывать контент.

Живой пример

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

До
После

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

🎯

Промо-баннер, который исчезает

Разработчик переделывает шапку и добавляет overflow: hidden на родительский контейнер. Промо-баннер «-20% по коду SUMMER» остаётся в коде, но визуально он обрезан — невидим на экране. Посетители не видят акцию, вы теряете продажи несколько дней подряд. Команда доверилась пайплайну тестов — баннер есть в DOM, тесты зелёные. Delta-QA сравнивает скриншоты и обнаруживает исчезновение баннера — пустое пространство вверху страницы сразу видно в diff.

⚠️

z-index, который прячет кнопку

Разработчик добавляет виджет чата с z-index: 9999. На мобильном виджет оказывается точно поверх плавающей кнопки «Купить» внизу экрана. Кнопка по-прежнему в коде, но визуально скрыта за чатом — клиенты не могут купить товар. Тестировщик проверил на десктопе, но не на мобильном, где элементы перекрываются. Delta-QA сравнивает мобильные скриншоты и обнаруживает, что кнопка «Купить» перекрыта виджетом — скрытая зона видна в diff.

💡

Прозрачность, которая делает текст нечитаемым

Разработчик уменьшает непрозрачность тёмного оверлея на hero-изображении, чтобы «лучше показать фото». Белый текст оказывается на слишком светлом фоне — становится практически нечитаемым. Посетители не могут прочитать главное сообщение на главной странице. Изменение казалось косметическим, разработчик смержил его, решив, что так красивее. Delta-QA сравнивает скриншоты и выделяет ставший нечитаемым текст — потеря контраста между текстом и фоном чётко видна при наложении.

Готовы ловить каждую визуальную регрессию?

Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.