Получение значения input полей

WebdriverIO предоставляет мощные инструменты для взаимодействия с элементами веб-страницы, включая получение значений полей ввода (input). Основным методом для работы с такими элементами является использование команд, которые обращаются к DOM через селекторы.

Основные способы получения значения

Для стандартного <input> и <textarea> значения хранятся в атрибуте value. WebdriverIO позволяет получить их несколькими способами:

const input = await $('#username');
const value = await input.getValue();
console.log(value);

Метод getValue() возвращает текущее значение поля. Он автоматически учитывает, что значение может быть динамически изменено скриптами на странице. Это удобнее, чем напрямую читать атрибут value, так как отражает текущее состояние элемента.

Альтернативный способ — через прямое получение атрибута:

const valueAttr = await input.getAttribute('value');
console.log(valueAttr);

Разница между getValue() и getAttribute('value') проявляется, если значение поля обновляется JavaScript-логикой без изменения атрибута в DOM. В этом случае getValue() вернёт актуальное значение, а getAttribute('value') — нет.

Асинхронная природа операций

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

$('#email').getValue().then(value => {
    console.log(value);
});

Однако предпочтительным подходом считается использование async/await для лучшей читаемости и предсказуемости кода.

Работа с различными типами input

  • Текстовые поля (text, email, password) Использование getValue() возвращает строку с текущим текстом.

  • Флажки (checkbox) и радиокнопки (radio) Для таких элементов значение value часто указывает атрибут value, но для проверки состояния рекомендуется использовать isSelected():

const checkbox = await $('#agree');
const isChecked = await checkbox.isSelected();
  • Поля с числовым вводом (number) Метод getValue() возвращает строку. Для работы с числом необходимо преобразование:
const age = await $('#age').getValue();
const ageNumber = parseInt(age, 10);
  • Поля с датой (date) и временем (time) Значение возвращается в формате, который поддерживает HTML (YYYY-MM-DD для даты, HH:MM для времени).

Сценарии использования

  1. Проверка введенного текста Часто используется для валидации данных после автозаполнения или пользовательского ввода:
await $('#username').setValue('admin');
const value = await $('#username').getValue();
expect(value).toBe('admin');
  1. Сравнение данных формы с API Значение input может быть считано и сопоставлено с полученными данными из внешнего источника:
const apiData = await getUserData();
const formValue = await $('#email').getValue();
expect(formValue).toEqual(apiData.email);
  1. Работа с динамическими формами Если поле заполняется скриптами (например, автозаполнение по выбору из списка), getValue() обеспечивает корректное получение актуального состояния поля.

Практические рекомендации

  • Всегда использовать await для получения значений.
  • Для проверки состояния checkbox и radio предпочтительно использовать isSelected().
  • При работе с числами и датами необходимо преобразовывать строку в соответствующий тип данных.
  • Для динамически изменяемых полей использовать getValue(), а не getAttribute('value').
  • При тестировании форм комбинировать методы setValue(), getValue() и проверки через expect для полноты теста.

Совместимость с различными браузерами

WebdriverIO через драйверы Selenium или DevTools корректно работает с getValue() во всех современных браузерах. Отличия могут возникнуть только при нестандартных кастомных компонентах, где значение поля хранится в пользовательских атрибутах. В таких случаях необходимо использовать getAttribute() с конкретным именем атрибута.

Примеры сложных кейсов

  1. Поле с маской ввода Если input использует маску (например, телефон), getValue() вернёт текст с маской:
await $('#phone').setValue('1234567890');
const phoneValue = await $('#phone').getValue(); // "+1 (234) 567-890"
  1. Скрытые поля (hidden) Такие поля не видны на странице, но значение доступно через getValue():
const hiddenValue = await $('#hiddenField').getValue();
  1. Динамические поля после AJAX-запроса После заполнения через асинхронные действия необходимо ждать появления элемента или изменения значения:
await $('#dynamicInput').waitForDisplayed();
const value = await $('#dynamicInput').getValue();

Методы получения значений input полей в WebdriverIO позволяют строить надежные и точные тесты, учитывающие как стандартные сценарии ввода, так и динамические изменения на странице. Правильное использование getValue(), getAttribute() и проверки состояния элементов обеспечивает стабильность автоматизации и минимизирует ошибки тестирования.

Оглавление