如何使用无头浏览器运行测试？

Question

使用:

ng 测试

Angular CLI在Chrome中默认运行测试，这很好，但是如果我需要在仅控制台环境（无头浏览器）中运行它们呢？

如果我可以在每次运行它时指定是否想要无浏览器，那就太好了，所以类似于：

ng test --browsers MyHeadLessBrowser

编辑:

运行PhantomJS我得到了以下信息：

PhantomJS 2.1.1 (Linux 0.0.0)错误类型错误:useValue，useFactory，数据不可迭代！http://localhost:9876/_ karma _ web pack _/poly fills . bundle . js:854

ReferenceError:在中找不到变量：Intlhttp://localhost:9876/_karma_webpack_/vendor.bundle.js（第49362行）intlDateFormat@http//localhost:9876/_karma_webpack_/vendor.bundle.js:49362:20

Answer 1

Angular提供了我们在没有浏览器的情况下运行测试所需的所有东西。

打开karma.conf.js文件并将ChromeHeadless添加到浏览器数组-

browsers: ['ChromeHeadless'],

测试快乐！

Answer 2

这应该可以达到目的:

npm i --save-dev karma-phantomjs-launcher

然后修改karma.conf.js文件的插件属性，将PhantomJS插件添加到列表中。还将PhantomJS添加到浏览器属性。

plugins: [
    require( 'karma-jasmine' ),
    require( 'karma-chrome-launcher' ),
    require( 'karma-phantomjs-launcher' ),
    require( 'karma-remap-istanbul' ),
    require( 'angular-cli/plugins/karma' )
],
...
browsers: [ 'PhantomJS', 'Chrome' ],

由于您想要完全无头的体验，您可以从浏览器属性中删除Chrome，也可以从插件数组中删除karma-chrome-Launcher。

Answer 3

作为基于威廉·汉普郡的更完整的答案，库加的评论和我个人的补充。

您可以使用无头Chrome：

ng 测试 --浏览器 ChromeHeadless

你需要使用Chrome 59。

但是，如果您需要PhantomJS（和/或更改默认的＜code＞ng测试

编辑：请注意，PhantomJS项目已存档，请参阅此线程。

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

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

打开< code>karma.conf.js并将< code > require(' karma-phantom js-launcher ')添加到< code>plugins数组中，例如:

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

打开< code>src/polyfills.ts文件，取消对以下行的注释:

浏览器聚合填充

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';

不可以。您可以使用< code > Chrome (angular-CLI默认值)运行测试:

＜code＞ng测试——Chrome浏览器

或PhantomJS（无头）：

＜code＞ng测试——PhantomJS浏览器

通过更改karma.conf.js中的浏览器数组的值，可以更改ng test的默认行为（因此，当未提供--浏览器参数时）。

现在可以将其设置为仅使用＜code＞Chrome＜/code＞（默认angular cli设置）：

浏览器： ['铬']，

或者< code>PhantomJS:

浏览器： ['PhantomJS']，

或者两者都有:

浏览器：['Chrome'，'PhantomJS']，