表单提交后 Puppeteer 等待页面加载

Question

我使用以下代码提交表单，我希望 Puppeteer 在表单提交后等待页面加载。

await page.click("button[type=submit]");

//how to wait until the new page loads before taking screenshot?
// i don't want this:
// await page.waitFor(1*1000);  //← unwanted workaround
await page.screenshot({path: 'example.png'});

如何使用 puppeteer 等待页面加载？

Answer 1

您可以异步等待导航以避免在重定向时获得null ，

await Promise.all([
      page.click("button[type=submit]"),
      page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);

如果 page.click 已触发导航，这将对您有所帮助。

Answer 2

await page.waitForNavigation();

Answer 3

根据官方文档，您应该使用：

page.waitForNavigation（选项）

• options < Object > 导航参数可能具有以下属性：
  • timeout < number > 最大导航时间，以毫秒为单位，默认为 30 秒，传递0以禁用超时。 可以使用page.setDefaultNavigationTimeout(timeout)方法更改默认值。
  • waitUntil < 字符串| Array < string >> 何时认为导航成功，默认为load 。 给定一组事件字符串，在触发所有事件后，导航被认为是成功的。 事件可以是：
    • load - 考虑在触发load事件时完成导航。
    • domcontentloaded - 考虑在触发DOMContentLoaded事件时完成导航。
    • networkidle0 - 当至少500毫秒没有超过 0 个网络连接时，认为导航已完成。
    • networkidle2 - 当至少500毫秒没有超过 2 个网络连接时，认为导航已完成。
• 返回：< Promise <[?Response]>> Promise 解析为主要资源响应。 在多次重定向的情况下，导航将使用上次重定向的响应进行解析。 如果由于 History API 的使用而导航到不同的锚点或导航，导航将解析为null 。

可读性：

您可以使用page.waitForNavigation()等待页面导航：

await page.waitForNavigation();

性能：

但是由于page.waitForNavigation()是page.mainFrame().waitForNavigation()的快捷方式，我们可以使用以下内容来提高性能：

await page._frameManager._mainFrame.waitForNavigation();

Answer 4

有时即使使用await page.waitForNavigation()仍然会导致Error: Execution context was destroyed, most likely because of a navigation.

就我而言，这是因为页面多次重定向。 该API表示默认waitUntil选项是Load -这需要我等待导航每个重定向（3次）。

只使用单个实例page.waitForNavigation与waitUntil选项networkidle2在我的情况下工作良好：

await button.click();

await page.waitForNavigation({waitUntil: 'networkidle2'});

最后，API 建议使用Promise.All来防止竞争条件。 我不需要这个，但提供它是为了完整性：

await Promise.all([button.click(), page.waitForNavigation({waitUntil:'networkidle2'})])

如果所有其他方法都失败了，您可以按照Puppeteer github 问题上的建议使用page.waitForSelector — 或者在我的情况下使用page.waitForXPath()

Answer 5

我知道现在回答这个有点晚了。 对于那些在执行waitForNavigation 时遇到异常情况的人可能会有所帮助。

(node:14531) UnhandledPromiseRejectionWarning: TimeoutError: Navigation Timeout Exceeded: Promise.then (/home/user/nodejs/node_modules/puppeteer/lib/LifecycleWatcher.js:142:21) at -- ASYNC -- at Frame 超过 30000ms。 (/home/user/nodejs/node_modules/puppeteer/lib/helper.js:111:15) 在 Page.waitForNavigation (/home/user/nodejs/node_modules/puppeteer/lib/Page.js:649:49) 在 Page . (/home/user/nodejs/node_modules/puppeteer/lib/helper.js:112:23) 在 /home/user/nodejs/user/puppeteer/example7.js:14:12 在

对我有用的正确代码如下。

await page.click('button[id=start]', {waitUntil: 'domcontentloaded'});

同样，如果你要进入一个新页面，代码应该像

await page.goto('here goes url', {waitUntil: 'domcontentloaded'});

Answer 6

我建议将 page.to 包装在一个包装器中并等待加载所有内容

这是我的包装纸

loadUrl: async function (page, url) {
    try {
        await page.goto(url, {
            timeout: 20000,
            waitUntil: ['load', 'domcontentloaded', 'networkidle0', 'networkidle2']
        })
    } catch (error) {
        throw new Error("url " + url + " url not loaded -> " + error)
    }
}

现在你可以使用它

await loadUrl(page, "https://www.google.com")

Answer 7

await Promise.all([
      page.click(selectors.submit),
      page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);

这将是使用的第一优先级，因为它等待所有网络完成并假设它在 500 毫秒内没有超过 0 个网络调用时完成。

你也可以使用

await page.waitForNavigation({ waitUntil: 'Load' })

否则，你可以使用

await page.waitForResponse(response => response.ok())

这个函数也可以用在不同的地方，因为它只允许在所有调用都成功时，即所有响应状态都正常时，即 (200-299) 继续进行

Answer 8

这对我有用：

await Promise.all([
    page.goto(URL),
    page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);
console.log('page loaded')

出于某种原因，我无法点击按钮（处理了一个事件，而不是在表单中）

<button onclick="someFunction();" class="button button2">Submit</button>

问题是页面是在服务器端呈现的。 因此，每当我等待输入字段时，按钮都不存在await page.waitForSelector('button.button2')

解决方案是在Promise绑定page.goto(URL)和page.waitForNavigation({ waitUntil: 'networkidle0' })

await Promise.all([
    page.goto(URL),
    page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);
console.log('page loaded')

await page.waitForSelector('button.button2')
console.log('button is here');

Answer 9

我遇到了一个场景，其中有经典的 POST-303-GET 并且涉及input[type=submit] 。 在这种情况下，按钮的click似乎在关联表单提交和重定向之后才会解析，因此解决方案是删除waitForNavigation ，因为它是在重定向之后执行的，因此超时。

Answer 10

如果提交表单会打开其他页面，那么您可能只想等待该页面中的选择器。 我经常在使用page.waitForNavigation()遇到问题，因为它的选项并不能真正确保我们有效地导航到另一个页面。

// login page
page.click("#login");
// homepage, after login
page.waitForSelector("#home", {visible: true}); // page.waitForXpath()

当然，您可以增加选择器的等待时间。