web-dev-qa-db-ja.com

ヘッドレスブラウザーでテストを実行するにはどうすればよいですか？

を使用して：

ng test

Angular CLIはデフォルトでChromeでテストを実行しますが、これは素晴らしいですが、コンソール専用環境（ヘッドレスブラウザ）で実行する必要がある場合はどうすればよいですか？

また、実行するたびにブラウザレスにするかどうかを指定できるといいので、次のようにします。

ng test --browsers MyHeadLessBrowser

編集：

phantomJSを実行すると、次のものが得られました。

PhantomJS 2.1.1（Linux 0.0.0）エラーTypeError：useValue、useFactory、dataは反復不可能です！ at http：// localhost：9876/_karma_webpack_/polyfills.bundle.js：854

eferenceError：変数が見つかりません：Intl in http：// localhost：9876/_karma_webpack_/vendor.bundle.js （49362行目）intlDateFormat @ http：// localhost：9876/_karma_webpack_/vendor.bundle.js：49362：2

angularunit-testingjasminekarma-runnerangular-cli
36
Francesco Borzi

William Hampshireの1つ、Cugaのコメントと私の個人的な追加。

短い答え：ChromeHeadlessを使用する

Headless Chrome を使用するだけです：

ng test --browsers ChromeHeadless

Chrome 59+が必要です。

ただし、PhantomJSが必要な場合（および/または引数なしでデフォルトのng test動作を変更する場合）、以下をお読みください。

長い答え：PhantomJSを使用する

EDIT：PhantomJSプロジェクトがarchivedになっていることに注意してください- このスレッド 。

セットアップ

PhantomJSを使用して、ブラウザーなしで（オプションで）テストを実行できるようにするには、次のことを行う必要があります。

1）いくつかの依存関係をインストールします。

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

2）PhantomJSをKarmaのプラグインリストに追加する

karma.conf.jsを開き、plugins配列にrequire('karma-phantomjs-launcher')を追加します。例：

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      // ...
    ],

3）ポリフィルを有効にする

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のデフォルトの動作を変更する

ng testのbrowsers配列の値を変更することにより、--browsersのデフォルトの動作を変更できます（したがって、karma.conf.js引数が提供されない場合）。

Chrome（デフォルトの角度CLI設定）を使用するように設定できるようになりました。

browsers: ['Chrome'],

またはPhantomJS：

browsers: ['PhantomJS'],

またはその両方：

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

61
Francesco Borzi

これでうまくいくはずです：

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を削除し、プラグイン配列からkarma-chrome-launcherも削除できます。

5
William Hampshire