1
Border radius
Обнаруживает изменения скругления углов, включая индивидуальные значения для каждого угла.
25 тест-кейсов
Рамки и Тени
Рамки и тени определяют визуальные границы элементов интерфейса. Они создают глубину, разделение и иерархию. Delta-QA обнаруживает каждую модификацию этих свойств.
Что мы обнаруживаем
2
Box shadow
Фиксирует изменения смещения, размытия, распространения и цвета теней, включая многослойные тени.
3
Outline
Мониторит изменения outline-style, outline-color, outline-width и outline-offset для индикаторов фокуса.
4
Стиль и толщина рамки
Обнаруживает изменения между solid, dashed, dotted, double рамками и вариации толщины.
5
Цвет рамки
Определяет изменения цвета на отдельных сторонах рамки, включая прозрачные и наследуемые значения.
Живой пример
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
До
После
Реальные сценарии
🎯
border-radius, который делает карточки квадратными
Разработчик добавляет CSS-сброс на общий компонент и обнуляет border-radius всех карточек сайта. В одночасье карточки со скруглёнными углами становятся квадратными — сайт из «современного и тёплого» превращается в «жёсткий и сухой». Ни у кого нет времени проверять 200 экранов при каждом деплое. Delta-QA сравнивает скриншоты и выделяет углы, ставшие из скруглённых квадратными, на каждой карточке — разница формы чётко видна при наложении.
⚠️
Рамка, которая удваивается
Разработчик добавляет рамку на контейнер таблицы, не настроив свойство border-collapse. Результат: в некоторых местах появляются двойные рамки — линии выглядят неравномерно утолщёнными. Таблица кажется «сломанной» и непрофессиональной. На стейджинге всё было нормально, но в продакшене таблица стилей загружается в другом порядке, и баг проявляется. Delta-QA сравнивает скриншоты и выделяет утолщённые линии — каждая двойная рамка видна в diff.
💡
Тень, которая исчезает
Разработчик «наводит порядок» в CSS и удаляет box-shadow, который считает лишним. Основные кнопки действий теряют тень и становятся плоскими — они сливаются с фоном. Визуально кнопки менее заметны, посетители реже их замечают. Изменение казалось пустяковым — убрать тень — его смержили без визуальной проверки. Delta-QA сравнивает скриншоты и обнаруживает исчезновение тени — ставшие плоскими кнопки видны в визуальном diff.
Готовы ловить каждую визуальную регрессию?
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.