Категория обнаружения

Рамки и Тени

Рамки и тени остаются далеко не декоративной мелочью: они формируют восприятие глубины, отделяют кликабельные зоны от информационных и придают идентичность компонентам дизайн-системы. Когда border-radius меняется с 12px на 0 на всех карточках сайта, целая визуальная идентичность переключается с «современного и тёплого» восприятия на «жёсткое», и ни один функциональный тест об этом не сообщит. На бизнес-интерфейсах удалённая box-shadow на главной кнопке действия делает её визуально плоской и менее заметной, что выливается в ошибки использования в банковских дашбордах или ERP. Регрессии этой категории нередко рождаются от CSS-reset, введённого ради одного изолированного случая, от «уборки» таблицы стилей с удалением box-shadow, признанной ненужной, от изменения порядка загрузки между staging и production, меняющего каскад, или от рамки, добавленной без управления border-collapse на таблице, что создаёт неравномерные двойные рамки. Outline и разделители доступности тоже страдают от глобальных переработок, с прямыми последствиями для видимого фокуса. Delta-QA обрабатывает эту категорию через сравнение страниц с эталонными скриншотами при каждой новой версии: попиксельный анализ обнаруживает изменения радиуса, появление или исчезновение тени, вариации толщины линии и модификации цвета рамки. Визуальный diff локализует каждую карточку, кнопку и разделитель, чьё внешнее восприятие изменилось, что даёт возможность валидировать переработку токенов высоты или радиуса в дизайн-системе через визуальное тестирование, не сравнивая компоненты вручную один за другим, и страхует от тихой визуальной регрессии.

38 / 437 протестированных случаев 0 ложных срабатываний 0 ложных пропусков

Детерминированный ИИ Delta-QA — не LLM — заново проверяется на всех 437 тест-кейсах, 38 из них в этой категории: 0 ложных срабатываний, 0 пропусков.

Посмотрите, как он находит

Проверьте на своих страницах

Цвет рамки дочернего элемента меняется с зелёного на красный.

1 различий, замеченных человеческим глазом · 1 различий, обнаруженных алгоритмом

До
После

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

Border radius

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

Box shadow

Фиксирует изменения смещения, размытия, распространения и цвета теней, включая многослойные тени.

Outline

Мониторит изменения outline-style, outline-color, outline-width и outline-offset для индикаторов фокуса.

Стиль и толщина рамки

Обнаруживает изменения между solid, dashed, dotted, double рамками и вариации толщины.

Цвет рамки

Определяет изменения цвета на отдельных сторонах рамки, включая прозрачные и наследуемые значения.

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

01 border-radius, который делает карточки квадратными

Разработчик добавляет CSS-сброс на общий компонент и обнуляет border-radius всех карточек сайта. В одночасье карточки со скруглёнными углами становятся квадратными: сайт из «современного и тёплого» превращается в «жёсткий и сухой». Ни у кого нет времени проверять 200 экранов при каждом деплое. Delta-QA сравнивает скриншоты и выделяет углы, ставшие из скруглённых квадратными, на каждой карточке: разница формы чётко видна при наложении.

02 Рамка, которая удваивается

Разработчик добавляет рамку на контейнер таблицы, не настроив свойство border-collapse. Результат: в некоторых местах появляются двойные рамки: линии выглядят неравномерно утолщёнными. Таблица кажется «сломанной» и непрофессиональной. На стейджинге всё было нормально, но в продакшене таблица стилей загружается в другом порядке, и баг проявляется. Delta-QA сравнивает скриншоты и выделяет утолщённые линии: каждая двойная рамка видна в diff.

03 Тень, которая исчезает

Разработчик «наводит порядок» в CSS и удаляет box-shadow, который считает лишним. Основные кнопки действий теряют тень и становятся плоскими: они сливаются с фоном. Визуально кнопки менее заметны, посетители реже их замечают. Изменение казалось пустяковым (убрать тень), его смержили без визуальной проверки. Delta-QA сравнивает скриншоты и обнаруживает исчезновение тени: ставшие плоскими кнопки видны в визуальном diff.

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

Создайте бесплатный аккаунт и находите изменения CSS на своих страницах — без кода.

Без карты · Отмена в любой момент