How i solve E/launcher - Process exited with error code 199 on gitlab job when run ng e2e

Question

I need to run ng e2e test on gitlab, when the job is running is failed with E/launcher - Process exited with error code 199

An angular 8 project

first i install on my project Puppeteer

npm install puppeteer --save

and this my karma.conf.js for ng test

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
const process = require('process');
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-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome_no_sandbox'],
    customLaunchers: {
      Chrome_no_sandbox: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    },
    concurrency: Infinity,
    singleRun: true
  });
};

and this is protractor.conf.js for ng e2e

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    chromeOptions: {
      binary: require('puppeteer').executablePath(),
      args: ['--headless', '--disable-gpu', '--no-sandbox', '--disable-extensions', '--disable-dev-shm-usage']
    },
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

and this is my job .gitlab-ci.yml

image: node:latest

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/

before_script:
  - apt-get update && apt-get install -y unzip fontconfig locales gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
  - npm cache clean --force
  - npm install --silent && npm rebuild

stages:
  - test
  - build

unit_test:
  stage: test
  script: node_modules/.bin/ng test

e2e_test:
  image: gnomeontherun/docker-node-chrome-headless:latest
  stage: test
  script: node_modules/.bin/ng e2e

release_job:
  stage: build
  script: node_modules/.bin/ng build --prod --aot
  artifacts:
    name: "project-$CI_COMMIT_REF_NAME"
    paths:
      - dist/
  only:
    - tags

this is my error on gitlab

[01:57:35] I/launcher - Running 1 instances of WebDriver
[01:57:35] I/direct - Using ChromeDriver directly...
[01:57:35] E/launcher - unknown error: cannot find Chrome binary
  (Driver info: chromedriver=75.0.3770.90 (a6dcaf7e3ec6f70a194cc25e8149475c6590e025-refs/branch-heads/3770@{#1003}),platform=Linux 4.19.23-coreos-r1 x86_64)
[01:57:35] E/launcher - WebDriverError: unknown error: cannot find Chrome binary
  (Driver info: chromedriver=75.0.3770.90 (a6dcaf7e3ec6f70a194cc25e8149475c6590e025-refs/branch-heads/3770@{#1003}),platform=Linux 4.19.23-coreos-r1 x86_64)
    at Object.checkLegacyResponse (/builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/selenium-webdriver/lib/error.js:546:15)
    at parseHttpResponse (/builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/selenium-webdriver/lib/http.js:509:13)
    at /builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/selenium-webdriver/lib/http.js:441:30
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
From: Task: WebDriver.createSession()
    at Function.createSession (/builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/selenium-webdriver/lib/webdriver.js:769:24)
    at Function.createSession (/builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/selenium-webdriver/chrome.js:761:15)
    at Direct.getNewDriver (/builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/protractor/built/driverProviders/direct.js:77:33)
    at Runner.createBrowser (/builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/protractor/built/runner.js:195:43)
    at /builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/protractor/built/runner.js:339:29
    at _fulfilled (/builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/q/q.js:834:54)
    at /builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/q/q.js:863:30
    at Promise.promise.promiseDispatch (/builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/q/q.js:796:13)
    at /builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/q/q.js:556:49
    at runSingle (/builds/chetoui.mohamedaziz/angular-ci-cd-firebase/node_modules/q/q.js:137:13)
[01:57:35] E/launcher - Process exited with error code 199

Answer 1

I share with you my configuration to run the tests of my Angular project both locally and with gitlab-ci. It cost me several days of work, documentation and many, many tests.

My trick was to define a configuration that would allow me to run the unit and e2e tests successfully locally and then get an equivalent with Docker images and adjust the configuration until everything flows. I didn't find a place where everything was together, I put together many parts to get a successful configuration, so I gladly share my result. I hope it can work for you too.

.gitlab-ci.yml

image: node:alpine

cache:
  paths:
  - node_modules/

stages:
  - install
  - test

install:
  stage: install
  before_script:
  script:
    - npm install

unit-test:
  stage: test
  before_script:
    - apk add --no-cache chromium nss freetype freetype-dev harfbuzz ca-certificates ttf-freefont
    - export CHROME_BIN=/usr/bin/chromium-browser
  script: 
    - npm run test

e2e-test:
  image: node:10
  stage: test
  before_script:
    - echo "deb http://dl.google.com/linux/chrome/deb/ stable main" | tee -a /etc/apt/sources.list
    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
    - apt-get -qq update -y
    - apt-get -qq install -y --allow-unauthenticated google-chrome-stable xvfb gtk2-engines-pixbuf xfonts-cyrillic xfonts-100dpi xfonts-75dpi xfonts-base xfonts-scalable imagemagick x11-apps default-jre
    - Xvfb :0 -ac -screen 0 1024x768x24 &
    - export DISPLAY=:99
    - npm install
    - node ./node_modules/protractor/bin/webdriver-manager update
  script:
    - npm run e2e --protractorConfig=protractor.conf.js

karma.conf.js

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

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 // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome_no_sandbox'],
    customLaunchers: {
      Chrome_no_sandbox: {
        base: 'ChromeHeadless',
        flags: ['--headless', '--no-sandbox']
      }
    },
    concurrency: Infinity,
    singleRun: true
  });
};

protractor.conf.js

// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

/**
 * @type { import("protractor").Config }
 */
exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
       args: ['--no-sandbox', '--headless', '--disable-extensions', '--disable-dev-shm-usage']
     }},
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};