Работа с радио кнопками

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

Поиск радио кнопок

В Protractor элементы формы, включая радио кнопки, можно находить с помощью стандартных селекторов CSS или XPath:

// Поиск радио кнопки по атрибуту name и значению value
let genderMale = element(by.css('input[name="gender"][value="male"]'));
let genderFemale = element(by.css('input[name="gender"][value="female"]'));

// Поиск группы радио кнопок через класс
let paymentOptions = element.all(by.css('.payment-method input[type="radio"]'));

element.all() используется, когда необходимо работать со списком элементов, а не с одним.

Проверка состояния радио кнопки

Основные свойства, которые проверяются:

  • selected — выбрана ли кнопка
  • enabled — доступна ли кнопка для взаимодействия
  • displayed — видима ли кнопка на странице

Примеры:

expect(genderMale.isSelected()).toBe(false);
expect(genderMale.isEnabled()).toBe(true);
expect(genderMale.isDisplayed()).toBe(true);

isSelected() возвращает true, если радио кнопка выбрана, и false в противном случае.

Выбор радио кнопки

Для выбора используется метод click():

genderMale.click();
expect(genderMale.isSelected()).toBe(true);
expect(genderFemale.isSelected()).toBe(false);

Важно помнить, что в группе радио кнопок выбор одного элемента автоматически снимает выбор с других.

Для более динамичных форм можно использовать итерирование по коллекции:

paymentOptions.each(function(option) {
    option.click();
    expect(option.isSelected()).toBe(true);
});

Такой подход позволяет тестировать все варианты выбора внутри группы.

Работа с асинхронностью

Protractor построен на WebDriverJS, поэтому методы возвращают Promise. Использование async/await делает код более читаемым и безопасным:

async function selectGender(gender) {
    let genderButton = element(by.css(`input[name="gender"][value="${gender}"]`));
    await genderButton.click();
    expect(await genderButton.isSelected()).toBe(true);
}

await selectGender('male');

await гарантирует, что действия выполняются последовательно, а проверки состояния выполняются только после завершения клика.

Проверка наличия группы радио кнопок

Иногда необходимо убедиться, что все варианты доступны:

let colors = element.all(by.css('input[name="color"]'));
expect(await colors.count()).toBe(3); // Например, три варианта

Можно также проверить, что каждый элемент включен и видим:

for (let color of await colors) {
    expect(await color.isDisplayed()).toBe(true);
    expect(await color.isEnabled()).toBe(true);
}

Использование фильтров для выбора нужной кнопки

При большом количестве радио кнопок удобно использовать методы filter и getText (если есть связанные метки):

let colors = element.all(by.css('input[name="color"]'));
let greenButton = colors.filter(async (elem) => {
    let label = await elem.getAttribute('value');
    return label === 'green';
}).first();

await greenButton.click();
expect(await greenButton.isSelected()).toBe(true);

Такой подход позволяет работать с динамическими группами и выбирать элемент по значению атрибута.

События и проверка влияния на страницу

Выбор радио кнопки часто влияет на интерфейс — отображаются новые элементы, изменяются формы. Для проверки:

let extraOptions = element(by.id('extra-options'));

await genderFemale.click();
expect(await extraOptions.isDisplayed()).toBe(true);

В Protractor удобно использовать ExpectedConditions для ожидания изменений:

const EC = protractor.ExpectedConditions;

await genderFemale.click();
await browser.wait(EC.visibilityOf(extraOptions), 5000);
expect(await extraOptions.isDisplayed()).toBe(true);

Это предотвращает ошибки, связанные с асинхронной загрузкой элементов.

Советы по стабильности тестов

  1. Использовать уникальные селекторы: избегать поиска по тексту, если есть уникальные id или name.
  2. Проверять состояние перед кликом: убедиться, что кнопка доступна (isEnabled()).
  3. Использовать ожидания: для динамических форм применять ExpectedConditions.
  4. Работать с группами через element.all(): это упрощает проверку всех вариантов сразу.

Работа с радио кнопками в Protractor требует внимательности к селекторам, асинхронности и состоянию элементов. Правильное использование isSelected, click, element.all и ExpectedConditions обеспечивает надёжные и стабильные тесты, которые корректно проверяют формы и их поведение.

Оглавление