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

Question

使用：

ng test

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

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

ng test --browsers MyHeadLessBrowser

编辑:

运行ning 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

这应该可以解决问题：

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 2

作为基于 William Hampshire 的一个更完整的答案，Cuga 的评论和我的个人添加。

简答：使用 ChromeHeadless

你可以直接使用 Headless Chrome:

ng test --browsers ChromeHeadless

您需要 Chrome 59+。

但是如果您需要 PhantomJS（and/or 改变默认 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 文件并取消注释以下行：

浏览器填充

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`

的默认行为

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

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

browsers: ['Chrome'],

或PhantomJS:

browsers: ['PhantomJS'],

或者两者兼而有之：

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

Answer 3

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

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

browsers: ['ChromeHeadless'],

测试愉快！

Answer 4

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

Answer 5

Angular11 上的工作解决方案。

karma.conf.js

   browsers: ["ChromeHeadless"],
   singleRun: true

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

这也适用于 CI 环境。

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

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

How can I run tests with a headless browser?

unit-testing

jasmine

karma-runner

angular-cli

angular

简答：使用 ChromeHeadless

更长的答案：使用 PhantomJS

设置

1) 安装一些依赖：

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

3) 启用 polyfills

如何运行测试

在运行执行命令时指定浏览器

仅更改 `ng test`

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

How can I run tests with a headless browser?

unit-testing

jasmine

karma-runner

angular-cli

angular

简答：使用 ChromeHeadless

更长的答案：使用 PhantomJS

设置

1) 安装一些依赖：

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

3) 启用 polyfills

如何运行 测试

在运行执行命令时指定浏览器

仅更改 ng test

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

如何运行测试

仅更改 `ng test`