Ожидание функций и условий

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

Важность ожидания

Без должного использования ожиданий тесты могут стать ненадежными из-за различных факторов, таких как:

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

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

Встроенные механизмы ожидания в Playwright

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

Ожидание с помощью методов, основанных на времени

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

await page.waitForTimeout(5000);  // Ждёт 5 секунд

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

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

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

const button = page.locator('button#submit');
await button.waitFor({ state: 'visible' });  // Ожидание появления кнопки

Метод waitFor() поддерживает несколько состояний:

  • ‘attached’ — элемент прикреплен к DOM.
  • ‘detached’ — элемент был удален из DOM.
  • ‘visible’ — элемент видим (включает как видимость на экране, так и доступность для пользователя).
  • ‘hidden’ — элемент скрыт, как визуально, так и в DOM.

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

Не всегда требуется дождаться появления элемента — иногда необходимо убедиться, что элемент исчез из DOM. В таких случаях можно использовать locator.waitFor() с состоянием 'detached' или 'hidden'.

await page.locator('#loadingSpinner').waitFor({ state: 'detached' });  // Ожидание исчезновения элемента

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

Ожидание условий

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

const message = page.locator('#message');
await expect(message).toHaveText('Загрузка завершена');

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

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

Помимо ожидания видимости или отсутствия элементов, Playwright позволяет ожидать различных состояний элементов с помощью метода waitForSelector. Например, можно ожидать, что элемент станет активным или нажимаемым.

await page.locator('button#submit').waitFor({ state: 'enabled' });  // Ожидание активации кнопки

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

  • ‘enabled’ — элемент доступен для взаимодействия.
  • ‘disabled’ — элемент недоступен для взаимодействия.
  • ‘visible’ — элемент видим.

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

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

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

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

Метод waitForResponse() ожидает завершения первого ответа от сервера, который совпадает с переданным URL или паттерном.

Ожидание завершения анимаций

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

Playwright предоставляет возможность ожидать завершения анимаций через метод waitForTimeout(), если известно время продолжительности анимации.

Однако более надежным методом будет ожидание через locator.waitFor() с состоянием 'hidden' или 'visible', в зависимости от того, что именно нужно проверить.

await page.locator('#modal').waitFor({ state: 'visible' });  // Ожидание завершения анимации открытия модального окна

Использование условных ожиданий

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

Playwright поддерживает такие проверки через Promise.all(), что позволяет комбинировать несколько ожиданий:

await Promise.all([
  page.locator('#header').waitFor({ state: 'visible' }),
  page.locator('#content').waitFor({ state: 'visible' })
]);

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

Параллельные ожидания и тайм-ауты

По умолчанию Playwright использует тайм-ауты для ожиданий (например, 30 секунд), после чего тест завершится с ошибкой, если условие не было выполнено. Этот тайм-аут можно настроить через параметр timeout.

await page.locator('#submit').waitFor({ state: 'enabled', timeout: 5000 });

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

Заключение

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

Оглавление