Ожидание загрузки: load, domcontentloaded, networkidle

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

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

Событие load срабатывает, когда вся страница, включая все ресурсы (изображения, стили, скрипты и т.д.), полностью загружена. Этот метод является самым строгим в плане проверки загрузки, так как ждёт завершения всех сетевых запросов, включая те, что не касаются непосредственно самого HTML-документа. Использование load полезно в случаях, когда необходимо убедиться, что все ресурсы, включая изображения и другие большие объекты, загружены и готовы к отображению.

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

await page.goto(&


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




domcontentloaded — Ожидание загрузки DOM




Событие domcontentloaded срабатывает, когда весь
HTML-документ был полностью загружен и разобран браузером, но ресурсы,
такие как изображения, стили и скрипты, могут быть ещё не загружены.
Этот метод часто используется, когда нужно работать с элементами DOM
страницы, не ожидая завершения загрузки всех внешних ресурсов.




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



await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });



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




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




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



    

  • 
networkidle0 — Срабатывает, когда нет активных сетевых
запросов в течение 500 мс.

    • 

  • 
networkidle2 — Срабатывает, когда не более двух активных
сетевых запросов остаются в процессе.

    • 




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




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



await page.goto('https://example.com', { waitUntil: 'networkidle0' });



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




Сравнение методов ожидания













Метод


Когда срабатывает


Использование








load


Когда загружены все ресурсы, включая стили, скрипты и изображения


Когда важна полная загрузка всех ресурсов страницы.






domcontentloaded


Когда HTML-документ загружен и разобран, но ресурсы могут быть ещё не
загружены


Когда необходимо работать с DOM, но не критична загрузка изображений или
стилей.






networkidle


Когда не остаётся активных сетевых запросов


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








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




Рекомендации по выбору метода



    

  1. 

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

    

    2. 

  2. 

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

    

    3. 

  3. 

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

    

    4. 




Применение в реальных тестах




Применение правильного метода ожидания позволяет избежать ошибок и
обеспечить надёжность автоматических тестов. Например, при тестировании
форм с асинхронными запросами или взаимодействием с API стоит
использовать networkidle, чтобы убедиться, что все запросы
завершены и данные отображены на странице.




Пример сценария, когда используется networkidle:



await page.goto('https://example.com/products');
await page.click('#load-more-button');
await page.waitForNavigation({ waitUntil: 'networkidle0' });
const productCount = await page.$$eval('.product', products => products.length);
console.log(`Загружено продуктов: ${productCount}`);



Этот пример гарантирует, что все данные о продуктах были загружены после
клика на кнопку «Загрузить ещё», а страница успела завершить все
асинхронные запросы перед тем, как мы подсчитываем количество продуктов.




Заключение




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