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

Question

使用:

ng test

Angular CLI默认在Chrome中运行测试,这很棒,但是如果我需要在仅限控制台的环境(无头浏览器)中运行它们呢？

如果我可以指定我是否希望每次运行时都不需要浏览器,那将是很好的,所以类似于:

ng test --browsers MyHeadLessBrowser

---

编辑:

运行PhantomJS我得到以下内容:

PhantomJS 2.1.1(Linux 0.0.0)ERROR TypeError:useValue,useFactory,数据不可迭代!在http:// localhost:9876/_karma_webpack_/polyfills.bundle.js:854

---

eferenceError:在国际:找不到变量的http://本地主机:9876/_karma_webpack_/vendor.bundle.js(线49362)intlDateFormat @ HTTP://本地主机:9876/_karma_webpack_/vendor.bundle.js:49362:20

Answer 1

作为一个更完整的答案,基于威廉汉普郡的一个,Cuga的评论和我个人的补充.

简短回答:使用ChromeHeadless

你可以使用Headless Chrome:

ng test --browsers ChromeHeadless

您需要拥有Chrome 59+.

但是,如果您需要PhantomJS(和/或ng test使用无参数转换默认行为),请阅读以下内容.

更长的答案:使用PhantomJS

编辑:请注意PhantomJS项目已存档,请参阅此主题.

建立

为了能够(可选)在没有浏览器的情况下运行您的测试,使用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(无头):

ng test --browsers PhantomJS

更改just的默认行为 ng test

通过更改数组的值,可以更改ng test(因此,当没有--browsers提供参数时)的默认行为.browserskarma.conf.js

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

browsers: ['Chrome'],

或者PhantomJS:

browsers: ['PhantomJS'],

甚至两者:

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

Answer 2

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

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

browsers: ['ChromeHeadless'],

测试愉快！

Answer 3

Angular 11 上的工作解决方案。

karma.conf.js

   browsers: ["ChromeHeadless"],
   singleRun: true

然后运行ng test​​或ng test --project=project_name.

这也适用于 CI 环境。

注意：这是两个不同答案的组合。

Answer 4

这应该可以解决问题：

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

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

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

由于您需要完全无头的体验，因此可以从browsers属性中删除Chrome，也可以从plugins数组中删除karma-chrome-launcher。