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

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

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

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

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

  1. Ожидание видимости элемента: await page.waitForSelector('selector', { state: 'visible' });

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

  2. Ожидание исчезновения элемента: await page.waitForSelector('selector', { state: 'hidden' });

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

  3. Ожидание загрузки ресурса: await page.waitForResponse(url => url.includes('api/data'))

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

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

Работа с элементами, изменяющимися на странице

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

Пример:

const modal = await page.locator('.modal');
await expect(modal).toBeVisible();
await modal.click();
await expect(modal).toBeHidden();

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

Ожидание завершения асинхронных операций

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

Для этого можно использовать page.waitForResponse, page.waitForEvent или locator.waitFor. Например, если на странице выполняется запрос, который изменяет DOM, можно дождаться завершения запроса:

await page.waitForResponse('**/api/endpoint');
await expect(page.locator('.dynamic-element')).toBeVisible();

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

Работа с элементами, зависящими от JavaScript

Некоторые элементы на странице могут быть доступны только после выполнения JavaScript-скриптов. Такие элементы могут изменяться в зависимости от состояния страницы или других факторов. Для их обработки Playwright использует возможность взаимодействия с JavaScript-обработчиками событий.

Например, для работы с элементами, которые появляются или изменяются в ответ на действия пользователя (клики, наведения), можно использовать методы locator.click(), locator.hover() и другие. Эти методы могут быть полезны для взаимодействия с динамически обновляемыми частями страницы:

await page.locator('#dropdown').click();
await page.locator('.dropdown-menu').waitFor({ state: 'visible' });

Этот код открывает выпадающее меню и ждёт, пока оно станет видимым.

Ожидание появления или исчезновения элементов в цикле

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

Пример:

for (let i = 0; i < 5; i++) {
  await page.waitForSelector('.dynamic-element', { timeout: 5000 });
  const element = page.locator('.dynamic-element');
  await element.click();
  await expect(element).toBeHidden();
}

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

Обработка анимаций и таймаутов

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

await page.locator('.animated-element').waitFor({ state: 'hidden', timeout: 10000 });

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

Использование ожиданий с фильтрацией

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

Пример:

await page.waitForSelector('button', { state: 'visible' });
await page.locator('button:has-text("Submit")').click();

Этот код ожидает появления видимой кнопки и затем кликает на неё, если текст на кнопке соответствует “Submit”.

Заключение

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

Оглавление