Angular单元测试用Puppeteer v19.7.0后弹窗及Karma调试异常

我们在Angular项目中借助Puppeteer引入Headless Chrome二进制文件，用于CI等场景，此前运行完全正常。但自Puppeteer v19.7.0升级Chromium二进制版本后，执行npm test会弹出命令行窗口，同时导致WebStorm中的Karma调试器无法正常附加。v19.6.3及更早版本无此问题。

已尝试以下排查手段，但均未解决问题：

• 核查新版本Chromium的破坏性变更，未找到相关内容；单独启动Headless模式运行正常
• 修改karma-chrome-launcher配置
• 切换回Puppeteer v19.7.0之前的版本（仅该版本前可正常工作）
• 清理npm缓存、删除Chrome二进制文件

为复现问题，我创建了全新的空Angular项目，同步依赖版本并配置Karma引入Puppeteer Chrome，相关文件如下：

package.json #

{"name": "angular-karma-puppeteer-issue","version": "0.0.0","scripts": {"ng": "ng","start": "ng serve","build": "ng build","watch": "ng build --watch --configuration development","test": "ng test --no-watch"},"private": true,"dependencies": {"@angular/animations": "15.2.1","@angular/common": "15.2.1","@angular/compiler": "15.2.1","@angular/core": "15.2.1","@angular/forms": "15.2.1","@angular/platform-browser": "15.2.1","@angular/platform-browser-dynamic": "15.2.1","@angular/router": "15.2.1","rxjs": "7.8.0","tslib": "2.5.0","zone.js": "0.12.0"},"devDependencies": {"@angular-devkit/build-angular": "15.2.1","@angular/cli": "15.2.1","@angular/compiler-cli": "15.2.1","@types/jasmine": "4.3.1","jasmine-core": "4.5.0","karma": "6.4.1","karma-chrome-launcher": "3.1.1","karma-coverage": "2.2.0","karma-jasmine": "5.1.0","karma-jasmine-html-reporter": "2.0.0","puppeteer": "19.7.5","typescript": "4.8.4"}}

karma.conf.js #

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

process.env.CHROME_BIN = require('puppeteer').executablePath();

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/angular-karma-puppeteer-issue'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    browsers: ['ChromeHeadless'],
    restartOnFileChange: true
  });
};

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