错误信息仅为临时气泡时如何编写有效的Cypress自动化测试用例

• 拦截注册接口做断言（最推荐） #

  这是验证提交是否被后端接收的最可靠方案，完全不需要依赖前端UI元素的状态。你可以在提交表单前用cy.intercept()监听注册接口的请求和返回结果：
  示例代码：

  // 提前拦截注册接口，设置别名方便后续调用
  cy.intercept('POST', '/api/register').as('registerReq')
  // 输入错误的表单数据
  cy.get('#email').type('invalid-format-email')
  cy.get('#password').type('123')
  // 点击提交按钮
  cy.contains('Create account').click()
  // 验证接口返回错误状态码，或者请求参数确实是错误内容
  cy.wait('@registerReq').then((interception) => {
    // 验证接口返回4xx错误，代表提交被业务逻辑拒绝
    expect(interception.response.statusCode).to.be.oneOf([400, 422])
    // 也可以直接验证请求携带的参数是你输入的错误内容，确认提交动作确实触发
    expect(interception.request.body.email).to.eq('invalid-format-email')
  })
  

  如果错误场景下前端根本不会把请求发向后端，直接替换成cy.get('@registerReq').should('not.exist')验证请求未发出即可。

• 捕获气泡弹出的瞬间做断言 #

  如果你必须验证前端确实弹出了错误提示，可以用cy.contains()配合超时时间，或者用Cypress的事件监听捕捉DOM插入的瞬间：
  示例代码：

  cy.contains('Create account').click()
  // 匹配气泡的错误文本，设置10秒超时足够覆盖气泡存在的窗口，只要文本出现过哪怕后续消失也会断言成功
  cy.contains('请输入合法的邮箱格式', { timeout: 10000 }).should('exist')
  

  如果气泡是用Canvas或者第三方非DOM组件渲染的，还可以用视觉对比断言方案，比如cypress-image-snapshot插件，点击提交后立刻截图和预设的错误气泡基准图做对比即可。

• 验证注册后状态未变更 #

  错误提交后正常流程不会跳转到注册成功页，也不会生成登录态，你可以加这类辅助断言交叉验证：

  • 验证提交后页面还停留在注册页，路由没有发生变化
  • 验证本地存储、Cookie里没有生成登录凭证
  • 后续调用需要登录态的接口会返回401错误

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