Селекторы и способы поиска элементов

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

1. Основные типы селекторов

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

1.1 CSS-селекторы CSS-селекторы — наиболее часто используемый метод поиска элементов. Они позволяют быстро находить элементы по идентификатору, классу, атрибуту или вложенности.

const button = $('#submit'); // По id
const input = $('.login-input'); // По классу
const checkbox = $('[type="checkbox"]'); // По атрибуту
const nestedElement = $('form .input-field'); // Вложенные элементы

Преимущества CSS-селекторов:

  • Высокая производительность.
  • Возможность комбинировать несколько условий.
  • Поддержка псевдоклассов (:nth-child, :first-of-type).

1.2 XPath-селекторы XPath обеспечивает гибкий способ поиска элементов по структуре DOM и содержимому текста.

const link = $('//a[text()="Подробнее"]');
const firstRow = $('//table//tr[1]');
const inputByPlaceholder = $('//input[@placeholder="Имя"]');

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

  • Позволяет находить элементы по тексту и сложной иерархии.
  • Используется там, где CSS-селекторы не справляются.
  • Может быть менее производительным на больших страницах.

1.3 Комбинированные стратегии поиска WebdriverIO поддерживает использование комбинированных стратегий, например:

const element = $('div.container').$('span.highlight');

Здесь сначала выбирается родительский элемент div.container, после чего поиск ограничивается дочерними span.highlight.

2. Методы поиска элементов

2.1 Одноэлементный поиск Метод $ возвращает первый найденный элемент, соответствующий селектору.

const loginButton = $('#login');
await loginButton.click();

2.2 Многоэлементный поиск Метод $$ возвращает массив всех элементов, удовлетворяющих селектору.

const menuItems = $$('.menu-item');
console.log(menuItems.length);
await menuItems[0].click();

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

2.3 Поиск с ожиданием WebdriverIO предоставляет методы ожидания, чтобы убедиться, что элемент доступен перед взаимодействием:

const submitButton = $('#submit');
await submitButton.waitForExist({ timeout: 5000 });
await submitButton.waitForClickable({ timeout: 5000 });
await submitButton.click();
  • waitForExist — ожидает появления элемента в DOM.
  • waitForDisplayed — ожидает, что элемент будет видим.
  • waitForClickable — ожидает, что элемент можно кликнуть.

3. Работа с динамическими элементами

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

const dynamicElement = $('#dynamic');
await dynamicElement.waitForDisplayed({ timeout: 7000 });
await dynamicElement.setValue('Тест');

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

4. Локаторы по тексту и атрибутам

WebdriverIO позволяет искать элементы по содержимому текста или конкретным атрибутам:

// По точному тексту
const link = $('=Подробнее');

// По частичному тексту
const linkPartial = $('*=подробно');

// По кастомному атрибуту
const inputCustom = $('[data-test-id="username"]');

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

  • = — точное совпадение текста.
  • *= — частичное совпадение текста.
  • Атрибутные селекторы позволяют создавать более стабильные тесты, чем поиск по CSS-классам, которые часто меняются.

5. Вложенные и контекстные селекторы

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

const form = $('#login-form');
const passwordInput = form.$('[name="password"]');
await passwordInput.setValue('password123');

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

  • Изоляция поиска внутри блока уменьшает риск попадания на неверный элемент.
  • Упрощает работу с повторяющимися элементами на странице.

6. Рекомендации по выбору селекторов

  • Отдавать предпочтение атрибутным селекторам (data-*) для устойчивости тестов.
  • Использовать CSS-селекторы для простых и быстрых поисков.
  • XPath применять только при необходимости сложной навигации по DOM или поиска по тексту.
  • Минимизировать использование индексов (nth-child) на динамических страницах.
  • Всегда комбинировать селекторы с ожиданием элементов для надежности тестов.

Селекторы и методы поиска элементов в WebdriverIO формируют основу эффективного тестирования интерфейсов. Грамотное использование CSS, XPath и атрибутных локаторов позволяет создавать стабильные, масштабируемые и легко поддерживаемые тестовые сценарии.

Оглавление