Puppeteer--等待加载

我们把等待加载的 API 分为三类进行介绍。

 

一、加载导航页面

page.goto：打开新页面

page.goBack ：回退到上一个页面

page.goForward ：前进到下一个页面

page.reload ：重新加载页面

page.waitForNavigation：等待页面跳转

Pupeeteer 中的基本上所有的操作都是异步的，以上几个 API 都涉及到关于打开一个页面，什么情况下才能判断这个函数执行完毕呢，这些函数都提供了两个参数 waitUtil 和 timeout。

waitUtil 表示直到什么出现就算执行完毕；

timeout 表示如果超过这个时间还没有结束就抛出异常。

 

使用示例

await page.goto('https://www.baidu.com', {
   timeout: 30 * 1000,
   waitUntil: [
       'load',                       //等待 “load” 事件触发
       'domcontentloaded',  //等待 “domcontentloaded” 事件触发
       'networkidle0',          //在 500ms 内没有任何网络连接
       'networkidle2'           //在 500ms 内网络连接个数不超过 2 个
   ]
});

以上 waitUtil 有四个事件，业务可以根据需求来设置其中一个或者多个触发才以为结束，networkidle0 和 networkidle2 中的 500ms 对时间性能要求高的用户来说，还是有点长的

 

二、等待元素、请求、响应

page.waitForXPath：等待 xPath 对应的元素出现，返回对应的 ElementHandle 实例

page.waitForSelector ：等待选择器对应的元素出现，返回对应的 ElementHandle 实例

page.waitForResponse ：等待某个响应结束，返回 Response 实例

page.waitForRequest：等待某个请求出现，返回 Request 实例

使用示例

await page.waitForXPath('//img');
await page.waitForSelector('#uniqueId');
await page.waitForResponse('https://d.youdata.netease.com/api/dash/hello');
await page.waitForRequest('https://d.youdata.netease.com/api/dash/hello');

 

三、自定义等待

如果上面提供的等待方式都不能满足我们的需求，puppeteer 还提供我们提供两个函数：

page.waitForFunction：等待在页面中自定义函数的执行结果，返回 JsHandle 实例

page.waitFor：设置选择器 或者 方法 或者 等待时间

 

使用示例：

await page.goto(url, { 
    timeout: 120000, 
    waitUntil: 'networkidle2' 
});
//可以在页面中定义自己认为加载完的事件，在合适的时间点我们将该事件设置为 true
//以下是我们项目在触发截图时的判断逻辑，如果 renderdone 出现且为 true 那么就截图，如果是 Object，说明页面加载出错了，我们可以捕获该异常进行提示
let renderdoneHandle = await page.waitForFunction('window.renderdone', {
    polling: 120
});
const renderdone = await renderdoneHandle.jsonValue();
if (typeof renderdone === 'object') {
    console.log(`加载页面失败：报表${renderdone.componentId}出错 -- ${renderdone.message}`);
}else{
    console.log('页面加载成功');
}