Работа с сложными структурами

WebdriverIO предоставляет мощные инструменты для автоматизации тестирования веб-приложений. Одной из важнейших задач является работа с элементами, которые имеют сложную структуру. В таких случаях стандартные методы поиска элементов через $('#elementId') могут быть недостаточны. Для работы с такими элементами WebdriverIO предлагает различные подходы и механизмы.

Поиск элементов с использованием сложных CSS-селекторов

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

Пример:

const button = $('#form > .submit-btn');

Этот селектор находит кнопку с классом .submit-btn, которая является дочерним элементом для формы.

Кроме того, можно использовать атрибуты элементов для точного поиска. Например, чтобы найти элемент с определённым значением атрибута:

const link = $('a[href="https://example.com"]');

Этот код находит ссылку, которая ведет на указанный URL.

Работа с таблицами и списками

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

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

const rows = $$('table tr');

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

Чтобы найти конкретное значение в таблице, можно использовать XPath. Например, для поиска ячейки с определённым текстом:

const cell = $('//table//td[contains(text(), "Необходимый текст")]');

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

Взаимодействие с элементами внутри модальных окон

Модальные окна часто создаются с использованием div элементов, которые могут быть скрытыми или динамически загружаться через JavaScript. В WebdriverIO есть методы для работы с такими окнами, включая ожидание видимости и активное взаимодействие с элементами внутри окна.

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

const modal = $('#modal');
modal.waitForDisplayed();

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

const closeButton = $('#modal .close-btn');
closeButton.click();

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

Работы с элементами, скрытыми за слоями

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

Один из подходов — использование метода waitForClickable(), который не только проверяет видимость элемента, но и его доступность для клика:

const hiddenButton = $('#hiddenButton');
hiddenButton.waitForClickable();
hiddenButton.click();

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

Работа с динамическими элементами и ожидания

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

Основные методы ожидания:

  • waitForExist() — ожидание, пока элемент появится в DOM.
  • waitForDisplayed() — ожидание, пока элемент станет видимым.
  • waitForClickable() — ожидание, пока элемент станет доступным для клика.

Пример:

const dynamicElement = $('#dynamicElement');
dynamicElement.waitForExist();
dynamicElement.waitForDisplayed();

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

browser.waitUntil(() => $('#element').isDisplayed(), {
  timeout: 5000,
  timeoutMsg: 'Элемент не стал видимым за 5 секунд',
});

Этот код ожидает, пока элемент не станет видимым в течение 5 секунд.

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

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

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

const item = $('//div[contains(text(), "Нужный текст")]');

Кроме того, XPath позволяет искать элементы, которые имеют определённые отношения с другими элементами. Например, чтобы найти кнопку, расположенную рядом с текстом:

const button = $('//div[text()="Нужный текст"]/following-sibling::button');

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

Работа с фреймами и iframe

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

Для переключения на iframe можно использовать метод .frame():

browser.frame('#iframe');

После этого взаимодействие с элементами внутри iframe происходит так же, как и с обычными элементами на странице:

const iframeButton = $('#buttonInsideIframe');
iframeButton.click();

Чтобы вернуться обратно в основной документ, можно использовать .frame() с параметром null:

browser.frame(null);

Сложные взаимодействия с элементами

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

Для перетаскивания элементов WebdriverIO предоставляет метод dragAndDrop():

const source = $('#source');
const target = $('#target');
source.dragAndDrop(target);

Для работы с клавишами можно использовать метод keys(), который позволяет отправлять клавиатурные события в любой элемент:

const inputField = $('#input');
inputField.setValue('Test');
inputField.keys(['Enter']);

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

Заключение

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

Оглавление