Валидация форм

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

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

Каждый тест Cypress начинается с описания тестового сценария через describe и it. Для валидации формы обычно выполняются следующие шаги:

  1. Навигация к форме

    cy.visit('/login');

  2. Заполнение полей Используются команды cy.get() и type(). Для очистки поля перед вводом применяют clear().

    cy.get('input[name="username"]').clear().type('testuser');
cy.get('input[name="password"]').clear().type('password123');

  3. Отправка формы

    cy.get('form').submit();

  4. Проверка ошибок или успешного результата Для проверки отображения ошибок используется should('contain', 'текст ошибки') или should('be.visible').

    cy.get('.error-message').should('contain', 'Пароль слишком короткий');

Проверка обязательных полей

Обязательные поля формы можно тестировать путем попытки отправки формы с пустыми значениями и проверки соответствующих сообщений об ошибке.

cy.get('form').submit();
cy.get('input[name="email"]:invalid').should('exist');
cy.get('.error-message').should('contain', 'Email обязателен');

Для современных браузеров можно использовать нативные селекторы валидации HTML5: :invalid и :valid.

Валидация форм с динамическими данными

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

cy.get('input[type="checkbox"]').check();
cy.get('select[name="country"]').select('Россия');
cy.get('.state-field').should('be.visible');

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

Тестирование форм с асинхронной валидацией

Многие формы используют AJAX-запросы для проверки данных (например, проверка уникальности логина). В Cypress это делается с помощью перехвата сетевых запросов через cy.intercept().

cy.intercept('POST', '/api/check-username', { body: { available: false } });
cy.get('input[name="username"]').type('existinguser');
cy.get('.error-message').should('contain', 'Имя пользователя уже занято');

Использование cy.wait() для задержки обычно не рекомендуется; вместо этого следует ожидать появление элемента или завершение запроса через intercept.

Проверка форм с различными типами полей

Cypress позволяет тестировать все типы элементов формы:

  • Текстовые поля и пароли: type(), clear().
  • Чекбоксы и радио-кнопки: check(), uncheck().
  • Выпадающие списки (select): select().
  • Файловые инпуты: использование плагинов для attachFile().

Пример для файла:

cy.get('input[type="file"]').attachFile('example.pdf');
cy.get('.upload-success').should('contain', 'Файл загружен успешно');

Проверка форм на уровне UI и API

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

  1. Проверка отображения ошибок и корректного поведения полей на UI.
  2. Проверка правильной отправки данных и ответов сервера через cy.intercept() и cy.wait().
cy.intercept('POST', '/api/register').as('register');
cy.get('form').submit();
cy.wait('@register').its('response.statusCode').should('eq', 200);

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

Для больших форм рекомендуется разделять тесты на логические блоки:

  • Проверка обязательных полей
  • Проверка формата данных (email, пароль, телефон)
  • Асинхронная валидация (AJAX)
  • Динамическое поведение формы
  • Файловые загрузки

Использование вспомогательных функций и кастомных команд Cypress (Cypress.Commands.add) позволяет уменьшить дублирование кода и сделать тесты более читаемыми.

Cypress.Commands.add('fillLoginForm', (username, password) => {
    cy.get('input[name="username"]').clear().type(username);
    cy.get('input[name="password"]').clear().type(password);
});

Это позволяет в тестах просто вызывать:

cy.fillLoginForm('testuser', 'password123');

Проверка сообщений об ошибках и успешной валидации

Сообщения об ошибках могут быть текстовыми, всплывающими или изменять класс элементов. В Cypress их проверка осуществляется через:

  • should('contain', 'текст') — проверка текста
  • should('have.class', 'error') — проверка класса
  • should('be.visible') — проверка видимости

Комбинирование этих проверок гарантирует полное покрытие сценариев валидации формы.

Оглавление