Cypress偶发无法访问VueJS应用问题排查求助

问题场景 #

我新建了一个VueJS项目并完成配置，同时安装了Cypress。运行简单测试访问认证页面http://localhost:4173/auth/login时，偶尔会返回错误：Error: connect ECONNREFUSED 127.0.0.1:4173。但在本地Chrome浏览器（非Cypress内置浏览器）中访问该地址一切正常，能显示预期页面。

服务启动脚本 #

{
"scripts": {
    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
  },
}

测试代码 #

describe('My First Test', () => {
  it('assert user can login', () => {
    cy.visit('/auth/login')
  })
})

运行输出 #

/Users/xxxx/.nvm/versions/node/v18.16.0/bin/yarn run test:e2e:dev
yarn run v1.22.19
$ start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'
1: starting server using command "vite dev --port 4173"
and when url "[ 'http://localhost:4173' ]" is responding with HTTP status code 200
running tests using command "cypress open --e2e"


  VITE v4.3.9  ready in 233 ms

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h to show help

DevTools listening on ws://127.0.0.1:54622/devtools/browser/ea1f0dad-b821-411e-b566-a8353f33f659
Missing baseUrl in compilerOptions. tsconfig-paths will be skipped

可能的原因 #

• 服务就绪检测不充分：start-server-and-test默认只检测根路径http://localhost:4173返回200，但应用根路径就绪后，/auth/login路由可能还需要额外时间完成加载。服务日志显示"ready"不代表所有路由都已完全初始化，Cypress提前发起请求就会触发连接拒绝错误。
• 端口占用冲突：偶尔端口4173可能被其他后台进程占用，Vite日志显示启动成功，但实际端口绑定失败，导致Cypress无法连接。
• Cypress启动时机过早：start-server-and-test的HTTP检测存在毫秒级误差，服务刚返回一次200就启动Cypress，但此时服务还未进入稳定状态，后续请求会失败。
• Vite初始化延迟：Vite启动后可能还在后台编译组件或注册路由，此时Cypress访问特定路由时，服务暂时无法响应，表现为连接拒绝。

解决办法 #

1. 调整检测路径到目标路由 #

把start-server-and-test的检测URL改成你要访问的/auth/login，确保该路由真正就绪后再启动Cypress：

{
  "scripts": {
      "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173/auth/login 'cypress open --e2e'",
    },
}

2. 增加检测超时时间 #

给start-server-and-test添加超时参数，延长等待时间，确保服务完全稳定：

{
  "scripts": {
      "test:e2e:dev": "start-server-and-test --timeout 10000 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
    },
}

（--timeout 10000表示等待10秒，可根据实际情况调整）

3. 配置Cypress的baseUrl #

在cypress.config.js中设置baseUrl，让Cypress自动拼接地址，同时启用内部重试机制：

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:4173',
  },
})

4. 检查端口占用 #

每次运行测试前，确认端口4173未被占用：

• Mac/Linux：执行lsof -i :4173查看进程，用kill -9 <PID>杀死占用进程
• Windows：执行netstat -ano | findstr :4173，然后用taskkill /F /PID <PID>结束进程

5. 给测试添加重试逻辑 #

在测试中增加重试配置，确保请求能等到服务响应：

describe('My First Test', () => {
  it('assert user can login', () => {
    cy.visit('/auth/login', { 
      retryOnStatusCodeFailure: true,
      retryOnNetworkFailure: true 
    })
  })
})

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