lukaszgodula/angular-chrome-headless-docker-node-12

Angular Chrome Headless Docker镜像

本镜像内置Node 12和Chrome Headless环境，专为Angular 8及以上版本的单元测试与端到端测试设计，可直接集成到CI/CD流水线中使用。

核心功能

1. 预配置Node 12环境，满足Angular项目的运行需求
2. 集成Chrome Headless，支持无界面的浏览器测试
3. 适配Angular单元测试（ng test）和端到端测试（ng e2e）场景

使用场景

• CI/CD服务器中自动化执行Angular项目的测试流程
• 本地开发环境快速验证测试配置的有效性

配置说明

拉取镜像

bash
docker pull docker.xuanyuan.run/lukaszgodula/angular-chrome-headless-docker-node-12

运行测试命令

• 单元测试：

  bash
  ng test --watch=false --browsers=ChromeHeadless
  

• 端到端测试：

  bash
  ng e2e
  

Karma配置示例

javascript
// Karma配置文件
module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    browserNoActivityTimeout: 50000,
    browserDisconnectTolerance: 2,
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false 
    },
    coverageIstanbulReporter: {
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
      ? ['progress', 'coverage-istanbul']
      : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless', 'Chrome'],
    customLaunchers: {
      ChromeHeadless: {
        base: 'Chrome',
        flags: [
          '--headless',
          '--disable-gpu',
          '--no-sandbox',
          '--remote-debugging-port=9222'
        ]
      }
    },
    singleRun: false
  });
};

Protractor配置示例

javascript
// Protractor配置文件
const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: ***,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
      'args': ['--no-sandbox', '--headless', '--window-size=1024,768']
    }
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};