Github流水线中cy.intercept与cy.wait失效问题求助

问题背景 #

本地Cypress测试（cypress open/cypress run，有头/无头、Chrome/Electron）均正常，但集成到GitHub Actions后，cy.intercept与cy.wait功能失效，出现超时错误：

CypressError: Timed out retrying after 5000ms: `cy.wait()` timed out waiting `5000ms` for the 1st request to the route: `addCallTodo`. No request ever occurred.

已确认CI环境中应用服务（localhost:3000）和API服务（localhost:8001）运行正常，以下是可能的排查方向和解决方法：

1. 核对请求URL与intercept规则的匹配性 #

本地环境中应用可能使用相对路径发起请求，但CI环境中可能因配置差异，实际请求的是完整URL（如http://localhost:8001/communications），而非/communications。

• 修改intercept规则为完整URL：

  cy.intercept('POST', 'http://localhost:8001/communications', req => {
    req.reply({ statusCode: 200, body: { data: {} } })
  }).as('addCallTodo')
  

• 或在cypress.config.js中统一配置API地址的环境变量，确保intercept使用正确前缀：

  // cypress.config.js
  module.exports = defineConfig({
    e2e: {
      env: {
        apiUrl: 'http://localhost:8001'
      }
    }
  })
  

  // 测试代码中使用环境变量
  cy.intercept('POST', `${Cypress.env('apiUrl')}/communications`, req => {
    req.reply({ statusCode: 200, body: { data: {} } })
  }).as('addCallTodo')
  

2. 验证Cypress的baseUrl配置 #

确保cypress.config.js中的baseUrl正确指向应用服务（http://localhost:3000），CI环境中可能存在配置被覆盖的情况：

// cypress.config.js
module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    // 其他配置项
  }
})

3. 检查Action与Cypress版本兼容性 #

使用的cypress-io/github-action@v4可能与项目中安装的Cypress版本不兼容，导致网络拦截逻辑异常。

• 确认Action版本与本地Cypress版本的兼容范围，必要时升级或降级Cypress版本。

4. 排查CI环境的网络与代理问题 #

虽然服务已启动，但CI环境可能存在网络隔离或代理配置差异，导致请求未经过Cypress代理：

• 添加网络日志排查：在CI环境的env中添加DEBUG=cypress:network*，输出详细的网络请求日志，查看请求是否被Cypress捕获。
• 在测试中添加请求监控：

  cy.visit('/', {
    onBeforeLoad(win) {
      const originalFetch = win.fetch
      // 监听fetch请求
      cy.stub(win, 'fetch').callsFake((url) => {
        console.log('Fetch request to:', url)
        return originalFetch(url)
      })
    }
  })
  

5. 延长cy.wait超时时间 #

CI环境资源可能比本地紧张，请求响应速度较慢，默认5000ms超时可能不足：

cy.wait('@addCallTodo', { timeout: 10000 }) // 延长至10秒

6. 确认请求触发时机 #

检查点击按钮后，请求是否存在延迟（如表单验证、动画等待），CI环境中需确保请求已实际发起：

• 添加对加载状态的等待：

  cy.get(cyTag(Tags.CALL_FORM.ADD_TODO_BUTTON)).click()
  cy.get(cyTag(Tags.CALL_FORM.SUBMIT_LOADER)).should('be.visible') // 等待加载指示器出现
  cy.wait('@addCallTodo')
  

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