1
Object-fit и позиция
Обнаруживает изменения в заполнении контейнеров: cover, contain, fill и настройки object-position.
25 тест-кейсов
Изображения и SVG
Изображения и векторная графика занимают центральное место в современном веб-дизайне. Сломанный фильтр или изменённый SVG-путь могут кардинально изменить визуальную идентичность. Delta-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-изменения на ваших веб-страницах — без кода.