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

Question

使用：

ng test

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

如果我每次运行它都可以指定是否需要无浏览器，那么这将是很好的，所以像这样：

ng test --browsers MyHeadLessBrowser

修改：

运行PhantomJS我得到以下内容：

  

PhantomJS 2.1.1（Linux 0.0.0）错误     TypeError：useValue，useFactory，数据不可迭代！     在http://localhost:9876/_karma_webpack_/polyfills.bundle.js:854

  

eferenceError：找不到变量：http://localhost:9876/_karma_webpack_/vendor.bundle.js中的Intl（第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）启用polyfills

打开您的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

更改仅ng test

的默认行为

通过更改ng test中--browsers数组的值，可以更改browsers的默认行为（因此，当没有提供karma.conf.js参数时）。< / p>

现在可以设置为仅使用Chrome（默认的angular-cli设置）：

browsers: ['Chrome'],

或PhantomJS：

browsers: ['PhantomJS'],

甚至两者：

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

Answer 2

这应该可以解决问题：

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' ],

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

Answer 3

Angular CLI 提供了在没有浏览器的情况下运行测试所需的全部功能。

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

browsers: ['ChromeHeadless'],

测试愉快！

Answer 4

如果无头运行的目的是让您的代码在 CI 服务器上运行，您可能还需要设置 singleRun: true 在您的 karma.conf.js 中。没有这个 Karma 将持续运行，并超时。

Answer 5

Angular 11 的工作解决方案。

karma.conf.js

   browsers: ["ChromeHeadless"],
   singleRun: true

然后只需运行 ng test 或 ng test --project=project_name。

这也适用于 CI 环境。

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