运行Cypress命令时浏览器卡顿无法加载问题求助

基础排查操作 #

• 清除Cypress缓存：执行cypress cache clear命令，之后重新启动Cypress UI，缓存损坏是浏览器连接异常的常见诱因。
• 核对浏览器版本兼容性：确认Chrome、Firefox、Edge、Electron等目标浏览器的版本在当前Cypress版本的支持范围内，版本不匹配会直接导致连接失败。
• 禁用浏览器扩展：所有浏览器扩展（如广告拦截、VPN工具）都可能干扰Cypress的连接流程，先完全禁用后再尝试连接。

框架层面问题排查 #

• 检查Cypress配置文件：确认cypress.config.js中没有错误的浏览器自定义配置，比如browserLaunchOptions的参数冲突。可暂时注释掉所有自定义配置，恢复默认后测试。
• 查看详细日志：启动Cypress时添加--verbose参数（cypress open --verbose），在终端中查看完整日志，定位类似"browser connection timeout"或"failed to establish socket"的错误信息，精准锁定问题。
• 更换端口或重启系统：Cypress默认使用的3000、5000等端口可能被占用，可在配置中指定未被占用的端口：

  // cypress.config.js
  module.exports = defineConfig({
    e2e: {
      port: 8080,
    },
  })
  

  若端口排查无果，直接重启系统释放资源后再尝试。

依赖修复步骤 #

• 重装Cypress依赖：删除node_modules文件夹和package-lock.json/yarn.lock文件，执行npm install或yarn install，确保依赖包完整无损坏。
• 调整Cypress版本：如果是升级Cypress后出现的问题，尝试降级到之前稳定的版本（如npm install cypress@12.17.4），或升级到最新正式版，排除版本自身bug。

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