Puppeteer 等待页面更新

先打个广告：欢迎关注我的公众号，参与 文史大挑战 趣味题目。使用方法见 这篇文章 。

正文开始：

在浏览器页面发生跳转或者更换时，需要有一些事件让 Puppeteer 等待，不然就会提早返回错误或者无法预期的事情发生。本文列举一些这种场景和如何等待页面的变化。

等待页面跳转

在 Puppeteer 实现 web 自动测试 一文中提到过，点击按钮触发页面跳转时，最佳的写法是这样：

await Promise.all([
        btn.click(),
        page.waitForNavigation()
      ])

这样写法，等于让 click 动作等待页面跳转后，才一起 resolve，不然 click 很快完成，可能在当前页面里继续 wait，而不是在等待新的页面跳转。

等待 ajax 更新

对于单页面应用来说，有时候点击按钮后，会触发页面某些组件通过 ajax 方式 重新加载，这时需要一些特殊手段等待页面更新完成。

<span style=“color:#f44336;font-size: 2em;font-family: consolas, courier new, monospace;”}>Ajax

假设 ajax 的接口是：

http://www.yoursite.com/api

可以在点击按钮后，等待页面响应，比如如下的写法：

xhr = 'http://www.yoursite.com/api'
await btn.click()
await page.waitForResponse(res => {
    return res.request().url().startsWith(xhr) &&
    res.ok()
})

或者如果不希望限定域名，只限定接口名称，可以用如下的写法：

xhr = '/api'
await btn.click()
await page.waitForResponse(res => {
    return res.request().url().includes(xhr) &&
    res.ok()
})

（完）

如果您对本文有疑问或者寻求合作，欢迎 联系邮箱 。邮箱已到剪贴板

精彩评论