W Softverno Wiki
День 1–2 · Погружение

UI-элементы и состояния

Интерактивный каталог: как выглядит элемент, как он называется и для чего используется. Покликайте — так проще запомнить, что именно проверять глазами.

← Мини-план погружения

Toggle / Switch

Используется для переключения состояний вкл/выкл. Проверяйте on, off, disabled и мгновенное применение настройки.

Button

Запускает действие. Важны состояния: default, hover, focus, disabled, loading; не должно быть двойного клика в loading.

Checkbox

Множественный выбор независимых опций. Состояния: unchecked, checked, indeterminate, disabled.

Radio

Выбор одного варианта из группы. Проверяйте, что активен только один и disabled недоступен.

Text Input

Ввод текста. Смотрите placeholder, focus, error, disabled, maxlength и валидацию.

Textarea

Многострочный ввод. Проверяйте перенос строк, скролл, лимит символов и пустое/заполненное состояния.

Select / Dropdown

Выбор значения из списка. Проверяйте открытие, выбранный пункт, пустой список и disabled.

Обычная ссылка Visited Disabled link

Link

Переход на другую страницу или якорь. Отличается от кнопки: ведёт куда-то, а не запускает действие на месте.

New Passed Flaky Failed

Badge / Tag / Chip

Короткая метка статуса или категории. Важно соответствие цвета и смысла, а также читаемость текста.

Краткое описание тикета.

Tabs

Переключение между разделами одного экрана. Активная вкладка должна быть очевидна, контент — соответствовать ей.

Что проверять в UI?

Видимость, состояния, тексты, доступность клика и поведение после действия.

Когда писать баг?

Когда фактический результат отличается от ожидаемого и это воспроизводится.

Accordion / Disclosure

Скрывает и раскрывает блоки контента. Проверяйте open/closed и одновременное открытие нескольких секций.

Modal / Dialog

Оверлей поверх страницы для важного действия. Проверяйте open/close, клик по фону, Escape и фокус внутри окна.

Tooltip

Короткая подсказка по hover/focus. Не должна перекрывать важный контент и не заменять обязательные лейблы.

Загрузка файлов: 65%

Progress Bar

Показывает ход длительной операции. Смотрите 0%, промежуточные значения, 100% и indeterminate.

Идёт загрузка…

Spinner / Loader

Индикатор ожидания без точного процента. Не должен «висеть» бесконечно без ошибки или таймаута.

Slider / Range

Выбор значения на шкале. Проверяйте min/max, шаг, отображение текущего значения и клавиатуру.

Успех: тикет создан
Внимание: стенд нестабилен
Ошибка: не удалось сохранить

Alert / Banner / Toast

Сообщает о результате действия. Важно: тип (success/error), закрытие, автоскрытие и доступность для скринридеров.

Skeleton

Плейсхолдер вместо контента во время загрузки. Проверяйте, что после ответа API скелетон исчезает.

Ничего не найдено Измените фильтры или создайте первый тикет

Empty State

Экран без данных. Должен объяснять ситуацию и давать следующий шаг, а не выглядеть как «сломанная» страница.

Pagination

Навигация по страницам списка. Проверяйте первую/последнюю, disabled стрелок и сохранение фильтров.

Breadcrumbs

Показывает путь в иерархии. Текущая страница не должна быть активной ссылкой на саму себя.

PM

Avatar

Иконка пользователя. Проверяйте инициалы, изображение, fallback и корректный alt/aria-label.

File Upload

Загрузка вложений. Важны формат, размер, прогресс, ошибка и возможность удалить файл.