Question

尽管有人问过几次，但一直在与木偶戏打交道，却看不到这个问题的答案。

预期结果： 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()

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

谁能告诉我我在哪里错了？

谢谢！

Answer 1

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

Answer 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()

木偶：单击标签，等待链接中的新页面加载，然后截屏

2 个答案: