Ожидание конкретных событий

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

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

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

  • waitForSelector — ожидание появления элемента на странице.
  • waitForEvent — ожидание конкретного события, связанного с элементом или страницей.
  • waitForLoadState — ожидание изменений состояния загрузки страницы.
  • waitForResponse и waitForRequest — ожидание сетевых запросов.

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

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

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

Пример:

await page.waitForSelector('#login-button');
await page.click('#login-button');

В данном примере тест будет ожидать появления элемента с идентификатором #login-button перед тем, как выполнить клик по нему.

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

await page.waitForSelector('#login-button', { timeout: 5000 });

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

Ожидание событий страницы

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

Пример:

await page.waitForEvent('load');

Этот метод будет ожидать завершения загрузки страницы. Он полезен, когда необходимо удостовериться, что страница полностью загружена перед выполнением последующих действий. Также можно ожидать другие события, такие как domcontentloaded, popup, close и другие.

Для ожидания сетевых запросов можно использовать событие response или request:

const [response] = await Promise.all([
  page.waitForResponse('**/api/login'),
  page.click('#login-button')
]);

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

Ожидание изменения состояния элемента

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

waitForSelector с опцией visibility

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

Пример:

await page.waitForSelector('.notification', { visible: true });

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

waitForFunction

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

Пример:

await page.waitForFunction(() => document.querySelector('.loading').style.display === 'none');

Этот код будет ожидать, пока элемент с классом .loading не исчезнет с экрана (его стиль display изменится на none).

Ожидание сетевых запросов

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

waitForRequest

Метод waitForRequest позволяет дождаться определённого запроса, который отправляется на сервер.

Пример:

await page.waitForRequest(request => request.url().includes('/api/data'));

Этот код будет ожидать, что на страницу будет отправлен запрос, который содержит в своём URL /api/data.

waitForResponse

Метод waitForResponse позволяет ожидать ответа на запрос, отправленный на сервер.

Пример:

const response = await page.waitForResponse('**/api/data');

Этот код будет ожидать получения ответа от сервера на запрос, содержащий /api/data.

Ожидание загрузки страницы

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

Пример:

await page.waitForLoadState('domcontentloaded');

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

Метод waitForLoadState поддерживает следующие состояния:

  • 'load' — страница полностью загружена.
  • 'domcontentloaded' — только DOM загружен, но внешние ресурсы могут ещё загружаться.
  • 'networkidle' — страница завершила все сетевые запросы.

Ожидание выполнения JavaScript

Для того чтобы дождаться завершения выполнения JavaScript на странице, можно использовать метод waitForFunction. Он позволяет задать JavaScript-функцию, которая будет проверять, когда нужное условие станет истинным.

Пример:

await page.waitForFunction('window.someVariable === "done"');

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

Рекомендации по использованию

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

  2. Обработка ошибок: Всегда стоит обрабатывать возможные исключения, которые могут быть выброшены в случае, если ожидаемое событие не произошло вовремя. Использование подхода try-catch может помочь управлять ошибками и давать информативные сообщения в случае сбоя.

  3. Параллельность запросов: В некоторых случаях может быть полезно ожидать несколько событий одновременно, используя Promise.all. Это позволяет ускорить выполнение тестов, например, при ожидании нескольких сетевых запросов.

await Promise.all([
  page.waitForResponse('**/api/login'),
  page.waitForResponse('**/api/user-data')
]);

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

Оглавление