Reputation: 11
On an Angular project we use Puppeteer to include a Headless Chrome binary on dependency installation, it helps on a lot of things, including CI. The way to do this is described Here
It always worked fine but since last Chromium binary version bump (done with Puppeteer v19.7.0), when executing npm test
it opens a command line window, which also breaks Karma debugger attachment on Webstorm IDE. The last puppeteer version on which we didn't have any issue was 19.6.3
I didn't find any breaking changes with the new Chromium version and had no issue launching it in Headless mode. (it can be found in npm .cache
folder)
I tried changing the karma-chrome-launcher
configuration, defining a custom Chrome launcher with --headless
and other flags.
I tried different puppeteer versions, only versions before 19.7.0 worked.
I cleared npm cache and retry from scratch, event deleted chrome binaries.
To reproduce the issue I created a new empty Angular Project, which I updated to synchronise deps versions and Add a Karma configuration file to include Puppeteer Chrome.
Here's the files :
{
"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 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
});
};
Upvotes: 1
Views: 721