如何在 Puppeteer 中重新加载页面？答案

【问题标题】：How to reload page in Puppeteer?如何在 Puppeteer 中重新加载页面？
【发布时间】：2019-08-09 17:49:40
【问题描述】：

每当页面无法正确加载或遇到问题时，我想重新加载该页面。我试过page.reload()，但它不起作用。

for(const sect of sections ){

            // Now collect all the URLs
            const appUrls = await page.$$eval('div.main > ul.app-list > li > div.app-info a.app-info-icon', links => links.map(link => link.href));

            // Visit each URL one by one and collect the data
            for (let appUrl of appUrls) {
                var count = i++;
                try{
                    await page.goto(appUrl);
                    const appName = await page.$eval('div.det-name-int', div => div.innerText.trim());
                    console.log('\n' + count);
                    console.log(appName);
                } catch(e){
                    console.log('\n' + count);
                    console.log('ERROR', e);
                    await page.reload();
                }

            }

        }

它给了我这个错误：

    ERROR Error: Error: failed to find element matching selector "div.det-name-int"
    at ElementHandle.$eval (C:\Users\Administrator\node_modules\puppeteer\lib\JS
Handle.js:418:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at ElementHandle.<anonymous> (C:\Users\Administrator\node_modules\puppeteer\
lib\helper.js:108:27)
    at DOMWorld.$eval (C:\Users\Administrator\node_modules\puppeteer\lib\DOMWorl
d.js:149:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at Frame.<anonymous> (C:\Users\Administrator\node_modules\puppeteer\lib\help
er.js:108:27)
    at Page.$eval (C:\Users\Administrator\node_modules\puppeteer\lib\Page.js:329
:29)
    at Page.<anonymous> (C:\Users\Administrator\node_modules\puppeteer\lib\helpe
r.js:109:23)
    at main (C:\Users\Administrator\Desktop\webscrape\text.js:35:43)
    at process._tickCallback (internal/process/next_tick.js:68:7)

部分链接无法成功加载。当我手动刷新这些页面时，它可以工作。所以我希望有一个函数或者方法可以帮助我在出现错误时自动重新加载我的页面。

【问题讨论】：

它是否抛出任何错误？如果是这样，那是什么？ page.reload 是一个承诺，你没有处理它。尝试使用它，看看它是否被执行
好像不行？？究竟是什么意思？
@Sammy 页面加载错误
能否附上截图？加载错误有很多种。 HTTP 状态码是什么？也许您正在尝试一些非法的东西，如被阻止的站点或远程服务器已关闭。我们需要有关错误的更多信息
@Sammy 我在问题中包含了错误。

标签： javascript node.js chromium puppeteer

【解决方案1】：

您始终可以通过 DOM 重新加载页面，如下所示：

await page.evaluate(() => {
   location.reload(true)
})

或者这里是lot of ways，您可以如何通过 DOM 使用浏览器 JS 重新加载页面

此外，您还可以导航您的 puppeteer back and forward。像这样：

await page.goBack();
await page.goForward();

【讨论】：

【解决方案2】：

所以在 cmets 之后，下面这行会出错。

ERROR Error: Error: failed to find element matching selector "div.det-name-int"

因为 Puppetetteer 有一个浏览器回调。当它找到元素并调用回调时，如果元素不存在则抛出错误。

此外，页面会重新加载。在那之后你什么都不做。如果你想在那之后获取图像。使用

await page.$eval('div.det-name-int', div => div.innerText.trim());

重新加载后。或者你可以有一个while循环来不断检查元素是否存在。如果没有，则刷新页面并再次检查。这可确保您始终拥有内容。

但是，如果您的内容是动态生成的，并且在您阅读页面时不是 DOM 的一部分，那么您的代码将变得毫无用处。您可能需要添加一个超时，然后在 dom 中搜索该元素。

【讨论】：

【解决方案3】：

我设法使用 while 循环来解决它。

for (let appUrl of appUrls) {
    var count = i++;

    while(true){
        try{

            await page.goto(appUrl);

            const appName = await page.$eval('div.det-name-int', div => div.innerText.trim());

            console.log('\n' + count);
            console.log('Name: ' , appName);

            break;

            } catch(e){
              console.log('\n' + count);
              console.log('ERROR');
              await page.reload(appUrl);

              continue;
            }

}

【讨论】：

尽量避免使用while(true)语句，因为如果你遇到一个根本没有链接的页面，那么你将把主线程锁在一个无限循环中。

【解决方案4】：

这对我有用：

await page.reload({ waitUntil: ["networkidle0", "domcontentloaded"] });

有关详细信息，请参阅 Puppeteer 文档：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagereloadoptions

【讨论】：