35 тест-кейсов

Реальные Компоненты

Реальные UI-компоненты — карточки товара, админ-таблицы, навигационные панели, dropdown, модалки, карусели, тарифные сетки, канбан-доски — комбинируют множество CSS-свойств в плотных взаимозависимых визуальных системах. Тестировать компонент изолированно через эталонный скриншот в Storybook недостаточно, потому что регрессия может всплыть только тогда, когда компонент интегрирован в реальный контекст: dropdown открывается за таблицей из-за overflow: hidden, добавленного для решения другой проблемы, модалка смещена из-за изменённого позиционирования body ради sticky-компонента, или карусель показывает два слайда вместо одного, потому что ширина родительского контейнера изменилась. На бизнес-интерфейсах такие регрессии затрагивают критичные функции — кнопки архивации, скрытые в таблице, опции валидации, невидимые в модалке — и их операционное влияние выходит далеко за рамки визуального дискомфорта в банковских дашбордах или ERP. Согласованность дизайн-системы зависит именно от стабильности этих компонентов, интегрированных в реальные страницы, спринт за спринтом. Delta-QA захватывает полные эталонные скриншоты страниц, содержащих эти компоненты, в их разных интерактивных состояниях (открытое меню, отображённая модалка, выбранная строка), и сравнивает снэпшоты с baseline. Diff подсвечивает компоненты, у которых изменились размеры, позиционирование, видимый контент или глубина наслоения между версиями. Такой подход через визуальное тестирование и сравнение страниц позволяет валидировать, что изменение в одной части системы не сломало другой компонент на расстоянии, и даёт командам QA покрытие полных UI-паттернов, которое юнит-тесты изолированных компонентов по построению не могут уловить.

Виджеты дашборда

Валидирует визуальную целостность карточек данных, графиков, KPI-индикаторов и панелей метрик.

Карточки e-commerce

Тестирует карточки товаров, отображение цен, компоненты рейтинга и стилизацию кнопок покупки.

Канбан-доски

Мониторит колоночные макеты, стеки карточек, ручки перетаскивания и индикаторы статусов.

Таблицы цен

Валидирует карточки тарифов, списки сравнения, выделенные планы и стилизацию CTA-кнопок.

Навигационные панели

Тестирует навигацию header, выпадающие меню, мобильное гамбургер-меню и индикаторы активных ссылок.

Таблицы данных

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

До

После

Попробовать онлайн-компаратор

Разработчик добавляет overflow: hidden на таблицу, чтобы исправить баг с горизонтальным скроллом. Последствие: выпадающее меню действий на каждой строке открывается, но остаётся обрезанным — видна только верхняя половина, пункты «Удалить» и «Архивировать» срезаны. Разработчик исправил свой баг со скроллом, но не проверил, что выпадающие меню по-прежнему работают визуально. Delta-QA сравнивает скриншоты с открытым меню и обнаруживает, что dropdown обрезан — недостающая половина видна в diff.

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

CSS-изменение меняет ширину родительского контейнера карусели товаров. Вместо одного слайда теперь видны два — второй обрезан посередине. Визуально это выглядит сломанным, клиенты видят небрежную подачу. Разработчик менял контейнер по другой причине и даже не знал, что карусель от него зависит. Delta-QA сравнивает скриншоты и обнаруживает частично видимый второй слайд — обрезанный контент виден в diff.

ПредыдущаяСовременный CSS

СледующаяНеуловимые Изменения