Ожидание наличия текста в элементе

В WebdriverIO для автоматизации тестирования веб-приложений критически важно уметь контролировать состояние элементов страницы. Часто возникает необходимость дождаться появления определённого текста в элементе перед выполнением дальнейших действий. Это связано с асинхронной природой современных веб-приложений, где данные могут загружаться динамически через AJAX или WebSocket. WebdriverIO предоставляет для этого мощные механизмы ожидания.

Методы ожидания текста

Основной инструмент для контроля текста в элементах — waitUntil и встроенные методы элементов, такие как getText() и waitForDisplayed().

Пример базового ожидания текста:

const elem = await $('#message');
await browser.waitUntil(
    async () => (await elem.getText()) === 'Готово',
    {
        timeout: 5000,
        timeoutMsg: 'Текст в элементе не появился в течение 5 секунд'
    }
);

Здесь ключевые моменты:

  • getText() возвращает текущий текст элемента.
  • waitUntil принимает функцию, которая должна возвращать true, когда условие выполнено.
  • timeout задаёт максимальное время ожидания.
  • timeoutMsg позволяет выводить информативное сообщение при неудаче.

Ожидание частичного текста

Часто требуется не полный текст, а наличие определённой подстроки. В этом случае используется проверка через includes:

await browser.waitUntil(
    async () => (await elem.getText()).includes('Загрузка завершена'),
    {
        timeout: 7000,
        timeoutMsg: 'Ожидаемый текст так и не появился'
    }
);

Особенности:

  • Использование includes позволяет проверять появление текста постепенно, не требуя точного совпадения.
  • Полезно для динамических сообщений, где меняется только часть текста (например, “Загрузка 50%” → “Загрузка завершена”).

Методы элементов с встроенным ожиданием

WebdriverIO предоставляет более лаконичные методы, такие как waitForExist(), waitForDisplayed(), которые можно комбинировать с проверкой текста:

await elem.waitForDisplayed({ timeout: 5000 });
const text = await elem.getText();
if (!text.includes('Готово')) {
    throw new Error('Текст не соответствует ожидаемому значению');
}

Этот подход безопасен для элементов, которые могут отсутствовать в DOM в момент вызова, предотвращая ошибки типа stale element reference.

Асинхронные сценарии и динамические данные

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

await browser.waitUntil(
    async () => {
        const currentText = await elem.getText();
        console.log(`Текущий текст: ${currentText}`);
        return currentText === 'Готово';
    },
    {
        timeout: 10000,
        timeoutMsg: 'Элемент не получил ожидаемый текст за 10 секунд'
    }
);

Преимущества:

  • Позволяет видеть промежуточные состояния текста.
  • Облегчает отладку при сложных динамических сценариях.

Использование селекторов и цепочек действий

При проверке текста на сложных страницах часто требуется уточнять селекторы или обращаться к вложенным элементам:

const parent = await $('#notifications');
const child = await parent.$('.status-message');

await browser.waitUntil(
    async () => (await child.getText()) === 'Задача выполнена',
    { timeout: 8000 }
);

Рекомендации:

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

Логирование и обработка ошибок

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

try {
    await browser.waitUntil(
        async () => (await elem.getText()) === 'Готово',
        { timeout: 5000 }
    );
} catch (error) {
    console.error('Ошибка: элемент не содержит ожидаемый текст', error);
}

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

Практические советы

  • Всегда учитывать время загрузки данных. Не устанавливать слишком короткий timeout.
  • Использовать точные селекторы. Чем точнее элемент, тем надёжнее проверка текста.
  • Проверять промежуточный текст при длинных процессах. Для длинных динамических операций полезно выводить текущее состояние элемента через console.log.
  • Комбинировать с другими ожиданиями. Например, waitForDisplayed + waitUntil, чтобы гарантировать наличие элемента и правильный текст одновременно.

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

Оглавление