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

Рамки и Тени

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

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

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

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

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

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.

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

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

macOS и Windows · бесплатно · без регистрации