1
Свойства Flexbox
Мониторит flex-direction, justify-content, align-items, flex-wrap, gap и изменения order.
50 тест-кейсов
Вёрстка
Изменения макета — одни из самых разрушительных визуальных регрессий. Сдвинутый элемент, сломанная сетка или схлопнувшийся отступ могут полностью изменить пользовательский опыт. Delta-QA анализирует пространственные отношения между элементами.
Что мы обнаруживаем
2
Изменения CSS Grid
Обнаруживает модификации grid-template, изменения размеров треков и переназначения grid-area.
3
Позиционирование и наложение
Фиксирует изменения position (static, relative, absolute, fixed, sticky) и их влияние на размещение.
4
Отступы margin и padding
Отслеживает изменения отступов, включая сценарии margin collapse, вызывающие неожиданные сдвиги.
5
Блочная модель и размеры
Обнаруживает изменения width, height, ограничений min/max и box-sizing.
6
Float и clear
Определяет изменения макета на основе float и поведение clearfix, которые могут вызвать перекомпоновку.
Живой пример
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
До
После
Реальные сценарии
🎯
Padding, который сдвигает всё
Разработчик исправляет баг выравнивания в форме регистрации и трогает глобальный padding полей ввода. Побочный эффект: форма оплаты получает увеличенные поля, и кнопка «Оплатить» уходит за нижнюю границу экрана. На мобильном ещё хуже — форма вылезает за пределы экрана. QA проверил форму регистрации (ту, что менялась), но не форму оплаты. Delta-QA сравнивает скриншоты всех страниц и выделяет сдвиг на форме оплаты — кнопка «Оплатить», исчезнувшая из видимой области, сразу видна в diff.
⚠️
Flexbox, который меняет порядок
Разработчик рефакторит CSS страницы тарифов и случайно меняет порядок отображения. Три плана теперь показываются Enterprise, Pro, Бесплатный — справа налево. Посетители видят самый дорогой тариф первым, психологическая привязка инвертирована. Релиз был срочным, проверили минимум: все три тарифа есть, клик работает — выкатываем. Delta-QA сравнивает скриншоты и обнаруживает, что блоки поменялись местами — инверсия чётко видна в diff.
💡
Тихое схлопывание отступов
Разработчик добавляет overflow: hidden на контейнер, чтобы исправить баг с переполнением. Неожиданное последствие: механизм схлопывания отступов CSS ломается, и расстояние между секциями внезапно удваивается. Страница удлиняется на 200px, секции выглядят оторванными друг от друга. Команда доверилась пайплайну автотестов, который не покрывает визуал. Delta-QA сравнивает скриншоты и выделяет удвоение пространства между секциями — сдвиг всей вёрстки виден в diff.
Готовы ловить каждую визуальную регрессию?
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.