Cypress热重载失败报错Cannot GET /__cypress/src/index.html排查

• 核心是Windows平台下Cypress组件测试的路径解析bug：你遇到的Cannot GET /__cypress/src/index.html和带C:/盘符的iframe 404报错都是该问题的典型表现，Cypress内置的devServer在热重载时没有正确把本地绝对路径转换为相对于项目根目录的路由路径，导致资源请求地址错误。
• 第二个原因是cypress.config配置缺失：devServer的根目录、公共路径没有正确绑定到项目根目录，热重载时路径映射出错。
• 第三个原因是本地编译缓存异常：Cypress的缓存以及构建工具（Webpack/Vite）的缓存冲突，导致修改文件后旧的路径映射没有更新。

• 方案1：升级Cypress到13.0+稳定版本
  这个路径解析bug是Cypress 10~12版本Windows平台组件测试的已知问题，升级到最新稳定版可直接修复，执行命令：

  npm install cypress@latest --save-dev
  

• 方案2：调整cypress.config.ts配置
  如果你暂时不能升级版本，在组件测试配置中强制指定devServer的根目录，示例配置（以Vite为例，Webpack配置逻辑一致）：

  import { defineConfig } from 'cypress'
  
  export default defineConfig({
    component: {
      devServer: {
        framework: 'react',
        bundler: 'vite',
        // 强制指定项目根目录作为devServer的根
        viteConfig: {
          root: __dirname,
          base: '/'
        }
      },
      // 强制使用相对路径匹配测试用例
      specPattern: 'src/**/*.spec.tsx'
    }
  })
  

• 方案3：清理缓存后重启服务
  如果修改配置后还是偶发问题，执行以下命令清理缓存再启动测试：

  npx cypress cache clear
  rm -rf node_modules/.cache
  npx cypress open --component
  

• 临时解决方案：热重载失效后手动刷新Cypress测试窗口，不需要重启整个服务即可恢复正常。

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