kekel87/node-chrome-firefox

Docker for Node.js CI（Gitlab）

!https://raw.githubusercontent.com/kekel87/readme-images/master/gitlab.png !https://raw.githubusercontent.com/kekel87/readme-images/master/node.png !https://raw.githubusercontent.com/kekel87/readme-images/master/npm.png !https://raw.githubusercontent.com/kekel87/readme-images/master/yarn.png !https://raw.githubusercontent.com/kekel87/readme-images/master/karma.png !https://raw.githubusercontent.com/kekel87/readme-images/master/protractor.png !https://raw.githubusercontent.com/kekel87/readme-images/master/phantomjs.png !https://raw.githubusercontent.com/kekel87/readme-images/master/chrome.png !https://raw.githubusercontent.com/kekel87/readme-images/master/firefox.png

镜像概述

本镜像为Node.js应用提供完整的持续集成（CI）环境，适用于Gitlab CI等场景，集成了Node.js运行环境、Chrome和Firefox浏览器，以及Karma、Protractor等测试工具，支持完成应用的依赖安装、构建、单元测试和端到端测试流程。

核心功能

• 安装Node.js应用依赖（支持npm、yarn）
• 构建Node.js应用
• 在Chrome和Firefox浏览器上运行Karma单元测试
• 在Chrome和Firefox浏览器上运行Protractor端到端测试

使用场景

• Gitlab CI中执行Node.js应用的单元测试和端到端测试
• 本地模拟CI环境进行测试验证

配置说明

Gitlab CI - Karma测试配置示例

yml
# .gitlab-ci.yml
unit:
  image: kekel87/node-chrome-firefox
  stage: test
  script:
    - yarn
    - yarn ng test --browsers ChromeHeadless --code-coverage --watch=false --progress=false
  coverage: /Statements\s*:\s*([^%]+)/

javascript
// karma.conf.js
customLaunchers: {
  ChromeHeadless: {
    base: 'Chrome',
    flags: [
      '--headless',
      '--disable-gpu',
      '--remote-debugging-port=9222',
      '--no-sandbox'
    ]
  },
  FirefoxHeadless: {
    base: 'Firefox',
    flags: ['-headless'],
  },
},

Gitlab CI - Protractor测试配置示例

yml
# .gitlab-ci.yml
e2e:
  image: kekel87/node-chrome-firefox
  stage: test
  script:
    - yarn
    - yarn ng e2e --protractor-config e2e/protractor-headless.conf.js

javascript
// protractor-headless.conf.js
multiCapabilities: [
  {
    browserName: 'firefox',
    'moz:firefoxOptions': {
      args: ['--headless'],
    },
  },
  {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--no-sandbox', '--headless', '--disable-gpu'],
    },
  },
],

本地测试命令示例

bash
# 构建镜像
docker build -t kekel87/node-chrome-firefox .
# 运行镜像并挂载本地Angular应用目录
docker run -it --rm --name test -v $MY_ANGULAR_APP:/app kekel87/node-chrome-firefox sh
cd app
# 安装依赖
yarn
# 执行代码检查、单元测试和端到端测试
yarn ng lint --type-check
yarn ng test --browsers ChromeHeadless --watch=false
yarn ng test --browsers FirefoxHeadless --watch=false
yarn e2e --configuration headless
# 构建生产环境包
yarn ng build --prod --progress=false
# 启动服务器验证构建结果
angular-http-server --path ./dist/