1
Object-fit и позиция
Обнаруживает изменения в заполнении контейнеров: cover, contain, fill и настройки object-position.
25 тест-кейсов
Изображения и SVG
Изображения и векторная графика несут существенную часть визуальной идентичности сайта: фотографии товаров, иллюстрации, иконки, логотипы, бизнес-схемы в дашборде. Регрессия в этой категории может принимать форму сломанной иконки на месте фото, растянутого баннера с искажёнными лицами, логотипа с изменённым цветом после правки CSS-фильтра или SVG с искажённым путём после автоматической оптимизации сборки. Бизнес-эффект прямой: посетитель не купит товар, который не видит, оператор не интерпретирует график с изменёнными пропорциями, а сайт со сломанными ассетами мгновенно теряет доверие. Типичные причины — реорганизация дерева ассетов, ломающая часть путей, правило max-width, изменённое для частного случая и распространившееся на все изображения, изменение пропорций контейнера, растягивающее визуалы, или подгонка object-fit ради одной задачи, ухудшающая кадрирование в других местах. Глобально применённые CSS-фильтры и плохо скоординированные clip-path добавляют сложности, трудно предсказуемой заранее. Delta-QA сравнивает полные эталонные скриншоты страниц, содержащих эти визуалы, на страницах товаров e-commerce и в любых компонентах с изображениями, и сигнализирует зоны с изменившимся рендерингом: сломанные иконки, переполнения, искажения, изменения фильтра, искажённые SVG-пути. Визуальный отчёт точно локализует каждое затронутое изображение, что избавляет команду QA от ручного обхода каждой карточки товара, каждой редакторской страницы и каждого компонента ради проверки того, что ассеты грузятся и отображаются корректно после каждого выпуска, и закрывает целый класс визуальной регрессии через визуальное тестирование.
Что мы обнаруживаем
2
CSS-фильтры
Мониторит фильтры blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia и drop-shadow.
3
Модификации SVG
Фиксирует изменения SVG-путей, модификации цветов fill/stroke и настройки viewBox.
4
Изменения clip-path
Обнаруживает модификации форм clip-path с функциями circle(), ellipse(), polygon() и inset().
5
Фоновые изображения
Отслеживает изменения background-image, background-size, background-position и background-repeat.
Живой пример
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
До
После
Реальные сценарии
🎯
Изображение товара, которое не загружается
Разработчик реорганизует структуру файлов ассетов и ломает путь к некоторым изображениям товаров. Браузер показывает иконку битого изображения или альтернативный текст вместо фотографии. Клиенты видят «photo-produit-123.jpg» вместо товара — никто не покупает то, что не может увидеть. Рефакторинг касался структуры файлов, а не кода — никто не перепроверил карточки товаров визуально. Delta-QA сравнивает скриншоты и мгновенно обнаруживает иконку битого изображения вместо фотографии.
⚠️
Изображение, которое вылезает за границы
Разработчик меняет правило max-width для частного случая, и через каскад CSS все изображения сайта теряют ограничение размера. Изображение шириной 2000px выходит за пределы контейнера, появляется горизонтальная полоса прокрутки — вёрстка сломана, особенно на мобильном. Разработчик протестировал свой частный случай, но не 15 других шаблонов, использующих то же правило. Delta-QA сравнивает скриншоты и выделяет вылезающее изображение и появившуюся горизонтальную полосу прокрутки.
💡
Пропорции, которые меняются
Разработчик меняет размеры контейнера баннера на главной, и соотношение сторон изображения переходит с 16:9 на 4:3. Изображение растянуто: лица деформированы, логотип сплющен — посетители видят любительскую картинку вместо аккуратного баннера. Это изменение контейнера, а не изображения — разработчик не подумал проверить визуальный результат. Delta-QA сравнивает скриншоты и выделяет деформацию — искажённые пропорции чётко видны в diff.
Готовы ловить каждую визуальную регрессию?
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.