Visual regression — это процесс обнаружения нежелательных изменений в визуальном представлении компонентов интерфейса. В контексте Radix UI, где компоненты создаются как низкоуровневые, доступные и настраиваемые элементы, контроль визуальной целостности особенно важен, так как небольшие изменения стилей могут нарушить пользовательский опыт и доступность.
1. Сравнение изображений: Основной метод визуальной регрессии — это скриншотное сравнение. Компоненты рендерятся в тестовом окружении, делается скриншот, который затем сравнивается с эталонным изображением. Любое несоответствие фиксируется как потенциальная ошибка.
2. Точность пикселей и толерантность: Сравнение может быть строгим (точное совпадение пикселей) или с допустимыми отклонениями (например, 0.1% различий). В Radix UI строгий подход помогает выявить мелкие изменения, влияющие на взаимодействие или доступность, но иногда достаточно относительной толерантности к незначительным визуальным артефактам.
3. Контроль состояния компонентов: Radix UI предоставляет сложные состояния компонентов: открытые и закрытые меню, фокусные состояния, выбранные элементы, disabled-статусы. Для визуальной регрессии важно фиксировать скриншоты всех ключевых состояний, иначе тесты не отразят полную картину.
Radix UI хорошо сочетается с современными инструментами для визуальной регрессии:
1. Доступность и визуальные состояния: Radix UI компоненты часто содержат focus-ring, aria-атрибуты и скрытые элементы для доступности. Тесты визуальной регрессии должны учитывать, что эти элементы могут быть невидимы на первый взгляд, но влияют на взаимодействие.
2. Адаптивность: Многие компоненты Radix UI (например, Popover, Tooltip, Dialog) автоматически подстраиваются под размеры окна. Для визуальной регрессии необходимо фиксировать размеры viewport, иначе скриншоты будут различаться даже при неизменном коде.
3. Темизация и стилизация: Radix UI предоставляет низкоуровневые компоненты без собственных стилей, что позволяет использовать любую CSS-систему. Тесты визуальной регрессии должны учитывать активные темы и кастомные стили, иначе сравнения будут некорректными.
Создание эталонных историй Для каждого компонента создается отдельная Storybook story, включающая все состояния и варианты.
Автоматическая генерация скриншотов Использование скриптов на Playwright или Chromatic для рендеринга компонентов и снятия скриншотов.
Сравнение с эталоном Скриншоты сравниваются с базой, фиксируются различия и создается отчёт о визуальных изменениях.
Обработка ложноположительных результатов Иногда изменения вызваны несовпадением шрифтов, антиалиасингом или разницей браузеров. Необходимо настроить порог чувствительности и проверять изменения вручную при необходимости.
Visual regression в сочетании с Radix UI позволяет обеспечивать стабильность интерфейсов, выявлять скрытые ошибки в стилях и гарантировать, что сложные доступные компоненты сохраняют ожидаемый внешний вид и поведение на протяжении всего жизненного цикла продукта.