1
Стилизация полей ввода
Обнаруживает изменения внешнего вида input: рамки, фоны, отступы и свойства шрифта.
35 тест-кейсов
Формы и Состояния
Элементы форм — критические точки взаимодействия. Сломанное состояние валидации или отсутствующий индикатор фокуса могут привести к ошибкам ввода. Delta-QA мониторит каждое визуальное состояние форм.
Что мы обнаруживаем
2
Чекбоксы и радиокнопки
Мониторит пользовательскую стилизацию чекбоксов и радиокнопок, включая состояния отмечено/неотмечено.
3
Состояния валидации
Фиксирует изменения стилей псевдоклассов :valid, :invalid, :required и отображение ошибок.
4
Индикаторы фокуса
Отслеживает изменения стилей :focus и :focus-visible, критичные для доступности с клавиатуры.
5
Стилизация placeholder
Обнаруживает изменения псевдоэлемента ::placeholder по цвету, прозрачности и свойствам шрифта.
6
Состояния кнопок
Мониторит состояния hover, active, disabled и default кнопок для визуальной согласованности.
Живой пример
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
До
После
Реальные сценарии
🎯
Плейсхолдер, который скрывает ошибку
Разработчик меняет глобальные стили текстов-подсказок, и побочным эффектом сообщения об ошибках формы регистрации становятся светло-серыми вместо красных. Посетители вводят невалидный email, видят текст под полем... который не могут прочитать, потому что он светло-серый на белом фоне. Они решают, что сайт сломан, и уходят. Ни у кого нет времени проверять каждое состояние ошибки каждой формы при каждом деплое. Delta-QA сравнивает скриншоты и выделяет изменение цвета сообщения — ставший почти невидимым текст виден в diff.
⚠️
Поле поиска, которое сужается
Разработчик меняет CSS-сетку шапки, чтобы добавить новую ссылку навигации. Строка поиска сжимается вдвое, освобождая место. На мобильном она становится крошечной — непригодной для использования. Посетители не могут найти товары, потому что вводить запрос в такое узкое поле мучительно. Разработчик проверил, что новая ссылка отображается, но не заметил, что рядом сжалось поле поиска. Delta-QA сравнивает скриншоты и выделяет сужение строки поиска — изменение размера чётко видно при наложении.
💡
Невидимый фокус
Разработчик добавляет outline: none на поля ввода «для более чистого вида». Визуально при клике в поле больше ничего не указывает, какое поле активно — синий контур исчез. Это ещё и нарушение доступности WCAG. Проверять вручную состояние фокуса каждого поля каждой формы нереально. Delta-QA делает скриншоты полей в состоянии фокуса и сравнивает: исчезновение синего контура сразу видно в визуальном diff.
Готовы ловить каждую визуальную регрессию?
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.