如何使用无头浏览器运行测试？ [英] How can I run tests with a headless browser?

问题描述

使用：

ng test

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

Angular CLI runs the tests by default in Chrome, which is great, but what if I need to run them in a console-only environment (headless browser)?

此外它如果我可以指定我是否想要无浏览器，或者不是每次运行它都会很好，所以类似于：

Also it would be nice if I can specify if I want browser-less or not each time I run it, so something like:

ng test - 浏览器MyHeadLessBrowser

编辑：

运行PhantomJS我得到以下内容：

running PhantomJS I got the following:

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

---

---

eferenceError：Can'找到变量： http：// localhost：9876 / _karma_webpack_ / vendor.bundle.js中的Intl （第49362行）
intlDateFormat @ http：// localhost：9876 /_karma_webpack_/vendor.bundle.js:49362:20

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

推荐答案

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

As a more complete answer based on William Hampshire's one, Cuga's comment and my personal additions.

你可以使用无头Chrome ：

ng test - 浏览器ChromeHeadless

你需要拥有Chrome 59 +。

You need to have Chrome 59+.

但是如果你需要PhantomJS （和/或chaning默认 ng测试没有参数的行为）阅读以下内容。

But if you need PhantomJS (and/or chaning the default ng test behaviour with no arguments) read the following.

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

In order to be able to (optionally) run your tests without a browser, using PhantomJS, you should:

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

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

打开 karma.conf.js 并将 require（'karma-phantomjs-launcher'）添加到插件数组中，例如：

2) Add PhantomJS to the Karma's plugin list

Open karma.conf.js and add require('karma-phantomjs-launcher') to the plugins array, for example:

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 文件并取消注释以下行：

3) Enable polyfills

Open your src/polyfills.ts file and uncomment the following lines:

浏览器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默认值）：

---

How to run the tests

Specifying the browsers when running the command

No you can either run the test using Chrome (the angular-cli default):

ng test - 浏览器Chrome

或PhantomJS（无头）：

Or PhantomJS (headless):

ng test - 浏览器PhantomJS

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

It is possible to change the default behaviour of ng test (so when no --browsers argument is provided) by changing the value of the browsers array in karma.conf.js.

现在可以设置为只使用 Chrome （默认的角度cli设置）：

It can now be set to just use Chrome (default angular-cli setup):

浏览器：['Chrome']，

或 PhantomJS ：

browsers：['PhantomJS']，

或e两个：

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

这篇关于如何使用无头浏览器运行测试？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！