1
Изменения Hex и RGB
Обнаруживает изменения в шестнадцатеричных и RGB значениях, включая сокращённые обозначения и вариации альфа-канала.
40 тест-кейсов
Цвета и Темы
Цвет — одно из самых смыслово нагруженных визуальных свойств интерфейса: он несёт фирменный стиль, выделяет основные действия и формирует иерархию чтения. Если оттенок кнопки конверсии смещается на несколько пунктов, это визуальная регрессия, незаметная функциональным тестам, но мгновенно воспринимаемая Вашими посетителями как сигнал ухудшения качества. На бизнес-интерфейсах — банковских дашбордах, ERP, админ-панелях бэк-офиса — несогласованная цветовая кодировка способна даже привести к ошибкам в интерпретации данных. На практике такие регрессии возникают почти всегда в одних и тех же контекстах: переработка дизайн-системы, смена CSS-фреймворка, обновление глобальной переменной типа --brand-primary, внедрение плохо распространённого dark mode или тихая конвертация одного цветового формата в другой во время сборки. Пользовательские CSS-свойства усиливают проблему: изменение одного токена иногда влияет на десятки компонентов, разбросанных по сотням страниц, и ни один разработчик не способен удерживать в голове полную карту зависимостей. Delta-QA решает эту задачу, попиксельно сравнивая эталонные скриншоты с новыми и применяя перцептивный анализ, который терпим к шуму рендеринга, но фиксирует любое значимое отклонение оттенка. Инструмент распознаёт форматы RGB, HSL, OKLCH и современные CSS-переменные и сигнализирует как о полных сменах палитры, так и о тонких смещениях в пределах близких нюансов. Сгенерированный визуальный отчёт точно локализует затронутые зоны на каждом снимке, что позволяет команде QA провести сравнение страниц и валидировать переработку без построчного перечитывания таблиц стилей и без ручной визуальной регрессии каждой версии.
Что мы обнаруживаем
2
Вариации HSL и HSLA
Фиксирует настройки тона, насыщенности и яркости, даже когда визуальная разница незаметна для человеческого глаза.
3
Современные цветовые пространства
Поддерживает OKLCH, LCH, Lab и другие цветовые пространства широкого охвата, используемые в современных дизайн-системах.
4
CSS-переменные
Отслеживает изменения CSS-переменных (--brand-color, --bg-primary), которые каскадируются по всей дизайн-системе.
5
Переключение тёмного / светлого режима
Обнаруживает регрессии тем, когда элементы не адаптируются корректно между тёмным и светлым режимами.
6
Градиенты и альфа-каналы
Определяет изменения в линейных, радиальных и конических градиентах, а также модификации прозрачности.
Живой пример
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
До
После
Реальные сценарии
🎯
CSS-переменная, которая меняет всё
Разработчик обновляет дизайн-систему и меняет переменную --brand-primary, чтобы исправить контраст в подвале сайта. Побочный эффект: цвет всех кнопок, ссылок и заголовков сайта меняется с тёмно-синего на блёклый голубой. Кнопка «Добавить в корзину» почти сливается с белым фоном — посетители перестают замечать её с первого взгляда. QA проверил подвал (изменённую зону), но не 40 других страниц, использующих ту же переменную. Delta-QA сравнивает скриншоты до и после и выделяет изменение оттенка на каждом затронутом элементе на всех страницах.
⚠️
Тёмная тема, которая забыла про компонент
Разработчик добавляет новый блок отзывов клиентов. В светлой теме всё отлично. Но в тёмной теме блок остаётся с белым фоном и чёрным текстом — ослепительный белый прямоугольник посреди тёмной страницы. Ваши ночные посетители получают вспышку в глаза. Проверять каждый компонент вручную в каждой теме нереально, когда у вас 30 компонентов и 2 темы. Delta-QA делает скриншоты сайта в тёмной теме и сравнивает с эталоном: белый прямоугольник забытого компонента сразу виден в diff.
💡
Градиент, который исчезает
При обновлении CSS-фреймворка класс градиента переименовывается. Сборка проходит без ошибок, но градиент на главной странице исчезает — вместо него сплошной белый фон. Страница теряет глубину и фирменный стиль, выглядит как шаблон по умолчанию. Это минорное обновление фреймворка, никто не подумал перепроверить главную визуально. Delta-QA сравнивает скриншоты и обнаруживает исчезновение градиента — зона, ставшая из цветной белой, чётко видна в diff.
Готовы ловить каждую визуальную регрессию?
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.