使用Karma时ChromeHeadless仍打开浏览器的问题求助

我之前也碰到过一模一样的问题！看起来你的配置方向是对的，但可能有几个细节没调整到位，导致ChromeHeadless没真正生效。咱们一步步来排查修复：

1. 先检查Angular CLI配置是否覆盖了Karma设置 #

Angular CLI的angular.json（旧版本是.angular-cli.json）会默认接管测试的浏览器配置，哪怕你在karma.conf.js里写了ChromeHeadless，CLI也可能会覆盖它。

找到你项目里的angular.json，定位到projects -> [你的项目名称] -> architect -> test -> options，添加"browsers": "ChromeHeadless"：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.spec.json",
    "karmaConfig": "karma.conf.js",
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": ["src/styles.css"],
    "scripts": [],
    "browsers": "ChromeHeadless" // 新增这一行，强制CLI使用无头浏览器
  }
}

2. 给ChromeHeadless添加必要的启动参数 #

ChromeHeadless在某些环境下（比如Linux、CI/CD）需要额外参数才能稳定运行，否则可能会 fallback 到普通Chrome窗口。修改你的karma.conf.js，添加自定义启动器：

process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function( config ) {
  config.set({
    basePath : '',
    frameworks : ['jasmine', '@angular/cli'],
    plugins : [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('@angular/cli/plugins/karma')
    ],
    angularCli : {
      environment: 'dev'
    },
    reporters : ['progress'],
    autoWatch : false,
    // 新增自定义无头浏览器配置
    customLaunchers: {
      ChromeHeadlessCustom: {
        base: 'ChromeHeadless',
        flags: [
          '--no-sandbox', // 关键参数，无权限环境下必须加
          '--disable-gpu',
          '--disable-translate',
          '--disable-extensions'
        ]
      }
    },
    browsers: [ 'ChromeHeadlessCustom' ], // 使用自定义的无头浏览器配置
    singleRun : true
  });
};

其中--no-sandbox是重中之重，很多时候就是因为缺了这个参数，导致Chrome无法在无头模式启动，转而弹出普通窗口。

3. 验证依赖版本兼容性 #

有时候puppeteer和karma-chrome-launcher的版本不匹配也会出问题。可以尝试重新安装这两个依赖：

npm uninstall puppeteer karma-chrome-launcher
npm install puppeteer karma-chrome-launcher --save-dev

4. 临时解决方案：命令行强制指定浏览器 #

如果上面的配置还是没生效，可以直接在运行测试时通过命令行参数强制指定：

ng test --browsers=ChromeHeadless

按上面的步骤调整后，应该就能让测试在无界面的ChromeHeadless中运行，不会再弹出浏览器窗口了。如果还是有问题，可以检查是否存在其他变体配置文件（比如karma.conf.prod.js）在覆盖你的设置。

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