Cypress拦截请求等待失效：邮件验证流程的异步问题

你的问题核心是拦截器注册时机滞后，导致cy.visit触发的请求在拦截器生效前就已发送，所以cy.wait无法捕获到。以下是几个可靠的解决方案：

1. 提前注册拦截器 #

把cy.intercept移到测试的最开始，确保在所有异步操作（比如创建用户、查询数据库）之前完成拦截器注册，这样后续页面加载时的请求一定会被捕获：

it('ensure create a user and verify the email address', () => {
  // 提前注册拦截器，确保在任何请求发送前生效
  cy.intercept('GET', '/app/verify_email.json?*').as('verifyEmail')

  // 创建用户
  cy.request('POST', 'app/sign-up.json', {
    user: {
      userName: 'new_user',
      email: 'm@d.c',
      password: 'password',
      fullName: 'new user full name'
    }
  }).should((response) => {
    expect(response.status).to.eq(201)
  })

  // 检查用户是否创建成功
  cy.task('prisma:user:findMany', {}).then((result: any) => {
    expect(result.length).to.eq(1)
  })

  // 获取邮箱验证链接
  cy.task<Array<BeeQueue.Job<IEmail>>>('beeQueue:emailService:getJobs', 'waiting')
    .should('exist')
    .should('have.length', 1)
    .then((result) => {
      if (result[0].data.text) {
        const tokenUrl = result[0].data.text.substring(result[0].data.text.lastIndexOf('http://'))
        const path = tokenUrl.substring(tokenUrl.indexOf('/app'))
        cy.visit(path)
        
        // 现在可以正常等待请求响应
        cy.wait('@verifyEmail').its('response.statusCode').should('equal', 200)
      }
    })
})

2. 扁平化命令结构 #

避免多层.then()嵌套，Cypress的命令本身就是异步队列，嵌套过多会打乱执行时序，导致拦截器注册和页面加载的顺序出现偏差。把独立的操作拆成单独的命令块，能更清晰地控制流程。

3. 验证请求匹配规则 #

打开Cypress的DevTools网络面板，确认实际发送的邮箱验证请求的细节：

• HTTP方法是否是GET？如果是POST，需要修改cy.intercept的第一个参数
• URL路径是否完全匹配/app/verify_email.json?*？比如是否存在不带.json的情况，或者路径前缀不同
• 可以给拦截器添加日志，调试是否捕获到请求：

cy.intercept('GET', '/app/verify_email.json?*', (req) => {
  console.log('捕获到验证请求:', req.url) // 在浏览器控制台查看日志
  req.continue()
}).as('verifyEmail')

4. 确保链接路径正确 #

检查tokenUrl.substring(tokenUrl.indexOf('/app'))得到的路径是否正确，比如原URL是http://localhost:3000/app/verify_email.json?token=xxx，截取后应该是/app/verify_email.json?token=xxx，如果路径有误，cy.visit可能加载错误页面，导致请求未发送。

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