我如何求解E/启动器 - 运行NG E2E时在GitLab作业上使用错误代码19的过程

Question

我需要在gitlab上运行ng e2e测试，当作业运行时，E/启动器失败 - 使用错误代码199

退出的过程

Angular 8项目

首先我安装在项目puppeteer

npm install puppeteer --save

这是我的Karma.conf.js，用于NG测试

// 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
  });
};

这是ng e2e

的protractor.conf.js

// 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 } }));
  }
};

这是我的工作.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

这是我在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

我与您分享我的配置，以在本地和gitlab-ci上运行我的Angular Project的测试。这使我花了几天的时间，文档和许多测试。

我的技巧是定义一种配置，该配置使我能够在本地成功运行E2E测试，然后与Docker Images相等，并调整配置直到所有内容流动。我没有找到一切在一起的地方，我整理了许多零件以获得成功的配置，因此我很乐意分享我的结果。我希望它也可以为您服务。

.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 } }));
  }
};