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

Cypress предоставляет мощный набор инструментов для автоматизации взаимодействия с элементами формы, включая чекбоксы и радиокнопки. Эти элементы HTML имеют специфические свойства, которые важно учитывать при тестировании: чекбоксы могут быть отмечены или сняты, радиокнопки — выбираются в группе по одному значению.

Выбор и снятие чекбоксов

Для работы с чекбоксами в Cypress используется команда .check() для установки флага и .uncheck() для его снятия. Эти команды автоматически проверяют текущее состояние элемента и выполняют действие только если оно необходимо, что упрощает написание устойчивых тестов.

// Отметить один чекбокс
cy.get('#subscribe').check();

// Снять отметку с чекбокса
cy.get('#subscribe').uncheck();

Можно работать с несколькими чекбоксами одновременно, используя массив значений атрибута value:

// Отметить несколько чекбоксов по значению
cy.get('input[type="checkbox"]').check(['news', 'updates']);

Важно учитывать, что .check() и .uncheck() работают только с интерактивными элементами, которые не имеют атрибута disabled. Для проверки состояния используется команда .should():

cy.get('#subscribe').should('be.checked');    // Проверка, что чекбокс отмечен
cy.get('#subscribe').should('not.be.checked'); // Проверка, что чекбокс не отмечен

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

Радиокнопки в HTML объединяются по атрибуту name. Выбор радиокнопки с помощью Cypress осуществляется через .check() с указанием значения атрибута value или через выбор конкретного элемента.

// Выбрать радиокнопку по значению
cy.get('input[name="gender"]').check('female');

// Проверить, что радиокнопка выбрана
cy.get('input[name="gender"][value="female"]').should('be.checked');

Если в группе радиокнопок выбрать другой вариант, Cypress автоматически снимает выбор с предыдущего элемента, что соответствует поведению браузера.

Взаимодействие с нестандартными чекбоксами и радиокнопками

На современных веб-сайтах часто используются стилизованные элементы, где внешний <div> заменяет стандартный <input>. В таких случаях стандартные методы .check() и .uncheck() не работают, так как Cypress не видит интерактивный input.

Для работы с ними применяются события клика:

cy.get('.custom-checkbox').click();
cy.get('.custom-radio[value="option2"]').click();

После этого рекомендуется проверить состояние через атрибуты, например aria-checked или класс:

cy.get('.custom-checkbox').should('have.attr', 'aria-checked', 'true');
cy.get('.custom-radio[value="option2"]').should('have.class', 'selected');

Ассерции и комбинированные проверки

Для надёжных тестов важно сочетать действия с проверкой состояния. Например, после выбора нескольких чекбоксов можно проверить, что именно они отмечены:

cy.get('input[type="checkbox"]').check(['news', 'updates']);
cy.get('input[value="news"]').should('be.checked');
cy.get('input[value="updates"]').should('be.checked');
cy.get('input[value="offers"]').should('not.be.checked');

Для радиокнопок проверка обычно ограничивается выбранным элементом:

cy.get('input[name="gender"]').check('male');
cy.get('input[name="gender"][value="male"]').should('be.checked');
cy.get('input[name="gender"][value="female"]').should('not.be.checked');

Обработка ошибок и нестабильных элементов

Чекбоксы и радиокнопки могут быть динамически изменяемыми, например через JavaScript или AJAX. В таких случаях используется ожидание состояния элемента:

cy.get('#subscribe', { timeout: 10000 }).should('be.visible').check();

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

Итоговые рекомендации

  • Использовать .check() и .uncheck() для стандартных input-элементов.
  • Для кастомных элементов применять .click() и проверять состояние через атрибуты или классы.
  • Проверки состояния обязательны для надёжных тестов.
  • Для динамических страниц применять таймауты и ожидания видимости.
  • Всегда группировать выбор и проверки в логическую последовательность для читаемости теста.

Такой подход обеспечивает точное и надёжное тестирование всех видов чекбоксов и радиокнопок, сохраняя соответствие поведению пользователя в браузере.

Оглавление