Ввод текста и работа с полями ввода

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

Поиск элементов ввода

Для взаимодействия с полями необходимо сначала найти соответствующий элемент на странице. В WebdriverIO используются селекторы CSS и XPath:

const inputField = await $('#username'); // поиск по id
const passwordField = await $('[name="password"]'); // поиск по имени
const emailField = await $('input[type="email"]'); // поиск по типу

Методы поиска возвращают объект Element, с которым далее выполняются действия. Важно убедиться, что элемент доступен на странице, используя ожидания:

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

Методы ввода текста

Для ввода текста используется метод setValue. Этот метод очищает поле перед вводом нового значения:

await inputField.setValue('admin');

Если необходимо добавить текст к уже существующему значению, применяется метод addValue:

await inputField.addValue('123');

Разница между setValue и addValue критична при работе с формами, где текстовое поле может содержать предзаполненные значения.

Очистка полей

Иногда требуется предварительно очистить поле ввода. Для этого используется метод clearValue:

await inputField.clearValue();

В сочетании с setValue этот метод обеспечивает гарантированное удаление предыдущего текста.

Работа с клавишами

WebdriverIO позволяет эмулировать нажатие клавиш с помощью метода keys, что полезно для тестирования автодополнения или отправки форм:

await inputField.setValue('user');
await browser.keys('Enter');

Поддерживаются как одиночные клавиши, так и комбинации:

await browser.keys(['Control', 'a']); // выделение всего текста
await browser.keys('Backspace'); // удаление выделенного текста

Получение и проверка значений

Для проверки введенного текста используется метод getValue, который возвращает текущее значение поля:

const value = await inputField.getValue();
console.log(value); // 'admin123'

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

Работа с текстовыми областями (textarea)

Для многострочных полей (textarea) методы setValue, addValue и getValue работают аналогично обычным полям ввода. Разница лишь в возможности добавления переносов строк:

const commentArea = await $('#comment');
await commentArea.setValue('Первая строка\nВторая строка');

Управление автозаполнением и задержками

Некоторые поля могут использовать автозаполнение браузера или динамическую подгрузку данных. В таких случаях рекомендуется:

Ждать появления подсказок или завершения загрузки:

await browser.pause(1000); // временная пауза
await $('#suggestion').waitForDisplayed();

Использовать addValue вместо setValue, чтобы имитировать постепенный ввод символов.

Особенности работы с полями типа `password`

Поля с типом password требуют тех же методов для ввода и проверки значений. Для тестирования часто проверяется отображение маскировки символов и корректность отправляемого значения:

const password = await $('#password');
await password.setValue('secret');
const value = await password.getValue(); // возвращает 'secret', хотя визуально поле замаскировано

Валидация и ассерты

WebdriverIO интегрируется с различными библиотеками для проверки значений полей, например, с expect-webdriverio:

await expect(inputField).toHaveValue('admin123');
await expect(commentArea).toHaveTextContaining('Первая строка');

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