Определение успешной загрузки страницы

Что такое успешная загрузка страницы?

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

Стандартный подход к ожиданию загрузки страницы

Puppeteer предоставляет методы для явного ожидания загрузки страницы, таких как waitForSelector(), waitForNavigation(), а также встроенные механизмы проверки статуса ответа от сервера.

  1. Ожидание завершения навигации

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

await page.goto(&
await page.waitForNavigation({ waitUntil: 'load' });

Здесь waitUntil: ‘load’ указывает Puppeteer ожидать загрузки всех основных ресурсов страницы, включая HTML, стили и изображения. Варианты для waitUntil:

  • ‘load’ — страница считается загруженной, когда все ресурсы страницы загружены.
  • ‘domcontentloaded’ — страница считается загруженной, когда DOM полностью загружен, но другие ресурсы, такие как изображения и стили, могут быть ещё не загружены.
  • ‘networkidle0’ — страница считается загруженной, когда в течение 500 мс не происходит сетевых запросов.
  • ‘networkidle2’ — страница считается загруженной, когда в течение 500 мс не происходит более двух активных сетевых соединений.

Для тестирования обычно используется вариант waitUntil: ‘load’, чтобы гарантировать полную загрузку всех компонентов страницы.

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

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

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

Этот метод гарантирует, что скрипт продолжит выполнение только после того, как элемент с id login-button появится на странице.

  1. Ожидание загрузки скриптов

Если тестирование требует того, чтобы JavaScript-код на странице был полностью выполнен, то стоит использовать page.waitForFunction(). Этот метод позволяет ожидать выполнения произвольного JavaScript-кода на странице, например, чтобы проверить, были ли загружены все динамические элементы. 

await page.waitForFunction('document.querySelector("button#submit").disabled === false');

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

Проверка успешного ответа от сервера

Одним из способов удостовериться в успешной загрузке страницы является проверка состояния ответа от сервера. Puppeteer позволяет отслеживать сетевые запросы через события на объекте page. Чтобы удостовериться, что страница была загружена корректно, можно отслеживать ответ сервера на HTTP-запросы. 

page.on('response', response => {
  if (response.status() !== 200) {
 console.error(`Error loading page: ${response.status()} ${response.url()}`);
  }
});

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

Преимущества использования различных методов

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

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

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

Сетевые проверки через page.on(‘response’) позволяют отслеживать качество и статус всех запросов, что полезно для диагностики проблем с загрузкой ресурсов.

Особенности работы с асинхронностью

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

await page.goto('https://example.com');
await page.waitForSelector('.content');
await page.waitForFunction('window.document.readyState === "complete"');

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

Обработка ошибок при загрузке страницы

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

Пример обработки ошибок: 

try {
  await page.goto('https://example.com', { waitUntil: 'load' });
  await page.waitForSelector('.content');
} catch (error) {
  console.error('Error during page load:', error);
}

Такой подход помогает отловить ошибки и корректно обработать их, чтобы тесты не завершались с ошибками без подробной информации.

Заключение

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

Оглавление