Адаптивность

Адаптивность давно перестала быть темой только для массовых сайтов: бизнес-приложения теперь смотрят на планшете во время совещания, в мобильности у клиента или на внешних экранах нестандартного формата. Визуальная регрессия на промежуточном брейкпоинте — типично 820px на iPad или 1024px на маленьком ноутбуке — способна сделать часть Вашего приложения непригодной к использованию, и никто этого не заметит локально, потому что разработчики обычно работают на одном формате. Классический сценарий: брейкпоинт, переехавший с 768px на 480px и сминающий колонки на планшете, гамбургер-меню, заменённое десктопным, выходящим за экран, или mobile font-size, применяющийся вплоть до 1024px и делающий весь текст слишком мелким на портативном экране. Container queries добавляют новый слой сложности, потому что зависят от контекста родителя, а не от глобального viewport, что делает регрессии ещё менее предсказуемыми. На некоторых браузерах забытый container-type на родителе достаточно, чтобы сломать рендеринг целого компонента. Delta-QA обрабатывает эти случаи, захватывая каждую страницу на нескольких размерах viewport, заданных командой, что создаёт мультиформатный визуальный baseline из эталонных скриншотов. При каждом запуске diff подсвечивает плохо складывающиеся колонки, переполняющиеся элементы, сжимающиеся тексты, разъезжающиеся компоненты и появившиеся горизонтальные полосы прокрутки. Такой подход через визуальное тестирование и сравнение страниц позволяет командам QA покрыть все точки разрыва сайта без ручного ресайзинга браузера на каждом экране при каждом деплое, гарантируя согласованность рендеринга на всех устройствах посетителей и операторов.