Поиск по тексту и атрибутам

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

Поиск элементов по тексту

Поиск элементов по текстовому содержимому в WebdriverIO чаще всего реализуется с помощью XPath или CSS-селекторов с псевдоклассами, если структура HTML это позволяет.

Пример использования XPath для поиска элемента с точным текстом:

const element = await $('//button[text()="Войти"]');
await element.click();

В этом случае //button[text()="Войти"] находит все <button>, текст которых точно совпадает со строкой "Войти".

Если требуется найти элемент, содержащий определённый текст частично, используется функция contains():

const element = await $('//div[contains(text(), "Добро")]');
await element.waitForDisplayed();

Здесь будет найден любой <div>, текст которого содержит подстроку "Добро". Метод полезен для динамического контента, где текст может изменяться или включать переменные.

Поиск элементов по атрибутам

WebdriverIO позволяет искать элементы по любому атрибуту HTML. Наиболее часто используются id, class, name, data-* атрибуты. Основные способы:

Через CSS-селекторы:

// По id
const elementById = await $('#username');

// По классу
const elementByClass = await $('.form-input');

// По data-атрибуту
const elementByData = await $('[data-test="submit-button"]');

Через XPath:

// По атрибуту name
const element = await $('//input[@name="email"]');

// По частичному совпадению значения атрибута
const elementContains = await $('//a[contains(@href, "profile")]');

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

const element = await $('//div[@class="card" and contains(text(), "Активный")]');

Комбинированный поиск по тексту и атрибутам

Для более точного поиска часто используют сочетание текста и атрибутов. Это снижает риск ложного срабатывания и повышает стабильность тестов.

Пример:

const element = await $('//button[@type="submit" and contains(text(), "Отправить")]');
await element.click();

Здесь выбирается только <button> с атрибутом type="submit", текст которого содержит "Отправить". Такой подход особенно эффективен для страниц с повторяющимися элементами.

Методы WebdriverIO для работы с текстом элементов

После нахождения элемента текст можно получить через метод getText() или getHTML():

const element = await $('#welcome-message');
const text = await element.getText();
console.log(text); // "Добро пожаловать!"

Для проверки содержания текста удобно использовать expect-webdriverio:

await expect(element).toHaveTextContaining('Добро');

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

Динамический поиск с использованием функций

В случаях, когда элементы формируются динамически, селекторы можно строить программно:

const buttonText = 'Удалить';
const button = await $(`//button[text()="${buttonText}"]`);
await button.click();

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

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

  • Использовать data-атрибуты для ключевых элементов, так как они менее подвержены изменениям при редизайне.
  • XPath применять там, где CSS-селекторы недостаточны, особенно для поиска по тексту.
  • Всегда проверять уникальность селектора, чтобы избежать ошибок выбора первого попавшегося элемента.
  • При динамическом контенте сочетать условия поиска (текст + атрибут) для стабильности тестов.

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

Оглавление