angular - 如何使用 headless 浏览器运行测试？

Question

使用:

ng 测试

Angular CLI 默认在 Chrome 中运行测试，这很好，但如果我需要在仅控制台环境( headless 浏览器)中运行它们怎么办？

如果我每次运行它时都可以指定是否需要无浏览器，那就太好了，比如:

ng 测试 --browsers MyHeadLessBrowser

---

编辑:

运行 PhantomJS 我得到以下信息:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR TypeError: useValue,useFactory,data is not iterable! at http://localhost:9876/_karma_webpack_/polyfills.bundle.js:854

---

eferenceError: Can't find variable: Intl in http://localhost:9876/_karma_webpack_/vendor.bundle.js (line 49362) intlDateFormat@http://localhost:9876/_karma_webpack_/vendor.bundle.js:49362:20

Answer 1

作为基于 William Hampshire 的答案、Cuga 的评论和我的个人补充的更完整的答案。

---

简答:使用 ChromeHeadless

你可以只使用Headless Chrome :

ng test --browsers ChromeHeadless

您需要 Chrome 59+。

但是，如果您需要 PhantomJS(和/或更改默认的 ng test 行为而不带参数)，请阅读以下内容。

---

更长的答案:使用 PhantomJS

编辑:请注意 PhantomJS 项目已被存档，请参阅 this thread .

设置

为了能够(可选地)在没有浏览器的情况下使用 PhantomJS 运行测试，您应该:

1) 安装一些依赖:

npm install --save-dev karma-phantomjs-launcher
npm install --save intl

2) 将 PhantomJS 添加到 Karma 的插件列表中

打开karma.conf.js并添加 require('karma-phantomjs-launcher')到 plugins数组，例如:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      // ...
    ],

3) 启用 polyfill

打开你的 src/polyfills.ts文件并取消注释以下行:

浏览器 POLYFILLS

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

应用程序导入

import 'intl';
import 'intl/locale-data/jsonp/en';

---

如何运行测试

运行命令时指定浏览器

不，您可以使用 Chrome 运行测试(angular-cli 默认值):

ng test --browsers Chrome

或 PhantomJS( headless ):

ng test --browsers PhantomJS

仅更改 ng test 的默认行为

可以更改 ng test 的默认行为(所以当没有提供 --browsers 参数时)通过改变 browsers 的值karma.conf.js 中的数组.

现在可以设置为只使用Chrome (默认的 angular-cli 设置):

browsers: ['Chrome'],

或PhantomJS :

browsers: ['PhantomJS'],

甚至两者兼而有之:

browsers: ['Chrome', 'PhantomJS'],