Веб-интерфейс состоит из стандартных элементов: полей ввода, кнопок, выпадающих списков, таблиц и многого другого. Для каждого элемента есть характерные сценарии тестирования, о которых нужно помнить. В этом уроке разберём, что и как проверять для каждого типа элемента.
Поля ввода (Input Fields)
Поле ввода — один из самых распространённых и уязвимых элементов.
Что проверять
Пример теста
Валидный ввод
Ввести корректное значение, убедиться, что принято
Невалидный ввод
Буквы в числовом поле, неверный формат email
Максимальная длина
Ввести 1000 символов в поле с max=255
Минимальная длина
Ввести 1 символ в поле с min=8
Пустое поле (required)
Отправить форму без заполнения обязательного поля
Пробелы
" " (только пробелы) — принимает как заполненное?
Спецсимволы
<script>, ' OR 1=1, emoji
Placeholder
Текст-подсказка исчезает при вводе?
Кнопки (Buttons)
Что проверять
Почему важно
Enabled/Disabled состояние
Кнопка Submit заблокирована до заполнения формы?
Loading state
После клика кнопка показывает загрузку?
Двойной клик
Не создаёт два одинаковых запроса?
Клик на неактивную кнопку
Disabled кнопка не реагирует на клик?
Внешний вид при hover/focus
Есть визуальная обратная связь?
Типичный баг: двойной быстрый клик на кнопку "Оформить заказ" создаёт два заказа.
Выпадающие списки (Dropdowns/Selects)
Что проверять
Сценарий
Все опции видны
Открыть список, проверить полноту
Значение по умолчанию
Правильный дефолт при загрузке?
Скролл внутри списка
Длинный список прокручивается?
Выбор значения
Выбранное значение применяется?
Поиск/фильтр
Если есть поиск — проверь нечёткий поиск, регистр
Чекбоксы и радиокнопки
Элемент
Что проверять
Чекбокс
Состояние по умолчанию; включить/выключить; группа независимых
Радиокнопка
Только одна активна в группе; переключение между вариантами
Оба
Состояние сохраняется после submit; значение отправляется на сервер
Типичный баг: чекбокс "Согласен с условиями" не обязателен — форма отправляется без его отметки.
Модальные окна (Modals/Dialogs)
Что проверять
Детали
Открытие
По клику на кнопку открывается?
Закрытие (кнопка X)
Закрывается при клике на крестик
Закрытие по backdrop
Клик вне модала закрывает его? (зависит от требований)
Закрытие по ESC
Нажатие Escape закрывает модал?
Скролл страницы
Страница не скроллится пока открыт модал?
Стек модалов
Что если открыть модал внутри модала?
Таблицы (Tables)
Функция
Что проверять
Сортировка
Сортировка по каждому столбцу; обратная сортировка
Фильтрация
Правильные результаты; пустой результат
Пагинация
Переходы между страницами; последняя страница
Пустое состояние
Нет данных — есть сообщение "Нет результатов"?
Длинные значения
Длинный текст в ячейке не ломает layout?
Формы (Forms)
Форма — набор элементов ввода плюс кнопка submit. Чеклист тестирования:
Happy path: заполнить все поля корректно → успешная отправка
Пустая форма: нажать Submit → сообщения об ошибках на всех обязательных полях
По одному полю пустым: поочерёдно оставлять каждое поле пустым
Сообщения об ошибках: понятны ли они пользователю? Рядом с нужным полем?
Успешный результат: после отправки — что показывается? Success-сообщение? Редирект?
Сброс формы: кнопка "Очистить" или "Отмена" — работает корректно?
Доступность (Accessibility)
Что проверять
Как
Навигация с клавиатуры
Tab — переход между полями, Enter — submit
Порядок фокуса
Логичный порядок обхода элементов по Tab
ARIA-метки
Скринридеры видят кнопки с описанием (aria-label)
Контрастность
Текст читаем на фоне
Адаптивный дизайн
Размер экрана
Что проверять
Desktop (1280px+)
Полная версия
Tablet (768-1024px)
Адаптированный layout
Mobile (320-767px)
Элементы не перекрываются, кнопки касаемые
Частые ошибки понимания
❌ "Проверил happy path — форма работает" → обязательно проверяй граничные случаи и невалидный ввод
❌ "Disabled кнопка не проблема" → убедись, что пользователь понимает, почему кнопка неактивна
❌ "Модал закрывается — значит всё ок" → проверь все три способа закрытия (X, backdrop, ESC)
Что мы запомним
Каждый тип UI-элемента имеет специфические сценарии тестирования
Поля ввода: проверяй валидный, невалидный, пустой ввод, граничные значения и спецсимволы
Кнопки: двойной клик, loading state, disabled состояние
Формы: happy path + каждое поле пустым + сообщения об ошибках
Таблицы: сортировка, фильтрация, пагинация, пустое состояние
Всегда проверяй keyboard-навигацию и адаптивность на мобильном экране
Попробуйте интерактивную версию
Практические задачи, квизы и AI-наставник — бесплатный старт без карты