Frontend testing: состояния UI

UI ломается не только из-за неправильной кнопки. Чаще проблемы появляются в состояниях: загрузка, пустой список, ошибка, медленная сеть, частичные данные, длинный текст, ограниченные права, восстановление после refresh.

Что важно понять

Loading, empty, error, partial success и retry-состояния.
Длинные строки, разные локали, переносы, масштабирование шрифта.
Фокус, keyboard navigation, disabled / readonly элементы.
Синхронизацию UI с backend после refresh, back/forward и повторного открытия.

Рабочий порядок

Перечислите состояния компонента или экрана.
Подготовьте данные для каждого состояния.
Проверьте поведение на медленной сети и при ошибках API.
Зафиксируйте проблемы в UI отдельно от проблем backend.

Что отдавать команде

State checklist для экрана.
Скриншоты визуальных дефектов с разрешением экрана.
Описание данных, которые приводят к состоянию.

Частые провалы

Проверять только заполненный экран на идеальных данных.
Не тестировать тексты длиннее макета.
Игнорировать focus states и управление с клавиатуры.

Практика

Возьмите экран списка товаров и проверьте: пусто, 1 элемент, 100 элементов, ошибка API, медленная загрузка, длинное название, нет прав на действие.