gulp-angular-protactor: Un plugin Gulp qui peut vous aider

J'aimerai parler d'un petit plugin que j'ai eu besoin de faire pour mes projets autour d'Angular.

Pour certains d'entre eux, j'ai eu à utiliser Protractor. Cet outils permet de lancer via le WebDriver Selenium des tests d'IHM, voir des tests d'intégrations (avant de tester de bout en bout notre application, à savoir la communication entre l'application Angular et le backend). Et cela grâce à une API qui simplifie l'écriture de ces tests (en somme, ils nous évitent principalement d'avoir à taper nous même des requêtes XPath sur nos pages).

Personnellement, je ne suis pas un grand fan de cet outils. D'une part, il ne fonctionne pas bien avec PhantomJS. Du coup, quand nous lançons les tests Protractor sous des serveurs d'intégrations continues (Jenkins, Travis, ...), ce n'est pas rare que nous ayons des jobs qui partent en erreur, et qui à l’exécution suivante, fonctionnent parfaitement.

J'ai l'impression également qu'il nous impose d'utiliser Jasmine pour écrire nos tests. En effet, toutes les méthodes du WebDriver Selenium retourne des Promises (je vous conseille cette excellente vidéo si nous ne connaissait ce design pattern). Autrement dit nous avons à faire à des méthodes asynchrones. Et les méthodes de Protractor retourne également des Promises ! Or si nous voulons écrire des tests unitaires qui gèrent l'asynchronisme, nous devons les écrire d'une manière particulière (avant la version 2.0, nous devions utiliser les méthodes waitsFor and runs. Maintenant, comme pour Mocha, nous avons à déclarer dans la function du "it" un paramètre qui est une callback à appeler quand c'est fini). Et pour nous éviter de gérer cela, les développeurs de Protractor font une surchage à Jasmine. Après, je ne sais pas si dans les dernières versions, ils arrivent à gérer d'autres frameworks de tests.

Et au final, je trouve que Protractor boggue par mal dans des situations un peu stupide. Par exemple, pour de grosses applications, nous faisons du "multi-single-page". Autrement, nous avons plusieurs fichiers html qui font du single page. Et nous naviguons entre elles. L'intérêt est simple: nous n'avons pas de gestion de l'AMD sous Angular (enfin, il existe des solutions, mais pas forcément très adapté). Du coup, pour éviter de trop charger de JavaScript, mais également pour séparer la logique fonctionnel de nos applications, ce n'est pas rare que nous faisions ce genre de choses. Hé bien Protractor plante quand nous essayons de naviguer d'une page à l'autre ... Car il perd le contexte Angular. Alors que le WebDriver de Selenium y arrive (bon, il n'essaie pas de gérer un contexte Angular aussi).

Enfin bref, après cette gros digression, si nous voulons lancer nos tests Protractor, nous devons:

1. Mettre à jour le WebDriver (!)
2. Lancer un serveur WebDriver
3. Lancer nos tests via Protractor
4. Arrêter le serveur WebDriver

Du coup, à l'intégrer dans un task runner tel que Gulp, cela peut être fastidieux. C'est pourquoi il y a quelques temps, je mettais amuser à faire un petit plugin pour ça: gulp-angular-protractor.

Il va essayer de mettre à jour le WebDriver, de lancer le serveur, de lancer les tests et quand ces derniers sont fini, d'arrêter le serveur automatiquement.

Voici un petit exemple de configuration Gulp pour utiliser mon plugin:

/*jshint node: true, camelcase: false*//*global require: true*/
'use strict';

var gulp = require('gulp'),
    gulpProtractorAngular = require('gulp-angular-protractor');

// Setting up the test taskgulp.task('protractor', function(callback) {
    gulp        .src(['./src/tests/*.js'])
        .pipe(gulpProtractorAngular({
            'configFile': 'test/protractor.config.js',
            'debug': false,
            'autoStartStopServer': true        }))
        .on('error', function(e) {
            console.log(e);
        })
        .on('end', callback);
});

Si vous souhaitez l'améliorer (ou fixer des bugs!), n'hésitez pas à le forker sur le lien Github suivant: https://github.com/rochejul/gulp-angular-protractor

Voilà, j'espère que ce petit article et ce petit plugin vous sera utile !