Karma fails to capture Chrome v93 and times-out/gives up

Question

We have just encountered a number of build failures in our CI environment (TeamCity/Windows) following a recent auto-update of Google Chrome to version 93. These failures all look like this:

[14:02:41] :     [Step 3/12] > OUR_APP_PACKAGE@0.0.0 ci-test C:\BuildAgent\work\7084fa910d4648a4\OUR_APP_PACKAGE
[14:02:41] :     [Step 3/12] > ng test --watch=false --sourceMap=false
[14:02:41] :     [Step 3/12] 
[14:03:00] :     [Step 3/12] 01 09 2021 14:02:59.394:INFO [karma]: Karma v3.0.0 server started at http://0.0.0.0:9876/
[14:03:00] :     [Step 3/12] 01 09 2021 14:02:59.779:INFO [launcher]: Launching browser Chrome with unlimited concurrency
[14:03:00] :     [Step 3/12] 01 09 2021 14:02:59.793:INFO [launcher]: Starting browser Chrome
[14:04:00] :     [Step 3/12] 01 09 2021 14:04:00.752:WARN [launcher]: Chrome have not captured in 60000 ms, killing.
[14:04:00] :     [Step 3/12] 01 09 2021 14:04:00.820:INFO [launcher]: Trying to start Chrome again (1/2).
[14:05:01] :     [Step 3/12] 01 09 2021 14:05:01.422:WARN [launcher]: Chrome have not captured in 60000 ms, killing.
[14:05:01] :     [Step 3/12] 01 09 2021 14:05:01.461:INFO [launcher]: Trying to start Chrome again (2/2).
[14:06:01] :     [Step 3/12] 01 09 2021 14:06:01.837:WARN [launcher]: Chrome have not captured in 60000 ms, killing.
[14:06:01] :     [Step 3/12] 01 09 2021 14:06:01.879:ERROR [launcher]: Chrome failed 2 times (timeout). Giving up.
[14:06:02]W:     [Step 3/12] npm ERR! code ELIFECYCLE
[14:06:02]W:     [Step 3/12] npm ERR! errno 1
[14:06:02]W:     [Step 3/12] npm ERR! OUR_APP_PACKAGE@0.0.0 ci-test: `ng test --watch=false --sourceMap=false`
[14:06:02]W:     [Step 3/12] npm ERR! Exit status 1
[14:06:02]W:     [Step 3/12] npm ERR! 
[14:06:02]W:     [Step 3/12] npm ERR! Failed at the OUR_APP_PACKAGE@0.0.0 ci-test script.
[14:06:02]W:     [Step 3/12] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[14:06:02]W:     [Step 3/12] 
[14:06:02]W:     [Step 3/12] npm ERR! A complete log of this run can be found in:
[14:06:02]W:     [Step 3/12] npm ERR!     C:\Users\teamcity\AppData\Roaming\npm-cache\_logs\2021-09-01T13_06_02_086Z-debug.log
[14:06:02]W:     [Step 3/12] Process exited with code 1
[14:05:46]E:     [Step 3/12] Process exited with code 1 (Step: "npm run ci-test" (test Angular app) (Command Line))

We have ruled-out any changes to our codebase causing this error. Repeating a CI build of a commit which previously built successfully (on that same build agent, with the exact same build config) has also now failed.

Subsequently we noticed that all failures were on a single build agent, but on the following day another agent also began to fail. The common factor amongst the build agents which exhibited the failure was that they had auto-updated to Google Chrome v93.

Answer 1

Actually we started to explore the same issue and the thing that helped was to start use of custom launcher with couple of flags.

Before our karma.conf.js contained the following settings:

module.exports = function (config) {
    config.set({
       ...
       browsers: ['Chrome'],
       ...
       customLaunchers: {
            ChromeHeadlessNoSandbox: {
                base: 'ChromeHeadless',
                flags: ['--no-sandbox']
            }
        },
    });
}       

Now it contains the following changes and tests are started to run again:

module.exports = function (config) {
    config.set({
       ...
       browsers: ['ChromeNoSandbox'],
       ...
        customLaunchers: {
            ChromeNoSandbox: {
                base: 'Chrome',
                flags: [
                    '--no-sandbox',
                ]
            }
        },
    });
}       

Answer 2

Whether or not there is a true bug in Google Chrome aside, we noticed that we could work around this problem by using ChromeHeadless instead of regular Chrome in our Karma config file. We made the following one-line change in our Karma config karma.conf.js and everything is working once again. I've included the whole file but really only the browsers: line is relevant.

We had no particular reason to be using full Chrome instead of Chrome Headless so that workaround is suitable for us indefinitely.

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-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'], // Previously this was 'Chrome'
    singleRun: false
  });