如何在Vue axios场景下使用Cypress测试等待表单提交后的回调

第一步：提前拦截目标接口请求 #

在触发点击提交的操作前，用cy.intercept()监听表单提交对应的后端POST请求，给拦截规则设置别名即可：

// 示例：拦截路径为/api/form/submit的POST请求，设置别名为submitForm
// 接口路径支持通配符匹配，比如有动态参数可以写/api/form/*/submit
cy.intercept('POST', '/api/form/submit').as('submitForm')

如果你的axios配置了全局前缀，直接匹配实际发出的请求路径即可。

第二步：触发提交后等待请求完成 #

点击提交按钮后，通过cy.wait('@拦截别名')动态等待请求响应完成，这个等待是请求结束就自动往下执行，不是硬等待固定时长，且监听的是用户真实操作触发的浏览器请求，完全符合真实使用场景：

// 前置的表单填写逻辑自行补充
cy.get("[data-testid=submit-form]").click();
// 等待请求完成，之后即可执行后续测试逻辑
cy.wait('@submitForm').then((interception) => {
  // 这里还可以额外校验请求参数、响应状态是否符合预期
  expect(interception.response.statusCode).to.eq(200)
  expect(interception.request.body).to.deep.eq({
    // 你预期的表单提交数据
  })
})

补充说明 #

如果要确认axios的then回调逻辑全部执行完成，比如提交成功的提示、页面跳转等效果，直接写对应的元素校验逻辑即可，Cypress自带元素自动等待能力，不需要额外加等待，比如要校验AntD的成功提示出现，直接写cy.get('.ant-message-success').should('be.visible')就行。

内容的提问来源于stack exchange，提问作者Дмитрий Фомин