Cypress中如何等待所有jQuery请求完成后再执行后续操作？

1. 基础实现（完全对齐Selenium原有逻辑） #

你可以直接把判断逻辑封装为Cypress自定义命令，直接复用你之前的JS判断逻辑，代码放在cypress/support/commands.js文件中：

// 自定义等待jQuery请求完成命令，默认超时时间10秒，和原Selenium逻辑一致
Cypress.Commands.add('waitForPageJQueryLoad', { timeout: 10000 }, () => {
  cy.window().should(win => {
    // 和你Selenium中执行的JS判断逻辑完全相同
    const isJQueryLoaded = (win.jQuery != null) && (win.jQuery.active === 0)
    expect(isJQueryLoaded).to.be.true
  })
  // 可按需添加日志打印
  Cypress.log({ name: '页面加载完成', message: '所有jQuery AJAX请求已处理完毕' })
})

2. 调用方式 #

在需要等待页面加载完成的场景（比如截图前）直接调用该命令即可：

// 触发页面跳转/操作后
cy.visit('/your-page')
cy.waitForPageJQueryLoad()
// 此时页面所有jQuery请求已完成，可执行截图操作
cy.screenshot('视觉回归截图')

3. 原有写法失效原因 #

你之前写的ajaxStop是回调式的事件绑定逻辑，Cypress的命令队列是同步串行执行的，仅绑定事件监听没有阻塞命令队列执行，所以后续的截图操作会直接提前执行，不会等待请求完成。

4. 适配动态加载jQuery的场景 #

如果你的页面会动态注入jQuery（初始加载时window上没有jQuery对象），可以修改命令先等待jQuery挂载完成再判断请求状态：

Cypress.Commands.add('waitForPageJQueryLoad', { timeout: 10000 }, () => {
  // 先等待jQuery挂载到window对象上
  cy.window().should('have.property', 'jQuery')
  cy.window().should(win => {
    expect(win.jQuery.active).to.eq(0)
  })
  Cypress.log({ name: '页面加载完成', message: '所有jQuery AJAX请求已处理完毕' })
})

如果你的页面可能不存在jQuery，使用基础实现即可，不会抛出错误；如果确定页面一定依赖jQuery，使用动态加载适配版的实现更稳妥。

内容的提问来源于stack exchange，提问作者Rob Thomson