Как тестировал radio button на проекте

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

В моей практике тестирование radio button (кнопок выбора) всегда является многоуровневым процессом, который выходит за рамки простой проверки клика. Я рассматривал их как критический элемент UX и функциональности форм, влияющий на логику всего приложения.

Стратегия тестирования и основные проверки

Мой подход всегда начинался с анализа спецификации, чтобы понять ожидаемое поведение группы радио-кнопок: должна быть выбрана одна по умолчанию? Можно ли очистить выбор? Влияет ли выбор на другие поля или данные на странице?

Основные тестовые проверки включали:

• Функциональность и базовое поведение:

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

• Визуальное состояние и UX:

    *   Проверка соответствия визуального состояния (`checked`, `disabled`, `focused`) с логическим состоянием элемента.
    *   Контроль доступности: корректная работа через клавиши клавиатуры (Tab для фокуса, стрелки для выбора внутри группы).
    *   Адаптивная верстка: правильное отображение и расположение на разных разрешениях и устройствах.
    *   Согласованность с **стандартами WCAG** (например, наличие связанных `<label>` с правильным `for` атрибутом, доступность для screen readers).

• Интеграция и логика данных:

    *   Проверка, что выбранное значение корректно передается на сервер (обычно через проверку отправляемого `POST` запроса или состояния модели в клиентском приложении).
    *   Тестирование связанной логики: например, если выбор "Доставка" скрывает поле "Адрес пункта выдачи".
    *   Валидация на стороне клиента и сервера: если выбор обязателен, проверка реакции системы на попытку отправки без выбранного варианта.

Примеры ручного и автоматизированного тестирования

Для ручного тестирования я часто использовал инструменты разработчика браузера. Например, чтобы проверить отправляемое значение:

<!-- Пример группы радио-кнопок в форме -->
<form id="deliveryForm">
    <input type="radio" id="courier" name="delivery" value="courier" checked>
    <label for="courier">Курьер</label>
    <input type="radio" id="pickup" name="delivery" value="pickup">
    <label for="pickup">Пункт выдачи</label>
</form>

Я проверял, что при выборе "pickup" и отправке формы в данных запроса присутствует delivery=pickup.

Для автоматизации (например, с использованием Selenium WebDriver или Playwright) я создавал стабильные методы:

# Пример кода на Python с Playwright для проверки выбора и состояния
def test_radio_button_group(page):
    # Переход на страницу с формой
    page.goto("https://example.com/form")
    
    # Локатор группы радио-кнопок с общим name атрибутом
    courier_radio = page.locator("input[value='courier']")
    pickup_radio = page.locator("input[value='pickup']")
    
    # Проверка начального состояния
    assert courier_radio.is_checked()
    assert not pickup_radio.is_checked()
    
    # Изменение выбора и проверка нового состояния
    pickup_radio.click()
    assert not courier_radio.is_checked()
    assert pickup_radio.is_checked()
    
    # Проверка, что значение правильно связано с моделью (в примере с JS)
    selected_value = page.evaluate("document.querySelector('input[name=\"delivery\"]:checked').value")
    assert selected_value == "pickup"

Нестандартные кейсы и выводы

Особое внимание уделялось нестандартным ситуациям:

• Динамические группы: когда варианты добавляются/удаляются AJAX-запросом.
• Состояние disabled: проверка, что элемент нельзя выбрать, и он стилизован соответствующим образом.
• Взаимодействие с JavaScript frameworks (React, Vue): проверка, что состояние синхронизировано между DOM и моделью данных фреймворка.

Я всегда документировал найденные дефекты с четким указанием шагов, ожидаемого и фактического результата, часто сопровождая их скриншотами или видео. Тестирование радио button, как и любого другого элемента, — это не просто задача "проверить клик", а комплексная проверка его функциональности, интеграции, доступности и пользовательского восприятия, что напрямую влияет на качество конечного продукта.