Сабмит форм разными способами

В JavaScript-тестировании с использованием Cypress работа с формами — одна из наиболее частых задач. Сабмит формы может осуществляться различными способами, и выбор подхода зависит от структуры приложения, наличия обработчиков событий и требований к тесту. Рассмотрим основные подходы с примерами и разбором тонкостей.

1. Сабмит через стандартный метод .submit()

Cypress предоставляет встроенный метод .submit(), который инициирует событие сабмита формы.

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

Особенности:

  • Метод вызывает событие submit на элементе <form>.
  • Если в форме есть обработчик события onsubmit, он будет выполнен.
  • Подходит для тестирования форм с серверной валидацией и обычной отправкой.

Подводные камни:

  • Если кнопка сабмита <button type="submit"> имеет дополнительную логику через onClick, метод .submit() её не вызовет. В этом случае требуется имитация нажатия кнопки.

2. Сабмит через нажатие на кнопку

Наиболее универсальный способ — клик по кнопке отправки формы.

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

Особенности:

  • Имитируется реальное поведение пользователя.
  • Выполняются все связанные события (click, submit, кастомные обработчики onClick).
  • Подходит для форм с клиентской валидацией или SPA-приложений, где сабмит обрабатывается JavaScript.

Тонкости использования:

  • Если кнопка изначально отключена (disabled), тест упадет. Необходимо убедиться, что форма валидна и кнопка активна.
  • В SPA приложениях может понадобиться ожидание завершения асинхронной операции после клика. Например:
cy.get('button[type="submit"]').click();
cy.wait('@loginRequest'); // ожидание сетевого запроса

3. Сабмит через эмуляцию нажатия клавиши Enter

Некоторые формы допускают отправку через нажатие клавиши Enter в поле ввода.

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

Особенности:

  • Полезно для тестирования UX, когда пользователь ожидает отправку формы через Enter.
  • Метод автоматически вызывает событие сабмита формы, если фокус находится внутри поля ввода.

Ограничения:

  • Работает только в браузерах, корректно поддерживающих стандартное поведение Enter.
  • В SPA-приложениях может не сработать, если обработка Enter осуществляется нестандартным скриптом.

4. Сабмит через вызов события JavaScript

Можно инициировать событие сабмита программно:

cy.get('form#loginForm').then(($form) => {
  $form[0].dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
});

Особенности:

  • Позволяет обойти ограничения методов .submit() и .click().
  • Полезно для тестирования форм с нестандартной логикой сабмита.
  • Можно комбинировать с cy.stub() для проверки вызова обработчиков.

Минусы:

  • Не всегда эмулирует поведение браузера полностью (например, отправка запроса на сервер может не произойти, если нет обработчика).

5. Сабмит с проверкой асинхронных операций

Современные SPA используют AJAX для отправки форм. В таких случаях важно проверять не только событие сабмита, но и результат запроса.

cy.intercept('POST', '/api/login').as('loginRequest');
cy.get('form#loginForm').submit();
cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);

Особенности:

  • Позволяет контролировать сетевые запросы, обеспечивая стабильность тестов.
  • Метод cy.intercept() используется для перехвата и проверки HTTP-запросов.
  • В комбинации с .submit() или .click() тест полностью охватывает сабмит и обработку ответа.

6. Сабмит форм с валидацией

Перед сабмитом часто требуется проверить правильность заполнения полей:

cy.get('input[name="email"]').type('user@example.com');
cy.get('input[name="password"]').type('password123');
cy.get('form#loginForm').submit();

// Проверка появления ошибки или успешного редиректа
cy.url().should('include', '/dashboard');

Особенности:

  • Cypress позволяет комбинировать сабмит с проверкой состояния элементов и URL.
  • В SPA возможно применение cy.contains() для проверки текста ошибок.

7. Комбинированные стратегии

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

  • .type('{enter}') для UX-тестов.
  • .click() для полноценного сабмита.
  • .submit() для проверки стандартного события формы.
  • cy.intercept() для проверки сетевых операций.

Пример комбинированного подхода:

cy.intercept('POST', '/api/register').as('register');
cy.get('input[name="username"]').type('newuser{enter}');
cy.get('button[type="submit"]').click();
cy.wait('@register').its('response.statusCode').should('eq', 201);

Такой подход обеспечивает покрытие всех уровней сабмита: фронтенд, обработка событий и сетевые операции.

Рекомендации по выбору метода

  1. Стандартные формы без сложной JS-логики — .submit().
  2. Формы с кастомной обработкой клика — .click() по кнопке.
  3. Тестирование UX через клавиатуру — .type('{enter}').
  4. Проверка асинхронных запросов — комбинация .submit()/.click() с cy.intercept().
  5. Нестандартные формы с нестабильными событиями — программная генерация события dispatchEvent.

Использование правильного подхода повышает стабильность тестов и точность проверки функционала формы.

Оглавление