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('頁面加載成功');
}