Puppeteer：点击一个标签，等待新页面从链接加载，然后截图

Posted 2023-02-24

【中文标题】Puppeteer：点击一个标签，等待新页面从链接加载，然后截图

【英文标题】：Puppeteer: click a tag, wait for new page from link to load, then take screenshot

【发布时间】：2019-06-11 02:04:15

【问题描述】：

与 puppeteer 混在一起，但在任何地方都没有看到这个问题的答案，尽管它已经被问过几次了：

预期结果： 1.通过类名点击标签 2.等待新页面（链接在标签）完成加载 3. 新页面截图证明这个过程已经成功了

这是我的代码：

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

await page.setViewport(
  width: 800,
  height: 600
)

await page.goto('https://www.example.com/')

await page.click('.targeted_class_with_a_tag')
await page.waitForNavigation( waitUntil: 'networkidle2' )

await page.screenshot(
  path: 'mouse_click.png'
)
await browser.close()

我希望屏幕截图包含通过单击标记导航到的页面。相反，它超时。如果我删除 waitForNavigation，它只会截取加载的初始页面。

谁能告诉我这里哪里出错了？

谢谢！

【问题讨论】：

虽然该示例无法真正重现，但请确保在单击触发导航的内容时使用Promise.all 模式，如in this answer 和this GH issue 所述。

【参考方案1】：

尝试在新页面上等待选择器：await page.waitForSelector('.someThingOnThisPage'); 代替 waitForNavigation

【讨论】：

这仍然超时等待我在新页面上分配给它的任何选择器。也许我不完全了解无头浏览器的工作原理，即使独立于 puppeteer。我基本上只是试图自动化单击链接标签并通过截屏确认新页面已加载的过程。使用 puppeteer/headless 浏览器可以实现这种行为吗？

【参考方案2】：

正如@ggorlen 在下面的评论中指出的那样，您应该使用Promise.all 模式。这是您的代码进行了适当的更改：

const puppeteer = require('puppeteer');

const browser = await puppeteer.launch()
const page = await browser.newPage()

await page.setViewport(
  width: 800,
  height: 600
)

await page.goto('https://www.example.com/')

const linkSelector = '.targeted_class_with_a_tag';
await page.waitForSelector(linkSelector);
await Promise.all([
    page.click(linkSelector),
    page.waitForNavigation( waitUntil: 'networkidle2' )
]);

await page.screenshot(
  path: 'mouse_click.png'
)
await browser.close()