如何在Cypress中添加Chrome浏览器？本地E2E测试未显示Chrome

• 检查Chrome安装路径与兼容性
  • 确保使用的是Chrome稳定版，Cypress对Beta/Dev/Canary版本支持有限
  • 手动指定Chrome路径：在cypress.config.js或cypress.config.ts中添加配置：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    browsers: [
      {
        name: 'chrome',
        channel: 'stable',
        family: 'chromium',
        displayName: 'Chrome',
        version: '<你的Chrome版本号>',
        path: '<Chrome可执行文件路径>',
        majorVersion: '<主版本号>'
      }
    ]
  }
})

• Windows路径示例：C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe

• macOS路径示例：/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

• 验证版本匹配性

  • 确认Chrome版本在Cypress官方支持范围内，不匹配则升级/降级Chrome，或执行npm install cypress@latest --save-dev更新Cypress

• 修复系统环境变量

  • 将Chrome安装目录添加到系统PATH环境变量中，重启终端和Cypress生效

• 重置Cypress浏览器缓存

  • 删除对应缓存目录后重启Cypress：
    • Windows：C:\\Users\\<你的用户名>\\AppData\\Local\\Cypress\\Cache
    • macOS：~/Library/Caches/Cypress
    • Linux：~/.cache/Cypress

• 排查程序拦截问题

  • 关闭杀毒软件、防火墙等工具，尝试以管理员身份运行Cypress重新检测浏览器

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