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

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

Что такое динамические элементы?

Динамическими элементами называют те элементы, которые могут изменяться в процессе работы страницы. Это могут быть как новые элементы, так и уже существующие, но с изменённым состоянием. Примеры таких элементов включают:

  • Загружаемые списки или таблицы, данные в которых могут обновляться.
  • Элементы, которые становятся видимыми после выполнения действий (например, кнопки или всплывающие окна).
  • Элементы, чьи атрибуты могут меняться (например, классы или id).

Стратегии работы с динамическими элементами

Для успешной работы с динамическими элементами WebdriverIO предлагает несколько стратегий:

1. Ожидания

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

  • Имплицитные ожидания (Implicit Waits) — настройка WebdriverIO на определённое время ожидания поиска элемента перед тем, как выбросить исключение, если элемент не найден.
  • Явные ожидания (Explicit Waits) — используется для ожидания конкретного состояния элемента (например, когда он становится видимым или активным). Это более гибкий и точный подход.

Пример использования явного ожидания:

const elem = await $('selector');
await elem.waitForDisplayed({ timeout: 5000 });

Этот код ожидает, пока элемент с указанным селектором не станет видимым в течение 5 секунд. Если элемент не появляется в течение этого времени, будет выброшено исключение.

2. Работа с изменяющимися атрибутами

Для динамически изменяющихся элементов часто нужно отслеживать изменения их атрибутов, например, class, id или style. WebdriverIO позволяет взаимодействовать с атрибутами через метод .getAttribute().

Пример:

const elem = await $('#dynamic-element');
let className = await elem.getAttribute('class');

Если элемент изменяет класс после какого-либо действия, можно использовать этот метод для отслеживания изменений и ожидания изменения состояния элемента.

3. Работа с элементами, появляющимися и исчезающими

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

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

const elem = await $('#dynamic-element');
await elem.waitForExist({ timeout: 5000, reverse: false });

Здесь reverse: false означает, что мы ожидаем появления элемента, а если бы установили reverse: true, то ждали бы его исчезновения.

4. Ожидание анимаций

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

Для этого WebdriverIO предоставляет методы для ожидания завершения анимаций. Например, можно использовать методы .waitForDisplayed() с тайм-аутами или проверку на наличие определённых классов, которые могут указывать на окончание анимации.

Пример:

const elem = await $('#animated-element');
await elem.waitForDisplayed({ timeout: 7000 });

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

Применение динамических элементов на примере

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

Пример теста:

const dropdown = await $('#dropdown');
await dropdown.selectByVisibleText('Option 1');

// Ожидаем появления поля, которое зависит от выбора
const dynamicField = await $('#dynamic-field');
await dynamicField.waitForDisplayed({ timeout: 5000 });
await dynamicField.setValue('Test Value');

Здесь тест сначала выбирает опцию из выпадающего списка, а затем ждёт появления динамического поля для ввода, после чего вводит в него значение.

Особенности работы с динамическими таблицами

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

Пример работы с динамическими таблицами:

const table = await $('#dynamic-table');
const rows = await table.$$('tr');

for (let row of rows) {
    const cell = await row.$('td:nth-child(2)');
    const cellText = await cell.getText();
    if (cellText === 'Desired Text') {
        await row.$('button').click();
        break;
    }
}

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

Заключение

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

Оглавление