JS Puppeteer等待页面加载完成

Question

在看完这个使用puppeteer的youtube视频后，我受到启发，想要尝试一下。但是我选择的起始项目似乎不太合适。

const puppeteer = require('puppeteer')
;(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.goto('http://www.produktresume.dk/AppBuilder/search?page=0')
  page.once('load', () => {
    const drugs = page
      .evaluate(() =>
        [...document.querySelectorAll('div.entity-link')].map(item => item)
      )
      .catch(err => console.log(err))
    console.log(drugs[0])
  })

  await browser.close()
})()

我在网上搜索了很多并失去了我尝试过的不同东西的轨迹...

我的问题是我没有在页面加载时调用 evaluate 方法。

- Norfeldt

---

page.evaluate()是一个async（Promise）方法吗？如果是的话，在page.once('load')事件处理程序的上下文中，这可能是问题的根源。 - woozyking

在 page.goto 前添加 page.once，并在调用 page.evaluate 时添加 await。 - kip

这个问题的答案是否对您有帮助？Puppeteer等待所有图像加载完成后再截图 - MathKimRobin

@MathKimRobin 我已经标记了一个答案作为解决方案。 - Norfeldt

是的，我知道，但更多的是为了向未来的读者表明这个问题可能是 https://dev59.com/WFYO5IYBdhLWcg3wN_Cf 的重复，并且他们可以在那里获得补充信息。 - MathKimRobin

Answer 1

完全没有必要使用page.on('load')来判断页面是否已加载。

您可以使用以下方法：

• .goto调用上的waitUntil选项。
• 针对特定选择器的waitForSelector函数。

用法如下：

await page.goto('http://www.produktresume.dk/AppBuilder/search?page=0', {waitUntil: 'networkidle0'});
await page.waitForSelector("#wrapper"); // Found on the page source code, wait for this to appear
// the rest is just as usual
const drugs = await page
.evaluate(() =>
 [...document.querySelectorAll('div.entity-link')].map(item => item)
)
.catch(err => console.log(err))
console.log(drugs[0])

请确保在.evaluate调用中使用await。

- Md. Abu Taher