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

Posted 2023-02-26

【中文标题】如何使用无头浏览器运行测试？

【英文标题】：How can I run tests with a headless browser?

【发布时间】：2018-03-06 10:08:27

【问题描述】：

使用：

ng test

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

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

ng test --browsers MyHeadLessBrowser

---

编辑：

运行 PhantomJS 我得到以下结果：

PhantomJS 2.1.1 (Linux 0.0.0) 错误 TypeError: useValue,useFactory,data 不可迭代！ 在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

【问题讨论】：

无头浏览器在没有浏览器 UI 的情况下运行您的浏览器，PhantomJS 是一个可使用 javascript API 编写脚本的无头 WebKit。 PhantomJS 不再维护，因为新的无头选项已经可用。

【参考方案1】：

Angular 11 上的工作解决方案。

karma.conf.js

   browsers: ["ChromeHeadless"],
   singleRun: true

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

这也适用于 CI 环境。

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

【参考方案2】：

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

【参考方案3】：

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

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

browsers: ['ChromeHeadless'],

测试愉快！

【参考方案4】：

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

浏览器填充

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

【讨论】：

任何阅读本文的人都应该知道 PhantomJS 的开发已暂停，请参阅 phantomjs.org ，这也是目前尚不支持 ES6 的原因（除非继续开发，否则也不支持）跨度>

@FrancescoBorzi 哦，是的，完全跳过了那部分......好吧，我会把它留给其他像我一样懒惰的读者

【参考方案5】：

这应该可以解决问题：

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。

【讨论】：

要添加到威廉的答案，您可以使用他提供的配置并在命令行/或您的构建服务器上指定“非 UI”选项：ng test --browsers PhantomJS

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

如果您安装了 Chrome 但只是不想让它弹出，如果您不想使用 PhantomJS，也可以指定“ChromeHeadless”作为浏览器之一。

@ShinDarth 您可以使用的选项是：ng test --browsers Chrome 或 ng test --browsers ChromeHeadless 或 ng test --browsers PhantomJS

我在使用 PhatomJs 时遇到此错误。 "message": "在 afterAll 中抛出一个错误\nTypeError: undefined is not an object (evalating 'modules[moduleId].call')", "str": "在 afterAll 中抛出一个错误\nTypeError: undefined is not一个对象（评估 'modules[moduleId].call'）"