Puppeteer 等待页面更新

原创 2019年 4月 28日
标签: 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()
})

(完)

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

标签: PUPPETEER
给个免费的赞吧~

精彩评论

本站 是个人网站,采用 署名协议 CC-BY-NC 授权。
欢迎转载,请保留原文链接 https://www.lfhacks.com/tech/puppeteer-wait-for-ajax/ ,且不得用于商业用途。