Puppeteer 等待页面更新

发表时间

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


《Puppteer 实现 web 自动测试》 一文中提到过,点击按钮触发页面跳转时,最佳的写法是这样:

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

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

等待 ajax 更新

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

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

(完)

本页面内容采用 署名协议 CC-BY 授权。欢迎转载,请保留原文链接


分类

相关文章