Заполнение простых форм

Для работы с Cypress необходим Node.js версии 14 и выше. Установка выполняется через npm:

npm install cypress --save-dev

После установки Cypress добавляется в node_modules/.bin/cypress. Для инициализации проекта используется команда:

npx cypress open

Она создаёт структуру папок cypress/ и cypress.config.js, а также создаёт пример тестов в cypress/e2e.

Структура теста

Тест Cypress строится на использовании функций describe и it:

describe('Заполнение формы', () => {
    it('Проверка ввода данных в текстовые поля', () => {
        // шаги теста
    });
});

describe — логическая группировка тестов.
it — отдельный тестовый сценарий.

Для выполнения действий над элементами используются команды Cypress, начиная с cy.

Навигация к странице формы

Перед заполнением формы необходимо открыть страницу:

cy.visit('https://example.com/form');

Команда cy.visit() полностью загружает страницу и ждёт завершения всех сетевых запросов.

Поиск элементов формы

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

По селектору CSS:

cy.get('input[name="username"]')

По тексту элемента:

cy.contains('Submit')

Комбинированные селекторы:

cy.get('form#login input[type="password"]')

Использование уникальных атрибутов (id, name, data-*) повышает стабильность тестов.

Заполнение текстовых полей

Для ввода текста используется команда type:

cy.get('input[name="username"]').type('admin');
cy.get('input[name="password"]').type('12345');

type имитирует ввод с клавиатуры.
Можно использовать {enter}, {backspace} для эмуляции специальных клавиш:

cy.get('input[name="search"]').type('Cypress{enter}');

Работа с флажками и переключателями

Флажки (checkbox) и радиокнопки (radio) обрабатываются командами check и uncheck:

cy.get('input[type="checkbox"][name="subscribe"]').check();
cy.get('input[type="radio"][name="gender"][value="male"]').check();

check() устанавливает флажок или выбирает радиокнопку.
uncheck() снимает флажок (для радио не применимо).

Выпадающие списки

Для выбора значения из <select> используется команда select:

cy.get('select[name="country"]').select('Russia');

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

Проверка значений полей

Для подтверждения правильности ввода применяются команды should и expect:

cy.get('input[name="username"]').should('have.value', 'admin');
cy.get('input[type="checkbox"][name="subscribe"]').should('be.checked');

have.value — проверяет текстовое значение.
be.checked / not.be.checked — проверяет состояние флажка.
be.visible — проверяет видимость элемента.

Работа с кнопками и отправкой форм

Для нажатия кнопок используется команда click:

cy.get('button[type="submit"]').click();

click() имитирует клик мышью.
После отправки формы полезно проверять изменение URL или появление сообщений:

cy.url().should('include', '/success');
cy.contains('Спасибо за регистрацию').should('be.visible');

Асинхронность и ожидания

Cypress автоматически ждёт появления элементов до 4 секунд по умолчанию. Для явного ожидания используются команды should и then:

cy.get('input[name="username"]').should('be.visible').type('admin');
cy.get('.loading').should('not.exist');

Автоматическое ожидание упрощает работу с динамическим контентом.
Не рекомендуется использовать cy.wait() без необходимости.

Организация тестов для форм

Каждое поле стоит проверять отдельным тестом или логической группой it.
Общие действия (открытие страницы, авторизация) выносятся в before или beforeEach:

beforeEach(() => {
    cy.visit('https://example.com/form');
});

Повторяющийся код можно оформить в пользовательские команды (Cypress.Commands.add) для повышения читаемости.

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

Для элементов, скрытых стилями, применяется { force: true }:

cy.get('input[type="checkbox"]').check({ force: true });

Для кастомных компонентов с нестандартными селекторами может потребоваться использование cy.get().within():

cy.get('.custom-select').within(() => {
    cy.contains('Option 1').click();
});

Cypress позволяет отлавливать ошибки сетевых запросов через cy.intercept() для контроля поведения формы:

cy.intercept('POST', '/submit', { statusCode: 200 }).as('submitForm');
cy.get('button[type="submit"]').click();
cy.wait('@submitForm').its('response.statusCode').should('eq', 200);