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

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

Ожидание элементов с помощью waitForSelector

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

await page.waitForSelector('.login-button', { state: 'visible' });

В данном примере Playwright будет ожидать, пока кнопка с классом .login-button не станет видимой. Метод принимает два обязательных параметра:

  1. Селектор — строка CSS-селектора, описывающая целевой элемент.

  2. Опции — объект с дополнительными настройками, такими как:

    • state: задает состояние элемента, которое должно быть выполнено для того, чтобы ожидание считалось завершенным. Возможные значения:

      • attached — элемент прикреплен к DOM.
      • detached — элемент удален из DOM.
      • visible — элемент видим (его размеры не равны 0 и он не скрыт стилями).
      • hidden — элемент скрыт (например, через display: none).

Примечание: если элемент не появляется в заданное время, то возникает ошибка TimeoutError. Для предотвращения этого можно использовать параметр timeout для задания времени ожидания в миллисекундах.

await page.waitForSelector('.error-message', { state: 'visible', timeout: 5000 });

Ожидание событий с помощью waitForEvent

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

await page.waitForEvent('load');

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

  • ‘load’ — событие загрузки страницы.
  • ‘domcontentloaded’ — событие, срабатывающее после того, как DOM-дерево страницы было построено, но ресурсы, такие как изображения и стили, еще не загружены.
  • ‘networkidle’ — событие, которое срабатывает, когда количество сетевых запросов становится равным нулю.
await page.waitForEvent('networkidle', { timeout: 10000 });

Ожидание изменения состояния с помощью waitForFunction

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

await page.waitForFunction(() => document.querySelector('#status').textContent === 'loaded');

Этот код будет ожидать, пока текстовое содержимое элемента с id #status не изменится на “loaded”. В отличие от других методов ожидания, waitForFunction может использовать JavaScript для проверки более сложных условий.

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

await page.waitForFunction(() => document.readyState === 'complete', { timeout: 5000 });

Ожидание с использованием waitForTimeout

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

await page.waitForTimeout(3000);

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

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

Ожидания с использованием waitForResponse и waitForRequest

Иногда тесты требуют ожидания определенных сетевых запросов или ответов от сервера. Для таких случаев Playwright предоставляет методы waitForResponse и waitForRequest.

  • waitForRequest: ожидает, когда отправится определенный сетевой запрос.
await page.waitForRequest('**/api/user/login');
  • waitForResponse: ожидает получения ответа на запрос.
await page.waitForResponse(response => response.url().includes('/api/user/login') && response.status() === 200);

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

Таймауты и ошибки

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

await page.waitForSelector('.button', { timeout: 2000 }); // Ожидание 2 секунды

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

Практические рекомендации

  1. Использовать явные ожидания всегда, когда это возможно: Явные ожидания помогают избежать ложных срабатываний тестов из-за состояния страницы или элементов, которые еще не готовы.
  2. Избегать использования waitForTimeout без необходимости: Этот метод хорош для тестов, которые требуют конкретных задержек, но может увеличить время выполнения тестов без реальной пользы.
  3. Понимать важность параметра timeout: Установка правильного времени ожидания помогает избежать зависания тестов и упрощает диагностику проблем.
  4. Проверка событий и состояний: Лучше использовать методы ожидания с событиями или состояниями элементов, так как они более динамичны и быстрее реагируют на изменения.

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

Оглавление