如何在Cypress测试中可靠等待页面加载及操作后的XHR请求？

嘿，我来帮你搞定Cypress里等待XHR请求的问题——这确实是写可靠测试的关键，尤其是涉及数据加载和筛选的场景。首先要提一句：你代码里用的cy.server()和cy.route()已经是Cypress的旧API了（在Cypress 6+版本就被弃用），现在更推荐用cy.intercept()，它功能更强、更可靠。下面一步步给你讲怎么优化你的测试：

1. 替换旧API，用cy.intercept()拦截请求 #

先把旧的拦截代码换成新版的，同时给请求设置别名，方便后续等待：

cy.intercept('POST', 'http://my-api.biz/api').as('apiRequest')

2. 等待初始页面加载的请求 #

访问页面后，直接用cy.wait('@apiRequest')来等待初始数据请求完成——这比靠固定时间等待（比如cy.wait(2000)）靠谱多了，它会精准等到请求响应完成，再继续后续操作。甚至还可以顺便验证初始响应的内容，比如你提到的价格区间：

it(`filters the data by 'price'`, () => {
  // 拦截API请求并设置别名
  cy.intercept('POST', 'http://my-api.biz/api').as('apiRequest')
  
  // 访问页面
  cy.visit('/')
  
  // 等待初始数据加载请求完成，可选验证响应
  cy.wait('@apiRequest')
    .then((interception) => {
      // 确认初始响应返回了价格边界
      expect(interception.response.body).to.have.property('minPrice')
      expect(interception.response.body).to.have.property('maxPrice')
    })
  
  // 这里执行你的筛选操作：填写价格字段、点击筛选按钮
  cy.get('#min-price').type('100')
  cy.get('#max-price').type('500')
  cy.get('#apply-filter-btn').click()
  
  // 等待筛选触发的新API请求
  cy.wait('@apiRequest')
  
  // 最后验证DOM内容，确保只显示符合价格区间的数据
  cy.get('.data-card').each(($card) => {
    const itemPrice = parseFloat($card.find('.price-tag').text())
    expect(itemPrice).to.be.gte(100).and.lte(500)
  })
})

3. 区分多个同端点请求（可选） #

如果初始加载和筛选用的是同一个API端点，cy.wait('@apiRequest')会按请求发起的顺序依次等待。但如果你想更精准地区分这两个请求，可以在cy.intercept()里根据请求体来设置不同别名：

// 根据请求体内容给不同请求设置别名
cy.intercept('POST', 'http://my-api.biz/api', (req) => {
  // 初始加载请求：没有筛选参数
  if (!req.body.filters) {
    req.alias = 'initialDataLoad'
  } 
  // 筛选请求：包含价格筛选条件
  else if (req.body.filters.price) {
    req.alias = 'priceFilterRequest'
  }
})

// 然后分别等待对应的请求
cy.wait('@initialDataLoad')
// 执行筛选操作
cy.wait('@priceFilterRequest')

4. 额外的可靠性小技巧 #

• 绝对别用固定等待时间：cy.wait(2000)这种写法完全依赖网络和服务器速度，很容易导致测试不稳定。
• 结合请求断言：可以在cy.intercept()里直接验证请求参数是否正确，比如确认筛选时发送了正确的价格区间：

  cy.intercept('POST', 'http://my-api.biz/api', (req) => {
    if (req.body.filters?.price) {
      expect(req.body.filters.price.min).to.eq('100')
      expect(req.body.filters.price.max).to.eq('500')
      req.alias = 'priceFilterRequest'
    }
  })
  

• 利用Cypress的自动重试：在验证DOM元素时，Cypress的cy.get()会自动重试直到元素出现，但如果内容依赖API响应，还是先cy.wait()请求完成更稳妥。

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