在 docker 中运行 e2e Angular 测试并设置 Chromium 的问题

您可以使用解决此任务的预构建映像 https://hub.docker.com/r/trion/ng-cli-e2e 或从工作 Dockerfile 中获得启发： https://github.com/trion-development/docker-ng-cli-e2e/blob/master/Dockerfile

主要问题出在 Dockerfile 和量角器配置文件中。

量角器配置文件的第一个问题是您应该传递正确的 chromeOptions。这些参数是必须的。最终的量角器文件：

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