在 docker 中運行 e2e Angular 測試並設置 Chromium 時出現問題

Question

我正在設置一個 docker 容器來運行我的 Angular E2E 測試。 設置 Chromium 時，我似乎遺漏了一些東西。 我正在使用 Angular 11 和 Protractor。

我的 Dockerfile 是

FROM node:15.6.0

RUN apt-get update && \
    DEBIAN_FRONTEND="nointeractive" \
    apt-get install -y --no-install-recommends \
    chromium \
    libgconf-2-4 \
    openjdk-8-jre-headless \
    && rm -rf /var/lib/apt/lists/*

WORKDIR /opt/frontend/angular
COPY . .

RUN rm -r node_modules
RUN npm install -g @angular/cli
RUN npm install

CMD ng e2e --baseUrl="http://something.com/"

我在 docker 中遇到的錯誤是

Connected.
Your global Angular CLI version (11.1.1) is greater than your local version (11.0.0). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
[20:43:25] I/file_manager - creating folder /opt/frontend/angular/node_modules/protractor/node_modules/webdriver-manager/selenium
[20:43:25] I/config_source - curl -o/opt/frontend/angular/node_modules/protractor/node_modules/webdriver-manager/selenium/chrome-response.xml https://chromedriver.storage.googleapis.com/
[20:43:27] I/downloader - curl -o/opt/frontend/angular/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_88.0.4324.96.zip https://chromedriver.storage.googleapis.com/88.0.4324.96/chromedriver_linux64.zip
[20:43:29] I/update - chromedriver: unzipping chromedriver_88.0.4324.96.zip
[20:43:29] I/update - chromedriver: setting permissions to 0755 for /opt/frontend/angular/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_88.0.4324.96
[20:43:30] I/launcher - Running 1 instances of WebDriver
[20:43:30] I/direct - Using ChromeDriver directly...
[20:43:32] E/runner - Unable to start a WebDriver session.
[20:43:32] E/launcher - Error: WebDriverError: unknown error: Chrome failed to start: exited abnormally.
  (unknown error: DevToolsActivePort file doesn't exist)
  (The process started from chrome location /usr/bin/chromium is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
  (Driver info: chromedriver=88.0.4324.96 (68dba2d8a0b149a1d3afac56fa74648032bcf46b-refs/branch-heads/4324@{#1784}),platform=Linux 4.19.121-linuxkit x86_64)
    at Object.checkLegacyResponse (/opt/frontend/angular/node_modules/selenium-webdriver/lib/error.js:546:15)
    at parseHttpResponse (/opt/frontend/angular/node_modules/selenium-webdriver/lib/http.js:509:13)
    at /opt/frontend/angular/node_modules/selenium-webdriver/lib/http.js:441:30
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
[20:43:32] E/launcher - Process exited with error code 100
Disconnected from container.

在 docker 中為 Angular e2e 測試設置 Chromium 時有什么遺漏嗎？

Answer 1

You can either use a prebuilt image that solves this task https://hub.docker.com/r/trion/ng-cli-e2e or get inspired by a working Dockerfile: https://github.com/trion-development/ docker-ng-cli-e2e/blob/master/Dockerfile

Answer 2

主要問題在 Dockerfile 和 protractor 配置文件中。

protractor 配置文件的第一個問題是您應該傳遞正確的 chromeOptions。 這些參數是必要的。 最終的 protractor 文件：

const { SpecReporter } = require('jasmine-spec-reporter');
const PrettyReporter = require('protractor-pretty-html-reporter').Reporter;
const path = require('path');
const fs = require('fs');
const now = new Date();
exports.report_name = 'Report-' + now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + "-" + now.getHours() + "-" + now.getMinutes() + "-" + now.getSeconds();
exports.logfile_name = 'results-' + now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + "-" + now.getHours() + "-" + now.getMinutes() + "-" + now.getSeconds();
const Reporter = path.resolve("./target/");
const report = `${Reporter}` + '/' + exports.report_name;

const mkdirSync = function (report) {
  try {
    fs.mkdirSync(report);
  }
  catch (err) {
    if (err.code !== 'EEXIST')
      throw err;
  }
};
// @ts-ignore
var prettyReporter = new PrettyReporter({
  path: report,
  screenshotOnPassed: true
});

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

另一個問題是無法找到特定版本的 Chrome，由於版本可能會更改，因此每次構建都很容易遇到此問題。 解決方案是確保您知道要安裝的 Chrome 版本。 然后您需要使用 node-modules 中的 webdriver-manager 更新預期的 Chrome 版本（請注意，此步驟應在安裝 node 包后完成）。 這是成功運行的 Dockerfile 的編輯版本。 最終 Dockerfile：

FROM node:15.6.0
ENV chrome_version=88.0.4324.104
ENV testurl default_test_base_url

# Google Chrome
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list \
    && apt-get update -qqy \
    && apt-get -qqy install google-chrome-stable \
    && rm /etc/apt/sources.list.d/google-chrome.list \
    && rm -rf /var/lib/apt/lists/* /var/cache/apt/* \
    && sed -i 's/"$HERE\/chrome"/"$HERE\/chrome" --no-sandbox/g' /opt/google/chrome/google-chrome
    
WORKDIR /opt/frontend/angular
COPY ./frontend/angular .

RUN rm -rf node_modules || true
RUN npm install -g @angular/cli@11
RUN npm install
RUN ./node_modules/.bin/webdriver-manager update --versions.chrome ${chrome_version}

CMD ng e2e --baseUrl=$testurl