Цепочки селекторов

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

Основы использования селекторов

В WebdriverIO каждый элемент можно искать с помощью функции $ (для одного элемента) и $$ (для коллекции элементов). Селекторы могут быть CSS, XPath, а также специфичными для платформы (например, accessibility id для мобильного тестирования).

Примеры базовых селекторов:

const button = await $('button.submit');
const inputs = await $$('input[type="text"]');
const item = await $('//div[@class="item"]');

Комбинирование селекторов через цепочки

Цепочки селекторов позволяют искать элемент внутри другого элемента, что улучшает точность поиска и снижает вероятность конфликтов. В WebdriverIO поддерживаются следующие методы:

  • $ и $$ на найденных элементах
  • Метод element.$() для вложенного поиска
  • Метод element.$$() для получения коллекции внутри элемента

Пример:

const form = await $('#loginForm');
const usernameInput = await form.$('input[name="username"]');
const passwordInput = await form.$('input[name="password"]');

В этом примере поиск usernameInput ограничен областью найденного элемента #loginForm, что исключает другие поля с таким же именем на странице.

Сложные цепочки с фильтрацией

WebdriverIO позволяет фильтровать коллекции элементов для более точного поиска. Методы filter, find, map используются после получения коллекции с $$.

const items = await $$('ul li');
const activeItem = await items.find(async item => {
    return (await item.getAttribute('class')).includes('active');
});

Здесь создается цепочка: сначала собираются все элементы списка, затем выбирается только активный.

Использование селекторов с условиями ожидания

Часто элементы появляются на странице с задержкой. В таких случаях цепочки селекторов удобно комбинировать с ожиданиями:

const card = await $('#cardsContainer').$('div.card');
await card.waitForDisplayed({ timeout: 5000 });

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

XPath в цепочках селекторов

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

const parent = await $('//div[@id="menu"]');
const menuItem = await parent.$('.//a[text()="Settings"]');

Обратите внимание на использование .// — поиск начинается внутри найденного элемента parent.

Комбинация CSS и XPath

Иногда удобно комбинировать CSS и XPath для точного доступа:

const container = await $('#main');
const link = await container.$('//a[contains(@href, "profile")]');

Цепочка начинается с CSS-селектора, затем уточняется XPath для ссылки внутри контейнера.

Вложенные коллекции элементов

Для сложных страниц с повторяющимися блоками часто необходимо обрабатывать вложенные коллекции:

const cards = await $$('div.card');
for (const card of cards) {
    const title = await card.$('h2.title').getText();
    const buttons = await card.$$('button');
}

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

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

  • Избегать глобальных селекторов, когда возможны дубли на странице.
  • Использовать цепочки для повышения устойчивости тестов к изменениям структуры DOM.
  • Сочетать с ожиданиями (waitForDisplayed, waitForExist) для стабильности.
  • Фильтровать коллекции для точного выбора элементов.

Цепочки селекторов — основа надежного и поддерживаемого тестирования с WebdriverIO. Они позволяют структурировать код, минимизировать зависимость от структуры страницы и упрощают работу с динамическим контентом.

Оглавление