1
Переключение display
Обнаруживает, когда элементы переключаются между значениями display (none, block, flex, grid, inline).
25 тест-кейсов
Видимость и Прозрачность
Изменения видимости могут заставить контент появляться или исчезать неожиданно. Delta-QA фиксирует каждое изменение состояния видимости.
Что мы обнаруживаем
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-изменения на ваших веб-страницах — без кода.