Отправка форм

Работа с формами — одна из ключевых задач автоматизированного тестирования веб-приложений. WebdriverIO предоставляет гибкие методы для взаимодействия с элементами форм, заполнения полей и проверки результатов отправки.

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

Для работы с формой необходимо корректно идентифицировать её элементы. В WebdriverIO поддерживаются различные стратегии поиска:

  • По CSS-селектору:
const usernameInput = $('#username');
const passwordInput = $('input[name="password"]');
  • По XPath:
const submitButton = $('//button[text()="Войти"]');
  • По классу или атрибуту:
const emailInput = $('.email-field');
const newsletterCheckbox = $('[type="checkbox"][name="newsletter"]');

Выбор стратегии зависит от стабильности селекторов на странице и их уникальности.

Заполнение полей формы

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

usernameInput.setValue('testuser');
passwordInput.setValue('P@ssw0rd!');
  • setValue очищает поле перед вводом.
  • addValue добавляет текст к существующему содержимому.

Для выбора значений в выпадающих списках (<select>) используется метод selectByVisibleText, selectByAttribute или selectByIndex:

const countrySelect = $('#country');
countrySelect.selectByVisibleText('Россия');
countrySelect.selectByAttribute('value', 'RU');
countrySelect.selectByIndex(1); // выбирает второй элемент

Для работы с флажками (checkbox) и переключателями (radio) применяются методы click и проверка состояния через isSelected:

const agreeCheckbox = $('#agree');
if (!agreeCheckbox.isSelected()) {
    agreeCheckbox.click();
}

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

После заполнения всех полей форма отправляется кнопкой submit. Существуют два подхода:

  1. Через клик по кнопке submit:
const submitButton = $('button[type="submit"]');
submitButton.click();
  1. Через метод submitForm у формы:
const form = $('#loginForm');
form.submitForm();

Метод submitForm особенно полезен, когда кнопка submit динамически изменяется или отсутствует.

Проверка успешной отправки

После отправки формы необходимо убедиться, что действие выполнено корректно. Основные подходы:

  • Проверка наличия сообщения об успехе или ошибки:
const successMessage = $('#successMessage');
expect(successMessage).toBeDisplayed();
expect(successMessage).toHaveTextContaining('Успешно');
  • Проверка редиректа на другую страницу:
expect(browser).toHaveUrlContaining('/dashboard');
  • Проверка состояния элементов на странице:
const logoutButton = $('#logout');
expect(logoutButton).toBeClickable();

Работа с асинхронными действиями

WebdriverIO по умолчанию поддерживает синхронный и асинхронный режим. При асинхронной работе необходимо использовать await для всех действий:

await usernameInput.setValue('testuser');
await passwordInput.setValue('P@ssw0rd!');
await submitButton.click();
await expect(successMessage).toBeDisplayed();

Использование waitFor методов помогает обрабатывать динамически загружаемые элементы:

await successMessage.waitForDisplayed({ timeout: 5000 });

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

Для форм с множеством полей и вложенными элементами рекомендуется разделять действия на логические блоки:

// Личный блок
await $('#firstName').setValue('Иван');
await $('#lastName').setValue('Иванов');

// Контактный блок
await $('#email').setValue('ivan@example.com');
await $('#phone').setValue('+79991234567');

// Настройки
const subscribe = $('#subscribe');
if (!await subscribe.isSelected()) {
    await subscribe.click();
}

// Отправка формы
await $('#registrationForm').submitForm();

Такой подход повышает читаемость теста и упрощает поддержку при изменении структуры страницы.

Обработка ошибок при отправке форм

WebdriverIO позволяет ловить ошибки и проверять валидацию:

await $('#submit').click();
const errorMessages = await $$('.error-message');
for (const error of errorMessages) {
    console.log(await error.getText());
}

Проверка сообщений об ошибке необходима для тестирования негативных сценариев, таких как пустые поля или некорректный формат данных.

Интерактивные элементы

Для форм с автодополнением, календарями и слайдерами важно использовать методы взаимодействия с UI:

// Календарь
await $('#birthDate').click();
await $('//td[text()="15"]').click();

// Слайдер
const slider = $('#volume');
await slider.dragAndDrop({ x: 50, y: 0 });

Подобные действия требуют точной работы с локаторами и контроля времени ожидания.

Повторное использование кода

Для больших форм рекомендуется использовать Page Object модель, где каждый блок формы выделяется как отдельный метод или класс:

class LoginForm {
    get username() { return $('#username'); }
    get password() { return $('#password'); }
    get submit() { return $('button[type="submit"]'); }

    async login(user, pass) {
        await this.username.setValue(user);
        await this.password.setValue(pass);
        await this.submit.click();
    }
}

Такой подход упрощает поддержку тестов при изменении структуры формы и делает код более читаемым.

Заполнение и отправка форм с WebdriverIO требует сочетания точных локаторов, управления асинхронностью и проверки результатов. Использование методов setValue, click, submitForm и Page Object паттерна позволяет создавать надежные и масштабируемые автоматизированные тесты.

Оглавление