React项目Cypress运行Firefox E2E测试报找不到about:blank目标错误

问题复现条件 #

• React 18项目，单元测试基于Testing Library运行正常
• Chrome、Edge无头模式E2E测试全部用例执行通过
• 首次安装Mozilla官方正式版Firefox用于测试，执行npx cypress run --headless --browser firefox时持续重试连接，最终抛出错误：

Cypress failed to make a connection to Firefox.
Error: Could not find url target in browser about:blank. Targets were []

环境信息 #

依赖版本 #

"react": "^18.1.0",
"cypress": "^10.0.2",
"@cypress/react": "^5.12.5",
"@cypress/webpack-dev-server": "^1.8.4",

测试脚本配置 #

"scripts": {
  "test:all": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@mui)/\" --watchAll=false && npm run test:e2e:all",
  "test:unit": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@mui)/\"",
  "test:e2e:all": "npm run test:e2e:chrome && npm run test:e2e:firefox && npm run test:e2e:edge && npm run test:e2e:tablet",
  "test:e2e:chrome": "npx cypress run --headless --browser chrome",
  "test:e2e:firefox": "npx cypress run --headless --browser firefox",
  "test:e2e:edge": "npx cypress run --headless --browser edge",
  "test:e2e:tablet": "npx cypress run --headless --browser chrome --config viewportWidth=800"
}

排查解决步骤 #

按优先级依次尝试以下方案，绝大多数同类问题可以通过前两步解决：

• 优先升级Cypress版本：你使用的10.0.2是Cypress 10大版本的早期发布版，存在明确的Firefox 100+版本兼容bug——Firefox 100调整了远程调试端口的页面目标暴露逻辑，旧版本Cypress的firefox-util连接模块未适配该变更，会出现无法识别默认about:blank页目标的问题。直接升级Cypress到10.11.0及以上的10.x稳定版本，升级完成后执行npx cypress verify校验所有浏览器的识别状态，校验通过后重新运行测试即可。
• 完成Firefox首次初始化：新安装的Firefox首次启动时会加载引导页、创建默认用户配置文件，无头模式下会跳过该初始化流程导致进程启动异常。先执行npx cypress open打开Cypress图形启动器，选择Firefox浏览器以有头模式启动一次，走完首次打开的所有引导流程、确认浏览器可以正常加载页面后关闭，再重新执行无头模式测试命令即可。注意不要使用Firefox Developer Edition、Nightly测试版，这类版本的调试接口和正式版存在差异，Cypress对其支持不稳定。
• 排查安全软件拦截：Windows Defender或第三方杀毒软件的进程防护功能，可能拦截Cypress向Firefox进程注入远程调试代码的操作，导致调试端口连通但无法获取页面目标。临时关闭安全软件的实时防护后重试，如果测试可以正常运行，将Cypress缓存目录（默认路径C:\Users\你的用户名\AppData\Local\Cypress\Cache）、Firefox安装目录加入安全软件的信任白名单即可。
• 显式指定Firefox启动路径：如果Cypress没有自动识别到Firefox的正确安装位置，可以在项目根目录的cypress.config.js中显式配置Firefox二进制路径，配置示例：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    // 原有e2e配置
    browsers: [
      {
        name: "firefox",
        family: "firefox",
        channel: "stable",
        displayName: "Firefox",
        // 替换为你本机的firefox.exe实际路径
        path: "C:\\Program Files\\Mozilla Firefox\\firefox.exe",
        majorVersion: 101,
        isHeaded: true,
        isHeadless: true
      }
    ]
  }
});

• 临时绕过方案：如果暂时无法升级Cypress，可以在启动命令中延长浏览器连接超时时间，将默认60秒的超时调整为2分钟：
  npx cypress run --headless --browser firefox --config browserConnectTimeout=120000
  也可以暂时去掉--headless参数以有头模式运行Firefox测试，有头模式下不会触发该连接逻辑bug。

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