Получение текста элемента

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

Основной синтаксис

const text = await $(selector).getText();
  • $(selector) — функция для поиска одного элемента по CSS-селектору, XPath или другим стратегиям поиска.
  • getText() — асинхронный метод, возвращающий строку с текстовым содержимым элемента.

Пример:

const heading = await $('h1');
const headingText = await heading.getText();
console.log(headingText); // Выведет текст заголовка <h1>

Получение текста у нескольких элементов

Если требуется получить текст у группы элементов, используется $$, возвращающий массив элементов:

const items = await $$('ul li');
const texts = await Promise.all(items.map(item => item.getText()));
console.log(texts); // Массив текстов всех <li>

Использование Promise.all обеспечивает асинхронное выполнение всех вызовов getText() одновременно, что ускоряет обработку больших списков элементов.

Отличие от getValue()

Метод getText() возвращает видимый текст элемента, в то время как getValue() возвращает значение атрибута value, что важно для полей ввода:

const inputValue = await $('#username').getValue();

getText() игнорирует скрытые значения и HTML-теги внутри элемента, извлекая только видимый контент.

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

WebdriverIO поддерживает ожидание элементов перед получением текста, что критично при работе с динамическими веб-страницами:

const button = await $('#loadButton');
await button.waitForDisplayed({ timeout: 5000 });
const buttonText = await button.getText();

Параметр timeout позволяет задать максимальное время ожидания появления элемента на странице. Если элемент не отобразился, будет выброшена ошибка.

Работа с вложенными элементами и псевдотекстом

Иногда необходимо получить текст только внутри дочернего элемента или исключить текст соседних блоков:

const parent = await $('.parent');
const childText = await parent.$('.child').getText();

getText() не извлекает содержимое скрытых дочерних элементов (display: none) и обычно возвращает текст в том виде, как он отображается пользователю.

Тонкости обработки пробелов и переносов

Текст, получаемый через getText(), может содержать переносы строк и лишние пробелы. Для унификации часто применяется метод trim():

const text = (await $('#element').getText()).trim();

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

const text = await $('#element').getText();
if (/Ошибка \d{3}/.test(text)) {
    console.log('Сообщение об ошибке найдено');
}

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

Метод getText() часто применяется совместно с библиотекой expect-webdriverio для проверок:

const text = await $('#message').getText();
await expect(text).toBe('Успешно выполнено');

Также возможна проверка вхождения текста:

await expect($('#alert')).toHaveTextContaining('Ошибка');

Рекомендации по производительности

  • Не использовать getText() для скрытых элементов, так как это может привести к непредсказуемым результатам.
  • Для больших списков элементов применять $$ вместе с Promise.all.
  • Если текст динамически меняется, использовать waitUntil или встроенные методы ожидания (waitForDisplayed, waitForExist) перед вызовом getText().

Пример комплексного сценария

const notifications = await $$('.notification');
const visibleTexts = await Promise.all(
    notifications
        .filter(async el => await el.isDisplayed())
        .map(el => el.getText())
);
console.log(visibleTexts);

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

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

Оглавление