Стилизация полей ввода
Обнаруживает изменения внешнего вида input: рамки, фоны, отступы и свойства шрифта.
Формы концентрируют непропорционально большую часть ценности приложения: регистрация, оплата, поиск, подтверждение банковских операций, ввод тикетов в ERP. Визуальная регрессия на одном поле способна обрушить конверсию или заблокировать оператора посреди критического процесса. Риск касается не только внешнего вида поля в покое, но и его производных состояний: focus, hover, disabled, error, success, а также плейсхолдеров и сопутствующих текстов подсказки. Когда разработчик удаляет outline, чтобы «выглядело чище», задевается доступность WCAG, и клавиатурный пользователь перестаёт понимать, в каком поле он вводит. Когда меняется глобальный стиль сообщений-подсказок, ошибки валидации могут перейти с красного на светло-серый и стать нечитабельными. Классические регрессии возникают из изменения CSS-сетки, которое сжимает поисковую строку, из reset, стирающего нативные стили чекбоксов и радио, или из обновления UI-фреймворка, тонко меняющего рамки и высоту полей. Delta-QA захватывает формы в их разных состояниях и сравнивает эти эталонные скриншоты с baseline. Перцептивный анализ выделяет изменения цвета сообщений, исчезнувшие индикаторы фокуса, поля с изменившимися размерами, искажённые плейсхолдеры и состояния ошибок, более не выделяющиеся визуально. Такое покрытие через визуальное тестирование избавляет от ручной проверки каждого сценария ввода на каждой форме при каждом деплое и гарантирует, что критические пути конверсии или бизнес-операции остаются визуально согласованными между версиями, без скрытой визуальной регрессии.
Обнаруживает изменения внешнего вида input: рамки, фоны, отступы и свойства шрифта.
Мониторит пользовательскую стилизацию чекбоксов и радиокнопок, включая состояния отмечено/неотмечено.
Фиксирует изменения стилей псевдоклассов :valid, :invalid, :required и отображение ошибок.
Отслеживает изменения стилей :focus и :focus-visible, критичные для доступности с клавиатуры.
Обнаруживает изменения псевдоэлемента ::placeholder по цвету, прозрачности и свойствам шрифта.
Мониторит состояния hover, active, disabled и default кнопок для визуальной согласованности.
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
Разработчик меняет глобальные стили текстов-подсказок, и побочным эффектом сообщения об ошибках формы регистрации становятся светло-серыми вместо красных. Посетители вводят невалидный email, видят текст под полем... который не могут прочитать, потому что он светло-серый на белом фоне. Они решают, что сайт сломан, и уходят. Ни у кого нет времени проверять каждое состояние ошибки каждой формы при каждом деплое. Delta-QA сравнивает скриншоты и выделяет изменение цвета сообщения — ставший почти невидимым текст виден в diff.
Разработчик меняет CSS-сетку шапки, чтобы добавить новую ссылку навигации. Строка поиска сжимается вдвое, освобождая место. На мобильном она становится крошечной — непригодной для использования. Посетители не могут найти товары, потому что вводить запрос в такое узкое поле мучительно. Разработчик проверил, что новая ссылка отображается, но не заметил, что рядом сжалось поле поиска. Delta-QA сравнивает скриншоты и выделяет сужение строки поиска — изменение размера чётко видно при наложении.
Разработчик добавляет outline: none на поля ввода «для более чистого вида». Визуально при клике в поле больше ничего не указывает, какое поле активно — синий контур исчез. Это ещё и нарушение доступности WCAG. Проверять вручную состояние фокуса каждого поля каждой формы нереально. Delta-QA делает скриншоты полей в состоянии фокуса и сравнивает: исчезновение синего контура сразу видно в визуальном diff.
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.