web-dev-qa-db-fra.com

Comment puis-je exécuter des tests avec un navigateur sans tête?

En utilisant:

ng test

Angular CLI exécute les tests par défaut dans Chrome, ce qui est excellent, mais que se passe-t-il si je dois les exécuter dans un environnement sans console (navigateur sans interface graphique)?

De plus, ce serait bien si je peux spécifier si je veux utiliser un navigateur sans navigateur ou non à chaque fois que je l'exécute, ainsi:

ng test --browsers MyHeadLessBrowser


Modifier :

en cours d'exécution PhantomJS j'ai eu le texte suivant:

PhantomJS 2.1.1 (Linux 0.0.0) ERREUR TypeError: useValue, useFactory, les données ne sont pas itérables! at http: // localhost: 9876/_karma_webpack_/polyfills.bundle.js: 854


eferenceError: Impossible de trouver la variable: Intl dans http: // localhost: 9876/_karma_webpack_/vendor.bundle.js (ligne 49362) intlDateFormat @ http: // localhost: 9876/_karma_webpack_/vendor.bundle.js: 49362: 2

36
Francesco Borzi

Comme réponse plus complète basée sur celle de William Hampshire, le commentaire de Cuga et mes ajouts personnels.


Réponse courte: utilisation de ChromeHeadless

Vous pouvez simplement utiliser Headless Chrome :

ng test --browsers ChromeHeadless

Vous devez avoir Chrome 59+.

Mais si vous avez besoin de PhantomJS (et/ou de modifier le comportement par défaut ng test Sans arguments), lisez ce qui suit.


Réponse plus longue: utilisation de PhantomJS

EDIT: Sachez que le projet PhantomJS a été archivé, voir ce fil .

Installer

Pour pouvoir exécuter (facultativement) vos tests sans navigateur, à l'aide de PhantomJS, vous devez:

1) Installez des dépendances:

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

2) Ajouter PhantomJS à la liste des plugins de Karma

Ouvrez karma.conf.js Et ajoutez require('karma-phantomjs-launcher') au tableau plugins, par exemple:

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

3) Activer les polyfill

Ouvrez votre fichier src/polyfills.ts Et décommentez les lignes suivantes:

POLYFILLS DE NAVIGATEUR

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';

IMPORTATIONS D'APPLICATION

import 'intl';
import 'intl/locale-data/jsonp/en';

Comment faire les tests

Spécifier les navigateurs lors de l'exécution de la commande

Non, vous pouvez aussi exécuter le test en utilisant Chrome (le paramètre angular-cli par défaut):

ng test --browsers Chrome

Ou PhantomJS (sans tête):

ng test --browsers PhantomJS

Changer le comportement par défaut de seulement ng test

Il est possible de changer le comportement par défaut de ng test (Donc quand aucun argument --browsers N'est fourni) en modifiant la valeur du tableau browsers dans karma.conf.js.

Il peut maintenant être configuré pour utiliser simplement Chrome (configuration par défaut angular-cli):

browsers: ['Chrome'],

ou PhantomJS:

browsers: ['PhantomJS'],

ou même les deux:

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

61
Francesco Borzi

Cela devrait faire l'affaire:

npm i --save-dev karma-phantomjs-launcher

Modifiez ensuite la propriété plugins du fichier karma.conf.js, en ajoutant le plugin PhantomJS à la liste. Ajoutez également PhantomJS à la propriété des navigateurs.

plugins: [
    require( 'karma-jasmine' ),
    require( 'karma-chrome-launcher' ),
    require( 'karma-phantomjs-launcher' ),
    require( 'karma-remap-istanbul' ),
    require( 'angular-cli/plugins/karma' )
],
...
browsers: [ 'PhantomJS', 'Chrome' ],

Puisque vous voulez une expérience totalement sans tête, vous pouvez supprimer Chrome de la propriété des navigateurs, ainsi que karma-chrome-launcher du tableau de plugins.

5
William Hampshire