React+Cypress测试：同URL多请求Payload拦截与校验问题求助

你当前的代码只拦截并等待了单次请求，所以只能拿到第一个请求的结果。要获取同一URL下的多个请求，这里有几种实用方法：

方法1：多次调用cy.wait #

如果明确知道请求的触发次数，可以多次等待同一个别名，Cypress会按请求发起的顺序依次返回结果。

cy.intercept({ method: 'POST', url: Cypress.env("URL") }).as('call')

// 假设会触发3次请求，依次等待并处理
cy.wait('@call').then((interception) => {
  const reqBody = interception.request.body
  cy.fixture(`kpiId${reqBody.kpiId}.json`).then(jsonData => {
    expect(reqBody).to.deep.eq(jsonData)
  })
})

cy.wait('@call').then((interception) => {
  const reqBody = interception.request.body
  cy.fixture(`kpiId${reqBody.kpiId}.json`).then(jsonData => {
    expect(reqBody).to.deep.eq(jsonData)
  })
})

cy.wait('@call').then((interception) => {
  const reqBody = interception.request.body
  cy.fixture(`kpiId${reqBody.kpiId}.json`).then(jsonData => {
    expect(reqBody).to.deep.eq(jsonData)
  })
})

方法2：收集所有请求到数组 #

通过cy.intercept的回调函数，把每次请求的详情存入数组，之后统一处理所有请求。这种方式适合请求数量不确定的场景。

// 初始化数组存储请求数据
let allRequests = []

cy.intercept({ method: 'POST', url: Cypress.env("URL") }, (req) => {
  req.continue((res) => {
    // 将请求和响应数据存入数组
    allRequests.push({
      requestBody: req.body,
      responseBody: res.body
    })
  })
}).as('call')

// 执行触发多个请求的操作（比如用户交互）
cy.get('#trigger-actions').click()

// 等待请求全部完成（这里用cy.waitUntil判断数组长度，需先安装插件：npm install cypress-wait-until --save-dev）
cy.waitUntil(() => allRequests.length === 3)

// 遍历数组验证每个请求的Payload
allRequests.forEach((item) => {
  const reqBody = item.requestBody
  cy.fixture(`kpiId${reqBody.kpiId}.json`).then(jsonData => {
    expect(reqBody).to.deep.eq(jsonData)
  })
})

方法3：批量等待多个请求 #

Cypress支持传入别名数组到cy.wait，一次等待所有预期的请求，返回的是包含所有拦截结果的数组。

cy.intercept({ method: 'POST', url: Cypress.env("URL") }).as('call')

// 触发请求操作
cy.get('#run-multiple-requests').click()

// 等待3次请求，返回包含3个拦截对象的数组
cy.wait(['@call', '@call', '@call']).then((interceptions) => {
  interceptions.forEach((interception) => {
    const reqBody = interception.request.body
    cy.fixture(`kpiId${reqBody.kpiId}.json`).then(jsonData => {
      expect(reqBody).to.deep.eq(jsonData)
    })
  })
})

注意事项 #

• 如果请求数量不确定，优先用方法2，结合cy.waitUntil能动态判断请求是否全部完成。
• 务必在触发请求的操作（比如点击按钮）之后再执行等待逻辑，避免漏掉请求。
• 使用req.continue()是为了保证请求正常发送到后端，同时捕获完整的请求和响应数据。

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