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

Вёрстка

Вёрстка служит позвоночником любого интерфейса: именно она определяет, куда Ваши посетители направляют взгляд, как они навигируют и сколько усилий им нужно для выполнения задачи. Регрессия в макете никогда не косметическая. Кнопка «Оплатить», вытолкнутая под линию сгиба из-за изменённого padding, оборачивается мгновенным падением конверсии; админ-таблица с накладывающимися колонками становится операционным риском на рабочем месте бизнес-пользователя. Регрессии вёрстки чаще всего возникают из непредвиденных каскадных эффектов: правка глобального padding ради одного частного случая, добавление overflow: hidden, ломающего схлопывание отступов, рефакторинг flexbox, инвертирующий порядок элементов, изменение CSS-сетки, сдвигающее весь каталог, или внедрение нового компонента, тихо сдвигающего соседний контент. Сложность боксовой модели CSS вкупе со вложенностью flexbox, grid, абсолютного позиционирования и float делает эти взаимодействия трудно предсказуемыми даже для опытного разработчика. Классические автоматические пайплайны проверяют наличие элементов в DOM, но не их визуальное расположение. Delta-QA закрывает эту слепую зону, сравнивая полные эталонные скриншоты страниц до и после каждой модификации и подсвечивая каждую зону, в которой изменилось положение, размер или выравнивание. Визуальный отчёт чётко показывает смещения, наложения и элементы, выходящие за viewport, что позволяет через сравнение страниц подтвердить, что переработка CSS не сломала другой участок приложения, без ручной перепроверки каждого шаблона. Это и есть базовая дисциплина визуального тестирования и контроля визуальной регрессии в современных проектах.

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

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

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

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

Свойства Flexbox

Мониторит flex-direction, justify-content, align-items, flex-wrap, gap и изменения order.

Изменения CSS Grid

Обнаруживает модификации grid-template, изменения размеров треков и переназначения grid-area.

Позиционирование и наложение

Фиксирует изменения position (static, relative, absolute, fixed, sticky) и их влияние на размещение.

Отступы margin и padding

Отслеживает изменения отступов, включая сценарии margin collapse, вызывающие неожиданные сдвиги.

Блочная модель и размеры

Обнаруживает изменения width, height, ограничений min/max и box-sizing.

Float и clear

Определяет изменения макета на основе float и поведение clearfix, которые могут вызвать перекомпоновку.

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

01 Padding, который сдвигает всё

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

02 Flexbox, который меняет порядок

Разработчик рефакторит CSS страницы тарифов и случайно меняет порядок отображения. Три плана теперь показываются Enterprise, Pro, Бесплатный, справа налево. Посетители видят самый дорогой тариф первым, психологическая привязка инвертирована. Релиз был срочным, проверили минимум: все три тарифа есть, клик работает, выкатываем. Delta-QA сравнивает скриншоты и обнаруживает, что блоки поменялись местами: инверсия чётко видна в diff.

03 Тихое схлопывание отступов

Разработчик добавляет overflow: hidden на контейнер, чтобы исправить баг с переполнением. Неожиданное последствие: механизм схлопывания отступов CSS ломается, и расстояние между секциями внезапно удваивается. Страница удлиняется на 200px, секции выглядят оторванными друг от друга. Команда доверилась пайплайну автотестов, который не покрывает визуал. Delta-QA сравнивает скриншоты и выделяет удвоение пространства между секциями: сдвиг всей вёрстки виден в diff.

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

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

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