Визуальная регрессия интерфейса — это задача управления качеством решения: обнаруживать непреднамеренные изменения внешнего вида и состояния компонентов после обновлений. Артефакт «набор эталонных визуальных состояний» связывает задачу и ограничение. Результат темы «визуальная регрессия интерфейса» оценивают отдельно. Рабочий результат темы «визуальная регрессия интерфейса» — «набор эталонных визуальных состояний». Требования и рекомендации хранятся раздельно.
Проверяемые основания
В контексте темы «визуальная регрессия интерфейса» Storybook Visual Tests сравнивает снимки историй с последними подтверждёнными эталонами интерфейса. основание
В контексте темы «визуальная регрессия интерфейса» Playwright поддерживает сравнение скриншотов с эталонными файлами и сообщает о визуальных различиях. основание
В контексте темы «визуальная регрессия интерфейса» Storybook разделяет визуальные, компонентные и другие проверки, поскольку они отвечают на разные вопросы качества. основание
В контексте темы «визуальная регрессия интерфейса» W3C Markup Validation Service проверяет корректность разметки, но не заменяет визуальное и сценарное тестирование. основание
Источники задают границы для «набор эталонных визуальных состояний». Порядок темы «визуальная регрессия интерфейса» остаётся редакционной схемой.
Рабочая модель
Эталоны. Компонент «Эталоны» темы «визуальная регрессия интерфейса» охватывает подтверждённые изображения поддерживаемых состояний. В артефакте «набор эталонных визуальных состояний» добавляют контрпример. Границу «Эталоны» не оставляют подразумеваемой.
Сценарии. Часть «Сценарии» для темы «визуальная регрессия интерфейса» фиксирует варианты данных, ошибок, загрузки и прав доступа. Артефакт «набор эталонных визуальных состояний» связывает её с переходом. Ошибку блока «Сценарии» описывают конкретно.
Среда. При разборе темы «визуальная регрессия интерфейса» раздел «Среда» включает браузер, шрифты, viewport и предсказуемые ресурсы. Проверку проводят на продукте. В артефакте «набор эталонных визуальных состояний» сохраняют открытый вопрос по «Среда».
Стабилизация. Для темы «визуальная регрессия интерфейса» элемент «Стабилизация» означает заморозка времени, анимаций и случайных данных. Артефакт «набор эталонных визуальных состояний» связывает его с реальным состоянием. Риск блока «Стабилизация» получает владельца.
Порог. В артефакте «набор эталонных визуальных состояний» блок «Порог» описывает правила сравнения и допустимые различия. Тема «визуальная регрессия интерфейса» требует примера в пользовательском пути. Вывод по «Порог» проверяют отдельно.
Разбор. Компонент «Разбор» темы «визуальная регрессия интерфейса» охватывает классификация ожидаемого изменения и дефекта. В артефакте «набор эталонных визуальных состояний» добавляют контрпример. Границу «Разбор» не оставляют подразумеваемой.
Порядок работы
1. Выбрать критические компоненты и страницы. В артефакте «набор эталонных визуальных состояний» действие 1 формулируют так: выбрать критические компоненты и страницы. Проверка относится к теме «визуальная регрессия интерфейса». Риск остаётся видимым.
2. Создать истории с детерминированными данными. Шаг 2 для темы «визуальная регрессия интерфейса» — создать истории с детерминированными данными. Команда обновляет «набор эталонных визуальных состояний». Ссылка на макет не заменяет критерий.
3. Зафиксировать несколько viewport и тем. В теме «визуальная регрессия интерфейса» шаг 3 требует зафиксировать несколько viewport и тем. Изменение «набор эталонных визуальных состояний» подтверждают примером. Неизвестное условие получает владельца.
4. Подключить снимки к проверке изменений. Для «набор эталонных визуальных состояний» шаг 4 означает: подключить снимки к проверке изменений. Его применяют к теме «визуальная регрессия интерфейса». Расхождение записывают отдельно.
5. Разбирать различия человеком. Этап 5 темы «визуальная регрессия интерфейса» предполагает разбирать различия человеком. Результат в артефакте «набор эталонных визуальных состояний» сверяют с задачей. Ограничение помечают явно.
6. Обновлять эталон только вместе с основанием. В артефакте «набор эталонных визуальных состояний» действие 6 формулируют так: обновлять эталон только вместе с основанием. Проверка относится к теме «визуальная регрессия интерфейса». Риск остаётся видимым.
Переход к примеру для «набор эталонных визуальных состояний» фиксируют отдельной проверкой темы «визуальная регрессия интерфейса».
Практический пример
Редакционный пример для «набор эталонных визуальных состояний» в теме «визуальная регрессия интерфейса»: После обновления токена отступа карточки стали выше на всех экранах, но изменение заметили только в конце спринта. Команда добавила истории для карточек с коротким, длинным и отсутствующим описанием. Следующее изменение токена сразу показало затронутые состояния в pull request.
Пример темы «визуальная регрессия интерфейса» показывает роль «набор эталонных визуальных состояний». Для «набор эталонных визуальных состояний» перенос вывода требует нового основания.
Разбор «набор эталонных визуальных состояний» начинается с элемента «Эталоны»: команда уточняет подтверждённые изображения поддерживаемых состояний. Затем элемент «Сценарии» сопоставляют с условием «варианты данных, ошибок, загрузки и прав доступа». Эти записи разделяют.
Следующим действием становится «создать истории с детерминированными данными». Его результат проверяют критерием «среда воспроизводима в локальном запуске и CI». Ошибка «делать снимок только главной страницы» рассматривается как отдельный риск темы «визуальная регрессия интерфейса», а ограничение «пиксельное сравнение чувствительно к шрифтам и рендерингу» остаётся видимым в итоговом решении. Для «набор эталонных визуальных состояний» это сохраняет проверяемость после реализации.
Для «набор эталонных визуальных состояний» дополнительно проверяют блок «Стабилизация». Его связывают с действием «подключить снимки к проверке изменений» и критерием «ожидаемые изменения связаны с задачей». Эта запись отделяет ожидаемое обновление эталона от случайного визуального дефекта.
Контрольные вопросы
- Для темы «визуальная регрессия интерфейса» какой пользовательский риск уменьшается? В артефакте «набор эталонных визуальных состояний» ответ связывают со сценарием «визуальная регрессия интерфейса». Непроверенное мнение помечают.
- В артефакте «набор эталонных визуальных состояний» какие части подтверждены наблюдением? В артефакте «набор эталонных визуальных состояний» ответ связывают со сценарием «визуальная регрессия интерфейса». Непроверенное мнение помечают.
- Для решения «визуальная регрессия интерфейса» какое событие требует пересмотра? В артефакте «набор эталонных визуальных состояний» ответ связывают со сценарием «визуальная регрессия интерфейса». Непроверенное мнение помечают.
- В артефакте «набор эталонных визуальных состояний» кто проверяет результат после разработки? В артефакте «набор эталонных визуальных состояний» ответ связывают со сценарием «визуальная регрессия интерфейса». Непроверенное мнение помечают.
Типовые ошибки
- Делать снимок только главной страницы. Тема «визуальная регрессия интерфейса»: ошибка затрагивает «Сценарии». В артефакте «набор эталонных визуальных состояний» хранят последствие и исправление.
- Обновлять все эталоны одной кнопкой без просмотра. Тема «визуальная регрессия интерфейса»: ошибка затрагивает «Среда». В артефакте «набор эталонных визуальных состояний» хранят последствие и исправление.
- Сравнивать нестабильные данные и анимации. Тема «визуальная регрессия интерфейса»: ошибка затрагивает «Стабилизация». В артефакте «набор эталонных визуальных состояний» хранят последствие и исправление.
- Игнорировать текстовые и локализованные варианты. Тема «визуальная регрессия интерфейса»: ошибка затрагивает «Порог». В артефакте «набор эталонных визуальных состояний» хранят последствие и исправление.
- Считать визуальный тест заменой функционального. Тема «визуальная регрессия интерфейса»: ошибка затрагивает «Разбор». В артефакте «набор эталонных визуальных состояний» хранят последствие и исправление.
Критерии качества
- Эталоны покрывают значимые состояния. Тема «визуальная регрессия интерфейса»: проверка следует за шагом «выбрать критические компоненты и страницы». Результат сохраняют в артефакте «набор эталонных визуальных состояний».
- Среда воспроизводима в локальном запуске и ci. Тема «визуальная регрессия интерфейса»: проверка следует за шагом «создать истории с детерминированными данными». Результат сохраняют в артефакте «набор эталонных визуальных состояний».
- Каждое изменение изображения просматривается. Тема «визуальная регрессия интерфейса»: проверка следует за шагом «зафиксировать несколько viewport и тем». Результат сохраняют в артефакте «набор эталонных визуальных состояний».
- Ожидаемые изменения связаны с задачей. Тема «визуальная регрессия интерфейса»: проверка следует за шагом «подключить снимки к проверке изменений». Результат сохраняют в артефакте «набор эталонных визуальных состояний».
- Ложные срабатывания остаются редкими. Тема «визуальная регрессия интерфейса»: проверка следует за шагом «разбирать различия человеком». Результат сохраняют в артефакте «набор эталонных визуальных состояний».
- Функциональные и доступностные тесты выполняются отдельно. Тема «визуальная регрессия интерфейса»: проверка следует за шагом «обновлять эталон только вместе с основанием». Результат сохраняют в артефакте «набор эталонных визуальных состояний».
Ограничения применимости
- Пиксельное сравнение чувствительно к шрифтам и рендерингу. Тема «визуальная регрессия интерфейса» ограничена этим условием. В артефакте «набор эталонных визуальных состояний» перепроверяют блок «Эталоны».
- Скриншот не проверяет семантику и клавиатуру. Тема «визуальная регрессия интерфейса» ограничена этим условием. В артефакте «набор эталонных визуальных состояний» перепроверяют блок «Сценарии».
- Динамический контент требует стабилизации. Тема «визуальная регрессия интерфейса» ограничена этим условием. В артефакте «набор эталонных визуальных состояний» перепроверяют блок «Среда».
- Большой набор эталонов увеличивает стоимость обзора. Тема «визуальная регрессия интерфейса» ограничена этим условием. В артефакте «набор эталонных визуальных состояний» перепроверяют блок «Стабилизация».
- Часть визуальных дефектов проявляется только на устройствах. Тема «визуальная регрессия интерфейса» ограничена этим условием. В артефакте «набор эталонных визуальных состояний» перепроверяют блок «Порог».
Вывод
Тема «визуальная регрессия интерфейса» использует «набор эталонных визуальных состояний». Стартовый блок — «Эталоны». Первое действие: «выбрать критические компоненты и страницы». Результат принимают по критерию «эталоны покрывают значимые состояния». Ограничение «пиксельное сравнение чувствительно к шрифтам и рендерингу» сохраняют явно.
