Методы взаимодействия: submit()

Метод submit() в Protractor используется для отправки форм на веб-странице. Он напрямую взаимодействует с элементами типа <form> или с элементами внутри формы, инициируя стандартное событие отправки формы браузером. Этот метод полезен при автоматизации тестирования сценариев, где необходимо проверить поведение приложения при сабмите формы без явного клика по кнопке отправки.

Синтаксис

element(locator).submit();

element(locator) — элемент, на который будет вызван метод submit(). Обычно это <form> или один из элементов внутри формы (например, <input>).
submit() — метод, инициирующий отправку формы.

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

Основные особенности

Работа с формой напрямую submit() инициирует стандартное событие формы, эквивалентное нажатию кнопки <input type="submit"> или <button type="submit">. При этом браузер выполняет все встроенные проверки валидации и обработку события onsubmit.
Поддержка асинхронности Protractor использует async/await, поэтому вызов submit() обычно сопровождается ожиданием завершения асинхронной операции.

await element(by.css('form')).submit();

Не требует клика по кнопке Метод позволяет отправлять форму без прямого взаимодействия с кнопкой. Это упрощает тестирование динамически генерируемых форм или форм, где кнопка сабмита может быть скрыта или управляться скриптами.
Воздействие на события браузера При вызове submit() срабатывают все стандартные обработчики событий формы, включая onsubmit, проверку HTML5-валидации (required, pattern), и переход по action атрибуту формы.

Пример использования

Отправка формы по локатору формы:

it('должна отправлять форму', async () => {
    await browser.get('https://example.com/login');

    const loginForm = element(by.css('form#loginForm'));
    const usernameInput = loginForm.element(by.name('username'));
    const passwordInput = loginForm.element(by.name('password'));

    await usernameInput.sendKeys('testuser');
    await passwordInput.sendKeys('password123');

    await loginForm.submit();

    const successMessage = element(by.id('success'));
    expect(await successMessage.isDisplayed()).toBe(true);
});

В этом примере:

Сначала открывается страница.
Заполняются поля формы.
Вызывается submit() на форме.
После сабмита проверяется отображение элемента подтверждения (successMessage).

Важные нюансы

Работа с элементами внутри формы Метод submit() можно вызывать на <input> или <button> внутри формы, и это будет эквивалентно сабмиту всей формы:

await element(by.name('username')).submit();

Проверка валидности формы Если форма содержит HTML5-валидацию, и введённые данные не соответствуют требованиям, сабмит не произойдёт. В тестах это нужно учитывать:

await element(by.css('form#signup')).submit(); // Если поле email пустое — форма не отправится

Асинхронные ожидания после сабмита После вызова submit() важно дождаться загрузки новой страницы или появления элементов на текущей, чтобы избежать гонок:

await loginForm.submit();
await browser.wait(ExpectedConditions.urlContains('dashboard'), 5000);

Отличие от `click()`

submit() работает только для форм или их элементов; click() можно использовать для кнопок любых типов.
submit() инициирует событие отправки формы, включая HTML5-валидацию, тогда как click() просто симулирует нажатие кнопки.
При click() на <button type="submit"> результат может быть аналогичен submit(), но использование submit() делает намерение теста более явным.