Установка текста в prompt

Основы взаимодействия с элементами ввода

WebdriverIO предоставляет удобные методы для работы с элементами ввода на веб-страницах. Основной способ установки текста в input или textarea — метод setValue. Этот метод полностью заменяет текущее содержимое элемента переданным текстом.

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

const input = await $('#username');
await input.setValue('testuser');

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

  • $('#username') — селектор по id для поиска элемента на странице.
  • setValue('testuser') — полностью заменяет содержимое поля на 'testuser'.

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

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

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

Пример:

const input = await $('#username');
await input.setValue('user');      // Полностью заменяет содержимое
await input.addValue('123');       // Добавляет к существующему тексту

В результате в поле окажется 'user123'. Метод полезен для сценариев, где требуется имитировать пошаговый ввод пользователем.

Работа с динамическими и скрытыми элементами

Если элемент появляется на странице с задержкой или после выполнения действий пользователя, необходимо использовать методы ожидания:

const input = await $('#username');
await input.waitForExist({ timeout: 5000 });
await input.setValue('dynamicUser');
  • waitForExist ожидает появления элемента на странице до истечения указанного таймаута.
  • Подобные методы предотвращают ошибки, связанные с попыткой взаимодействия с элементом до его загрузки.

Для скрытых элементов можно использовать scrollIntoView:

const input = await $('#hidden-input');
await input.scrollIntoView();
await input.setValue('visibleNow');

Это гарантирует, что элемент будет видим на экране и доступен для ввода.

Очистка поля перед вводом

Метод clearValue позволяет полностью удалить текст из поля, если требуется ручная очистка перед установкой нового значения:

const input = await $('#username');
await input.clearValue();
await input.setValue('newUser');

Комбинирование clearValue с setValue обеспечивает точный контроль над содержимым поля.

Специальные символы и клавиши

WebdriverIO поддерживает ввод специальных клавиш через метод addValue и объект Keys:

const input = await $('#password');
await input.addValue('pass');
await input.addValue(['Tab', 'Enter']);
  • 'Tab' перемещает фокус на следующий элемент.
  • 'Enter' имитирует нажатие клавиши Enter.
  • Метод addValue позволяет смешивать обычный текст и управляющие клавиши для имитации сложных пользовательских действий.

Установка текста в textarea

Работа с многострочными полями ввода не отличается от стандартного input. Можно использовать перенос строки \n:

const textarea = await $('#comments');
await textarea.setValue('Первый комментарий\nВторой комментарий');

При использовании addValue каждая новая строка добавляется после существующего текста:

await textarea.addValue('\nТретий комментарий');

Валидация текста после ввода

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

const input = await $('#username');
await input.setValue('testUser');
const value = await input.getValue();
if (value !== 'testUser') {
    throw new Error(`Ожидалось 'testUser', получено '${value}'`);
}

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

Использование селекторов разных типов

WebdriverIO поддерживает CSS-селекторы, XPath и специальные селекторы, что позволяет гибко находить элементы ввода:

// CSS-селектор по классу
const input1 = await $('.input-class');

// XPath
const input2 = await $('//input[@name="username"]');

// Комбинированный селектор
const input3 = await $('form#login input[type="text"]');

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

Интеграция с ожиданиями

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

const input = await $('#username');
await input.waitForDisplayed({ timeout: 5000 });
await input.setValue('readyUser');
await browser.waitUntil(async () => (await input.getValue()) === 'readyUser', {
    timeout: 3000,
    timeoutMsg: 'Текст не был установлен корректно'
});

Такой подход обеспечивает надежность тестов даже на динамических страницах с задержками рендеринга.

Работа с формами

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

const username = await $('#username');
const password = await $('#password');

await username.setValue('user123');
await password.setValue('securePass');
await $('#login-form').submit();

Метод submit автоматически вызывает событие submit для формы, что удобно для тестирования сценариев логина и регистрации.

Оглавление