Работа с чекбоксами

Чекбоксы — один из базовых элементов веб-форм, и их корректная обработка критически важна для автоматизированного тестирования интерфейсов. В Protractor взаимодействие с чекбоксами осуществляется через объекты ElementFinder и встроенные методы управления состоянием элементов.

Поиск чекбоксов

Основные способы поиска чекбоксов:

// По CSS-селектору
let checkbox = element(by.css('input[type="checkbox"]'));

// По id
let checkboxById = element(by.id('agree'));

// По имени
let checkboxByName = element(by.name('subscription'));

// По тексту лейбла через xpath
let checkboxByLabel = element(by.xpath('//label[text()="Подписка"]/input'));

Использование element и локаторов by.css, by.id, by.name, by.xpath позволяет гибко выбирать нужный элемент. Важно помнить, что чекбокс может быть вложен в <label>, поэтому иногда удобнее искать лейбл и получать вложенный input.

Проверка состояния чекбокса

Основные методы для проверки:

// Проверка, выбран ли чекбокс
let isChecked = await checkbox.isSelected();
console.log(isChecked); // true или false

Метод isSelected() возвращает логическое значение true, если чекбокс установлен, и false, если нет. Он используется как для утверждений в тестах, так и для условий внутри сценариев.

Установка и снятие чекбоксов

Чтобы установить чекбокс, необходимо убедиться, что его текущее состояние отличается от желаемого:

// Установить чекбокс, если он ещё не выбран
if (!await checkbox.isSelected()) {
    await checkbox.click();
}

// Снять чекбокс, если он выбран
if (await checkbox.isSelected()) {
    await checkbox.click();
}

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

Работа с несколькими чекбоксами

Часто на странице присутствует группа чекбоксов. Для работы с ними применяется коллекция element.all:

let checkboxes = element.all(by.css('input[type="checkbox"]'));

// Выбрать все чекбоксы
await checkboxes.each(async (cb) => {
    if (!await cb.isSelected()) {
        await cb.click();
    }
});

// Проверка, что все чекбоксы выбраны
let states = await checkboxes.map(async (cb) => await cb.isSelected());
console.log(states); // [true, true, true, ...]

Метод each позволяет проходить по каждому элементу коллекции и выполнять действия, а map — получать массив результатов для дальнейшей проверки.

Работа с чекбоксами в динамических списках

На динамических страницах чекбоксы могут появляться после загрузки данных. В таких случаях важно использовать ожидания:

let dynamicCheckbox = element(by.css('input.dynamic-checkbox'));
let EC = protractor.ExpectedConditions;

// Ждать, пока чекбокс станет кликабельным
await browser.wait(EC.elementToBeClickable(dynamicCheckbox), 5000);
await dynamicCheckbox.click();

Использование ExpectedConditions повышает стабильность тестов и предотвращает ошибки типа ElementNotInteractableError.

Валидация состояния после действий

После изменения состояния чекбокса часто требуется проверка, что действие повлекло нужный эффект:

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

// Проверка влияния на форму
let submitButton = element(by.id('submit'));
expect(await submitButton.isEnabled()).toBe(true);

Встроенные методы isSelected() и isEnabled() позволяют строить надежные проверки состояния интерфейса после взаимодействия с элементами.

Особенности чекбоксов с кастомным оформлением

В современных интерфейсах часто используются кастомные чекбоксы, где <input type="checkbox"> скрыт, а кликабельный элемент — это <div> или <span>. В таких случаях важно:

  • Определить реальный кликабельный элемент.
  • Использовать click() на видимой части, а не на скрытом <input>.
  • Проверять состояние через getAttribute('checked') или через класс CSS, если isSelected() возвращает некорректное значение.

Пример:

let customCheckbox = element(by.css('.custom-checkbox'));
await customCheckbox.click();
let isChecked = await customCheckbox.getAttribute('class');
console.log(isChecked.includes('checked'));

Итоговые рекомендации по работе с чекбоксами

  • Всегда проверять текущее состояние перед кликом для стабильности теста.
  • Для групп чекбоксов использовать коллекции element.all.
  • На динамических страницах применять ExpectedConditions.
  • Для кастомных чекбоксов проверять состояние через CSS или атрибуты, если isSelected() не работает.

Работа с чекбоксами в Protractor строится на понимании состояния элемента, правильном выборе локаторов и использовании асинхронных ожиданий для надежного выполнения тестов.

Оглавление