Методы поиска одного и нескольких элементов

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

Поиск одного элемента

Метод $(selector) используется для нахождения первого соответствующего элемента на странице. Он возвращает объект типа WebdriverIO.Element, с которым можно работать напрямую.

Синтаксис:

const element = $(selector);

Примеры селекторов:

  • CSS-селекторы:
const button = $('button.submit'); // первый элемент с классом submit внутри тега button
  • ID и классы:
const input = $('#username'); // элемент с id=username
const field = $('.form-input'); // первый элемент с классом form-input
  • XPath:
const link = $('//a[text()="Home"]'); // первый элемент <a> с текстом Home

Основные методы для найденного элемента:

  • click() — клик по элементу.
  • setValue(value) — установка текста в поле ввода.
  • getText() — получение текста элемента.
  • isDisplayed() — проверка видимости элемента.
const input = $('#username');
input.setValue('admin');
const button = $('button.submit');
button.click();

Важно: Если элемент не найден, $(selector) по умолчанию не выбросит исключение, но дальнейшие действия с WebdriverIO.Element могут вызвать ошибки. Чтобы ожидать появления элемента, используют waitForExist или waitForDisplayed:

const button = $('button.submit');
button.waitForDisplayed({ timeout: 5000 });
button.click();

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

Метод $$(selector) возвращает массив всех элементов, соответствующих селектору. Тип возвращаемого значения — Array<WebdriverIO.Element>.

Синтаксис:

const elements = $$(selector);

Примеры:

const rows = $$('table tr'); // все строки таблицы
const links = $$('a');       // все ссылки на странице

Работа с массивом элементов:

  • Циклы for, forEach, map для перебора.
  • Доступ к конкретному элементу через индекс elements[0].
const buttons = $$('button');
buttons.forEach(button => {
    if (button.getText() === 'Delete') {
        button.click();
    }
});

Методы ожидания с несколькими элементами:

WebdriverIO поддерживает ожидания для каждого элемента массива, но не для самого массива напрямую. Для этого применяют:

const items = $$('ul li');
items.forEach(item => item.waitForDisplayed({ timeout: 3000 }));

Сравнение поиска одного и нескольких элементов

Метод Возвращаемый тип Поведение при отсутствии элемента
$ WebdriverIO.Element Возвращает “пустой” объект, ошибки при последующих действиях
$$ Array<WebdriverIO.Element> Возвращает пустой массив, безопасно перебирать

Ключевое отличие — $ используется для единственного элемента, а $$ — для коллекции элементов, что особенно важно для динамических списков или таблиц.

Стратегии выбора селекторов

  1. CSS-селекторы — быстрые и читаемые.
  2. XPath — гибкие для сложных иерархий.
  3. Комбинация атрибутов — точные селекторы с [attribute="value"].
const menuItem = $('ul.menu li[data-id="settings"]');
  1. Фильтрация коллекций — после получения массива элементов можно использовать filter, find:
const activeItems = $$('ul.menu li').filter(item => item.getAttribute('class').includes('active'));

Асинхронность и ожидания

WebdriverIO поддерживает асинхронный режим, где методы поиска возвращают промисы. Важно использовать await при работе с элементами:

const button = await $('button.submit');
await button.waitForClickable({ timeout: 5000 });
await button.click();

С массивами элементов:

const items = await $$('ul li');
for (const item of items) {
    if ((await item.getText()) === 'Logout') {
        await item.click();
        break;
    }
}

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

  • Использовать уникальные селекторы для $, чтобы минимизировать вероятность ошибок.
  • Для динамических списков лучше применять $$ и фильтры, чем полагаться на порядок элементов.
  • Всегда проверять наличие элемента через waitForExist или waitForDisplayed.
  • Избегать жесткой зависимости от индекса элементов, особенно в таблицах и списках.

Методы $ и $$ составляют основу взаимодействия с DOM в WebdriverIO, и грамотное их использование обеспечивает стабильность и читаемость тестов, облегчая поддержку автоматизации в крупных проектах.

Оглавление