如何在不使用Docker的情况下指定Chrome版本运行Cypress

方案1：借助Playwright Chromium指定版本 #

Playwright会自动下载指定版本的Chromium到本地依赖目录，无需手动操作：

• 安装指定版本的依赖：

  npm install playwright-chromium@<目标版本号> cypress --save-dev
  

• 修改cypress.config.js，将Playwright下载的Chromium注册为Cypress可用浏览器：

  const { defineConfig } = require('cypress');
  const { chromium } = require('playwright-chromium');
  
  module.exports = defineConfig({
    e2e: {
      async setupNodeEvents(on, config) {
        const browserPath = await chromium.executablePath();
        config.browsers.push({
          name: 'fixed-chromium',
          channel: 'stable',
          family: 'chromium',
          displayName: 'Fixed Version Chromium',
          version: '<目标版本号>',
          path: browserPath,
          minSupportedVersion: 80,
        });
        return config;
      },
    },
  });
  

• 运行测试时指定该浏览器：

  npx cypress run --browser fixed-chromium
  

方案2：用chrome-installer自动下载固定版本 #

这个工具可以在npm install阶段自动下载指定Chrome版本到项目目录：

• 安装依赖：

  npm install chrome-installer --save-dev
  

• 在package.json中添加postinstall脚本，确保依赖安装完成后自动下载Chrome：

  {
    "scripts": {
      "postinstall": "chrome-installer --version <目标版本号> --install-path ./node_modules/.chrome"
    }
  }
  

• 修改cypress.config.js，配置该Chrome路径：

  const { defineConfig } = require('cypress');
  const path = require('path');
  
  module.exports = defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        // 不同系统路径需适配：Windows用chrome.exe，Mac用Contents/MacOS/Google Chrome，Linux用google-chrome
        const chromePath = process.platform === 'win32' 
          ? path.resolve(__dirname, './node_modules/.chrome/chrome.exe')
          : process.platform === 'darwin'
            ? path.resolve(__dirname, './node_modules/.chrome/Contents/MacOS/Google Chrome')
            : path.resolve(__dirname, './node_modules/.chrome/google-chrome');
        
        config.browsers.push({
          name: 'fixed-chrome',
          channel: 'stable',
          family: 'chromium',
          displayName: 'Fixed Version Chrome',
          version: '<目标版本号>',
          path: chromePath,
          minSupportedVersion: 80,
        });
        return config;
      },
    },
  });
  

• 运行测试：

  npx cypress run --browser fixed-chrome
  

方案3：命令行直接指定预下载的Chrome路径 #

如果通过自定义脚本（比如在postinstall里调用官方下载链接）把固定版本Chrome下载到项目固定目录，可直接在运行时指定路径：

npx cypress run --browser ./path/to/your/fixed-version-chrome

关键注意点 #

• 目标版本号需与Chrome官方发布的版本一致，避免下载失败
• GitLab流水线中需确保npm install阶段有权限执行文件写入操作
• 跨系统测试时，要做好路径适配，可通过process.platform判断系统类型

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