waitForFunction

waitForFunction в Puppeteer: Ожидание выполнения пользовательских функций

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

page.waitForFunction(function(page) { ... }, options);

  • function(page) — это функция, которая будет выполняться на странице в контексте браузера. Она должна возвращать значение, которое будет проверяться. Если функция возвращает истинное значение (например, true или значение, которое при приведении к булевому типу будет считаться истиной), метод завершит выполнение и перейдет к следующему шагу.

  • options (необязательный параметр) — объект с дополнительными опциями:

    • timeout — максимальное время ожидания в миллисекундах. Если функция не выполнится за указанное время, будет выброшена ошибка.
    • polling — интервал опроса состояния функции. Может быть задан значением времени (в миллисекундах) или строкой “raf”, что означает использование requestAnimationFrame.

Пример использования

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

Пример: ожидание, пока значение переменной на странице не станет истинным. 

await page.waitForFunction(() => window.someVariable === true);

В этом примере скрипт будет ожидать, пока глобальная переменная someVariable не станет равной true. После этого выполнение продолжится.

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

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

Пример: ожидание завершения AJAX-запроса. 

await page.waitForFunction(() => {
  return window.ajaxComplete === true;
});

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

Применение параметра timeout

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

await page.waitForFunction(
  () => document.querySelector(&
  { timeout: 5000 }
);

Этот код будет ожидать, пока текст в элементе с id element не станет равным “Loaded”. Если ожидание займет больше 5 секунд, будет выброшена ошибка.

Использование параметра polling

Метод waitForFunction поддерживает параметр polling, который позволяет настроить интервал между проверками состояния функции. Параметр может быть задан в миллисекундах или строкой “raf”, что означает использование requestAnimationFrame для синхронизации с анимациями браузера.

Пример: использование polling с заданным интервалом времени. 

await page.waitForFunction(
  () => document.querySelector('#element').classList.contains('loaded'),
  { polling: 100 }
);

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

Важные моменты

  1. Асинхронность функции: waitForFunction не блокирует выполнение страницы, пока не выполнится указанная функция. В случае долгих процессов можно настроить таймаут, чтобы избежать бесконечного ожидания.
  2. Ошибки: Если функция не выполнится в заданный промежуток времени или вернет ложное значение, будет выброшена ошибка. Это может быть полезно для автоматизированных тестов, где важно точно отлавливать ошибки.
  3. Влияние на производительность: Частое использование waitForFunction может повлиять на производительность тестов, так как приходится постоянно опрашивать страницу. Чтобы минимизировать нагрузку, рекомендуется использовать методы, которые зависят от конкретных событий (например, waitForSelector, waitForNavigation), когда это возможно.

Комбинирование с другими методами ожидания

waitForFunction может быть комбинирован с другими методами ожидания, такими как waitForSelector, что дает большую гибкость при тестировании.

Пример: ожидание завершения AJAX-запроса и появления элемента на странице. 

await page.waitForFunction(() => window.ajaxComplete === true);
await page.waitForSelector('#content');

В этом примере сначала ожидается завершение AJAX-запроса, а затем проверяется наличие элемента на странице.

Заключение

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

Оглавление