Заполнение многошаговых форм

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

Структура многошаговых форм

Многошаговая форма обычно состоит из нескольких этапов, каждый из которых содержит различные поля для ввода данных. На разных этапах могут быть различные типы полей — текстовые поля, флажки, радио-кнопки и другие элементы. Переходы между шагами могут зависеть от введенных данных или быть кнопками с явной навигацией.

Типичная структура многошаговой формы выглядит так:

  1. Шаг 1: Ввод контактной информации.
  2. Шаг 2: Ввод данных о доставке.
  3. Шаг 3: Выбор способа оплаты.
  4. Шаг 4: Подтверждение данных.

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

Стратегия тестирования

Тестирование многошаговых форм включает несколько основных задач:

  • Проверка корректности ввода данных на каждом этапе.
  • Проверка переходов между этапами.
  • Проверка корректности сохранения данных между шагами.
  • Валидация ошибок и предупреждений.
  • Проверка работы кнопок перехода (например, “Далее”, “Назад”).

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

Настройка WebdriverIO для тестирования

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

Пример базовой настройки WebdriverIO:

const { remote } = require('webdriverio');

let browser;

beforeAll(async () => {
  browser = await remote({
    logLevel: 'info',
    path: '/',
    capabilities: {
      browserName: 'chrome',
      'goog:chromeOptions': {
        args: ['--headless']
      }
    }
  });
});

afterAll(async () => {
  await browser.deleteSession();
});

В этом примере создается подключение к браузеру Chrome в headless-режиме, что позволяет проводить тестирование без отображения интерфейса браузера.

Взаимодействие с элементами формы

В WebdriverIO для взаимодействия с элементами формы используются стандартные методы поиска и действий с элементами, такие как click(), setValue(), selectByVisibleText() и другие. Эти методы позволяют заполнять поля формы, выбирать элементы и переходить между шагами.

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

Для заполнения текстовых полей на разных шагах формы можно использовать метод setValue():

const nameInput = await browser.$('#name');
await nameInput.setValue('Иван Иванов');

Этот код заполняет текстовое поле с идентификатором #name значением “Иван Иванов”.

Выбор значения из выпадающего списка

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

const countrySelect = await browser.$('#country');
await countrySelect.selectByVisibleText('Россия');

Здесь выбирается страна “Россия” в выпадающем списке.

Работа с чекбоксами и радио-кнопками

Для взаимодействия с флажками и радио-кнопками используется метод click(). При этом важно учитывать, что состояние этих элементов может изменяться только после клика, а в случае с чекбоксами необходимо проверять их текущее состояние.

const termsCheckbox = await browser.$('#terms');
if (!await termsCheckbox.isSelected()) {
  await termsCheckbox.click();
}

В этом примере проверяется, что флажок с идентификатором #terms не установлен, и если это так, то он будет установлен.

Переходы между шагами

Для перехода между этапами формы обычно используются кнопки “Далее” и “Назад”. В WebdriverIO можно кликать по этим кнопкам с помощью метода click():

const nextButton = await browser.$('#next');
await nextButton.click();

Этот код кликает по кнопке с идентификатором #next, что вызывает переход к следующему шагу формы.

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

Валидация ошибок

Многошаговые формы часто включают валидацию на каждом этапе, чтобы убедиться, что введенные данные корректны. Ошибки могут отображаться как текстовые сообщения рядом с полями или как всплывающие окна.

Для проверки появления ошибок можно использовать метод waitForDisplayed(), чтобы удостовериться, что элемент с сообщением об ошибке виден:

const errorMessage = await browser.$('.error-message');
await errorMessage.waitForDisplayed({ timeout: 5000 });
expect(await errorMessage.getText()).toBe('Введите корректный email');

Этот код проверяет, что сообщение об ошибке с классом .error-message отображается в пределах 5 секунд и содержит ожидаемый текст.

Сохранение данных между шагами

Многошаговые формы могут хранить данные между шагами, например, в localStorage, cookies или в сессионных данных. Для тестирования таких случаев можно использовать методы работы с браузерными хранилищами.

Работа с cookies

await browser.setCookies({ name: 'user', value: 'John Doe' });
const cookies = await browser.getCookies();
console.log(cookies);

Этот код устанавливает cookie с именем user и значением “John Doe”, а затем выводит все cookies в консоль.

Работа с localStorage

await browser.execute(() => {
  localStorage.setItem('user', 'John Doe');
});
const user = await browser.execute(() => {
  return localStorage.getItem('user');
});
console.log(user);

Здесь данные записываются в localStorage, и после этого считываются для проверки.

Тестирование многошаговых форм с динамическими элементами

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

const additionalField = await browser.$('#additional-field');
await additionalField.waitForDisplayed({ timeout: 5000 });
await additionalField.setValue('Дополнительная информация');

Здесь метод waitForDisplayed() ожидает появления элемента, а затем он заполняется данными.

Заключение

Заполнение и тестирование многошаговых форм требует внимательности и тщательной настройки. WebdriverIO предоставляет все необходимые средства для моделирования пользовательского ввода, переходов между этапами и проверки данных. Использование стандартных методов взаимодействия с элементами, таких как setValue(), click(), selectByVisibleText() и других, позволяет эффективно автоматизировать тестирование сложных форм с несколькими шагами.

Оглавление