使用Cypress的cy.intercept无法验证响应体中maximum_quantity字段

问题说明 #

前端编辑字段并保存后，通过cy.intercept拦截指定GET请求，试图校验响应中的maximum_quantity属性是否已更新为30，但无法定位到该属性完成校验。

现有代码 #

cy.intercept('GET', '***/all-offerings?page=0&size=15&not_status=deactivated',).as('max')

cy.wait('@max')
  .its("response.statusCode")
  .should("eq", 200)

cy.get('@max')
  .then(res => {
    expect(res.data[0].items[0].maximum_quantity).to.have.value(30)
})

错误信息 #

JSON响应结构 #

问题分析及修正代码 #

错误点 #

1. 响应数据路径错误：Cypress拦截的请求响应数据存储在interception.response.body中，而非res.data
2. 断言方法错误：to.have.value()用于校验DOM元素的value属性，普通JS属性应使用to.eq()
3. 层级路径错误：从响应截图看，数据实际层级为response.body.content而非response.data

修正后的代码 #

cy.intercept('GET', '***/all-offerings?page=0&size=15&not_status=deactivated').as('max')

cy.wait('@max')
  .its("response.statusCode")
  .should("eq", 200)

cy.get('@max')
  .then((interception) => {
    expect(interception.response.body.content[0].items[0].maximum_quantity).to.eq(30)
})

内容的提问来源于stack exchange，提问作者Kakashi - Sensei