Визуальное регрессионное тестирование: снимки компонентов

Прямой ответ

Визуальная проверка сравнивает снимок компонента с эталоном, поэтому незапланированное изменение отображения обнаруживается до выпуска версии.

снимок -> сравнение с эталоном -> расхождение -> разбор

Расхождение требует разбора: изменение либо подтверждается как запланированное, либо исправляется. О примерах состояний — в статье про Storybook.

Эталонный снимок и состав состояний

Эталон задаёт ожидаемое отображение, поэтому каждое проверяемое состояние имеет собственный эталон.

Эталон на состояние. Каждое состояние компонента сравнивается с собственным эталоном, поэтому расхождение обнаруживается для конкретного состояния.

Состав состояний. Проверяются состояния, описанные примерами, поэтому состояние без примера не сравнивается и не проверяется.

Обновление эталона. Эталон обновляется при запланированном изменении, поэтому подтверждение изменения фиксируется явно.

Практическое следствие: состояние без примера не участвует в сравнении, поэтому изменение его отображения обнаруживается только после применения в продукте.

Отдельный аспект — состав эталонов по темам. Компонент, отображаемый в нескольких темах, требует эталона для каждой темы, поэтому расхождение в одной теме не скрывается совпадением в другой.

Допуск отличий и нестабильные области

Допуск определяет порог расхождения, поэтому незначительное отличие не считается нарушением, а существенное — обнаруживается.

Порог расхождения. Задаётся для сравнения, поэтому отличие в пределах порога не приводит к ошибке.

Нестабильная область. Часть снимка с меняющимся содержимым исключается из сравнения, поэтому изменение значения не считается расхождением отображения.

Изменение шрифта. Отображение текста зависит от набора шрифтов среды, поэтому сравнение выполняется в одинаковой среде.

Практическое следствие: сравнение в разной среде даёт расхождение по отображению шрифта, поэтому каждое сравнение сообщает об отличии, не связанном с изменением компонента.

Разбор расхождения и обновление эталона

Расхождение требует решения: изменение подтверждается либо исправляется, поэтому обновление эталона не выполняется автоматически.

Подтверждение изменения. Запланированное изменение фиксируется обновлением эталона, поэтому последующие сравнения выполняются с новым ожиданием.

Отклонение изменения. Незапланированное расхождение исправляется в коде, поэтому эталон сохраняет прежнее ожидание.

Причина расхождения. Определяется до обновления эталона, поэтому случайное изменение не фиксируется как ожидаемое.

Практическое следствие: автоматическое обновление эталонов при каждом расхождении отключает проверку, поскольку любое изменение подтверждается без разбора.

О значениях внешнего вида — в статье про темизацию интерфейса; о структуре системы — в статье про дизайн‑систему.

Состав проверки при изменении библиотеки

Состав снимков обновляется при изменении библиотеки, поэтому новое состояние компонента участвует в сравнении.

Новый компонент. Добавление компонента сопровождается эталоном, поэтому расхождение обнаруживается с первой версии.

Новое состояние. Добавление состояния сопровождается эталоном, поэтому изменение отображения состояния проверяется отдельно.

Изменение темы. Добавление темы сопровождается эталонами для каждого состояния, поэтому расхождение в новой теме обнаруживается.

Практическое следствие: компонент без эталона не участвует в сравнении, поэтому изменение его отображения обнаруживается только после применения в продукте.

Практика: настройка визуальной проверки

1. Создайте эталон для каждого описанного состояния. Расхождение обнаруживается для конкретного состояния.

2. Добавьте примеры для непроверенных состояний. Состояние без примера не участвует в сравнении.

3. Задайте порог допустимого расхождения. Незначительное отличие не приводит к ошибке.

4. Исключите области с меняющимся содержимым. Изменение значения не считается расхождением отображения.

5. Выполняйте сравнение в одинаковой среде. Отличие по отображению шрифта не возникает.

6. Создайте эталоны для каждой темы. Расхождение в одной теме не скрывается совпадением в другой.

7. Разбирайте каждое расхождение до обновления эталона. Случайное изменение не фиксируется как ожидаемое.

Рекомендации:

1. Не обновляйте эталоны автоматически. Любое изменение подтверждается без разбора, поэтому проверка отключается.
2. Не сравнивайте снимки, сделанные в разной среде. Отличие по шрифту возникает без изменения компонента.
3. Не оставляйте состояния без примеров. Изменение отображения непроверенного состояния обнаруживается после применения.
4. Фиксируйте причину расхождения при обновлении эталона. Подтверждение изменения обосновывается.
5. Пересматриваем состав эталонов при добавлении темы. Новая тема требует эталона для каждого состояния.

Практический сценарий: проверка сообщала об отличии при каждом запуске

Контекст: визуальная проверка сообщала о расхождении при каждом запуске, хотя компонент не изменялся, и команда перестала обращать внимание на результат.

1. Диагностика. Сравнение показало, что расхождение касалось области с датой и отображения текста. Дата изменялась при каждом запуске, а текст отображался разным шрифтом, поскольку сравнение выполнялось в среде с другим набором шрифтов.
2. Причина. Область с меняющимся содержимым не была исключена из сравнения, а снимки создавались в разной среде, поэтому расхождение возникало без изменения компонента.
3. Действия. (а) Исключили область с датой из сравнения, чтобы изменение значения не считалось расхождением отображения; (б) зафиксировали среду создания снимков, чтобы набор шрифтов совпадал между запусками; (в) задали порог допустимого расхождения, чтобы незначительное отличие не приводило к ошибке; (г) обновили эталоны после разбора каждого расхождения, чтобы подтверждённые изменения были зафиксированы; (д) установили правило разбора расхождения перед обновлением эталона, чтобы случайное изменение не фиксировалось как ожидаемое.
4. Результат. Проверка сообщает о расхождении только при изменении отображения компонента, поэтому результат проверки отражает реальное изменение.

Вывод: расхождение без изменения компонента возникает из‑за меняющегося содержимого и разной среды создания снимков. Исключение нестабильных областей, фиксация среды и порог расхождения делают результат проверки значимым, а разбор перед обновлением эталона сохраняет назначение проверки.

FAQ

Что такое эталонный снимок? Изображение ожидаемого отображения состояния компонента. Сравнение выполняется с эталоном для каждого состояния.

Почему проверка сообщает об отличии без изменения компонента? Область с меняющимся содержимым не исключена либо снимки созданы в разной среде. Отображение шрифта зависит от набора шрифтов.

Нужны ли отдельные эталоны для тем? Да. Расхождение в одной теме не обнаруживается, если эталон создан только для другой.

Можно ли обновлять эталоны автоматически? Нет. Любое изменение подтверждается без разбора, поэтому проверка перестаёт обнаруживать незапланированные изменения.

Источники: Storybook Test, Jest Snapshot Testing, W3C PNG — ссылки в шапке.