Как протестировать три радиобаттона

Тестирование трёх радиобаттонов: комплексный подход

Тестирование радиобаттонов (radio buttons) — это проверка не только их базовой функциональности, но и связанного с ними поведения интерфейса и логики приложения. Как специалист с большим опытом, я рассматриваю это как многоуровневую задачу, охватывающую функциональное, UI/UX и интеграционное тестирование.

1. Функциональное тестирование (Core Behavior)

Это проверка фундаментальных свойств радиобаттона: возможность выбрать только один вариант из группы и корректное сохранение состояния.

• Основная логика выбора:

    *   Проверьте, что при клике на один радиобаттон он становится **выбранным** (`checked`).
    *   Убедитесь, что выбор любого другого радиобаттона в той же **группе** (объединённых атрибутом `name`) автоматически **снимает выбор** с предыдущего. Это ключевое отличие от чекбоксов.
    *   Проверьте начальное состояние: обычно ни один вариант не выбран, либо выбран один по умолчанию.

• Связь с данными и состоянием:

    *   После выбора убедитесь, что соответствующее значение (например, `value` радиобаттона) правильно передаётся в модель данных или отправляется на сервер (например, при submit формы).
    *   Проверьте, что выбор радиобаттона может изменять состояние других элементов на странице (например, показывать/скрывать дополнительные поля).

Пример простого теста на JavaScript (в консоли браузера или с помощью Selenium):

// Предположим, у нас три радиобаттона с name="option"
const radios = document.querySelectorAll('input[name="option"]');

// Тест 1: Проверка единственного выбора
radios[0].click();
console.assert(radios[0].checked === true, 'Первый радиобаттон должен быть выбран');

radios[1].click();
console.assert(radios[1].checked === true && radios[0].checked === false, 
               'Второй выбран, первый должен быть снят');

// Тест 2: Проверка получения значения
radios[2].click();
const selectedValue = document.querySelector('input[name="option"]:checked').value;
console.assert(selectedValue === radios[2].value, 'Значение должно соответствовать выбранному элементу');

2. UI/UX и визуальное тестирование

Радиобаттоны должны быть не только функциональными, но и удобными и корректными для пользователя.

• Визуальная составляющая и доступность (Accessibility):

    *   Проверьте, что выбранное состояние четко визуально отличается (например, точка внутри круга).
    *   Убедитесь, что группа радиобаттонов имеет четкую **логическую связь** с текстовым описанием (например, через `<label>` или атрибут `aria-labelledby`).
    *   Проверьте поддержку **клавиатурной навигации**: можно перемещаться между радиобаттонами с помощью `Tab`, а выбрать текущий — с помощью `Space` или `Enter`.
    *   Важно проверить **состояние фокуса** (обычно выделяется обводкой) для каждого элемента.

• Адаптивность и отображение:

    *   Проверьте корректное отображение и расположение группы на разных размерах экрана (мобильные, десктоп).
    *   Убедитесь, что текст рядом с радиобаттонами не перекрывает их и корректно обрезается при необходимости.

3. Интеграционное и сценарное тестирование

Это проверка того, как радиобаттоны работают в контексте всего приложения.

• Сценарии использования:

    *   **Смена выбора:** Проверьте полный сценарий: выбор А -> изменение данных -> выбор Б -> изменение данных -> выбор С.
    *   **Валидация формы:** Если выбор обязателен (required), попробуйте submit формы без выбранного радиобаттона и проверьте соответствующее сообщение об ошибке.
    *   **Взаимодействие с другими элементами:** Часто выбор радиобаттона динамически изменяет страницу. Например, выбор "Доставка" показывает поле адреса, а выбор "Самовывоз" — скрывает его. Это нужно проверить.

• Граничные и негативные случаи:

    *   Попробуйте "сбросить" форму (кнопка `reset`) — состояние радиобаттонов должно вернуться к первоначальному.
    *   Если состояние радиобаттона загружается из сохранённых данных (например, из API), убедитесь, что при загрузке страницы корректный вариант предварительно выбран.
    *   Проверьте поведение при двойном клике на уже выбранный радиобаттон — состояние должно остаться неизменным.

План тестирования (чек-лист)

Для системного подхода можно создать такой чек-лист:

1. Группа и имя: Все три радиобаттона имеют одинаковый атрибут name.
2. Уникальные значения: Каждый радиобаттон имеет уникальный атрибут value.
3. Единственный выбор: Активен только один радиобаттон в группе.
4. Привязка label: Каждый радиобаттон имеет связанный элемент <label> или текстовое описание.
5. Клавиатурная навигация: Фокус перемещается между элементами по Tab, выбор по Space.
6. Визуальные состояния: Четко видны состояния checked, focus, unchecked.
7. Изменение данных: Выбранное значение корректно передается в систему (в переменную, на сервер).
8. Динамическое поведение: При выборе правильно показываются/скрываются связанные элементы.
9. Валидация: Если выбор обязателен, работает соответствующая валидация формы.
10. Адаптивность: Группа корректно отображается на всех разрешениях экрана.
11. Начальное состояние: При загрузке либо ни один не выбран, либо выбран заданный по умолчанию.
12. Сброс формы: Кнопка reset возвращает выбор к начальному состоянию.

Таким образом, тестирование трёх радиобаттонов — это не просто клик по каждому, а комплексная проверка их роли как элемента управления, который влияет на данные, интерфейс и бизнес-логику вашего приложения.