« Retour

Protactor + AngularJS : installation et exemple de script

Pourquoi Protactor ?

Protractor est un framework de test dont le but est de faciliter l'automatisation des tests fonctionnels pour les SUT (system under test) développés avec AngularJS. Il se base sur WebdriverJS, l'implémentation Javascript de Selenium, et intègre des solutions telles que Jasmine, qui permet de rédiger des tests en BDD (behavior-driver development), ou encore Cucumber et Mocha.

Protractor reconnaît les concepts AngularJS, tels que les attributs ng-repeaterng-controllerng-model... qui sont employés dans le code HTML pour manipuler les composants web.

D'autres frameworks de test sont bien sûr capables d'automatiser les applications AngularJS, mais utiliser Protactor améliore :

  • la rapidité d'écriture des tests
  • leur maintenabilité (passer par des xpath ou des sélecteurs CSS serait moins robuste)
  • leur lisibilité

Inversement, il est possible d'utiliser Protractor pour automatiser les tests d'une application non-AngularJS (voir cet article).

Nous vous proposons donc une série d'articles sur Protractor :

  1. Installation et exemple de script (le présent article !)
  2. Gestion des jeux de données et des dépendances du projet
  3. Structure d'un projet industrialisé

Nous utilisons ici la version 5 de Protractor.

Installation de Protractor

Voici quelques prérequis avant de pouvoir vous lancer dans les tests avec Protractor :

  • Avoir NodeJS installé sur sa machine (ce qui permet d'utiliser npm)
  • Pour l'installation, lancer les commandes suivantes :

npm install -g protractor
webdriver-manager update

  • Pour démarrer le serveur Selenium sur votre machine, démarrer une invite et lancer la commande :

webdriver-manager start

Par défaut, le serveur Selenium est lancé sur le port 4444. Vous pouvez changer le port en ajoutant un paramètre à la commande.

webdriver-manager start --seleniumPort 5555

Tant que vous utiliserez Protractor sur votre machine, ne fermez pas cette invite.

Pour vérifier que le serveur est bien lancé, rendez-vous sur http://localhost:4444/wd/hub (en changeant le port si besoin).

Exemple de test Protractor

Au cours de ce test, nous allons interagir avec un composant de la page d'accueil du site d'AngularJS.

Sur cette page, quand l'utilisateur entre une chaîne de caractères dans le champ "Name", la phrase de salutations se met immédiatement à jour. C'est cette fonctionnalité que nous allons tester.

Dans l'inspecteur, on voit que l'attribut "ng-model" du champ de saisi a pour valeur "yourName" ; c'est cet attribut qui va nous servir lors de l'identification de l'objet.

Nous avons maintenant besoin de 2 fichiers : le fichier de configuration, qui permet de lancer le test, et le script de test en lui-même.

Un script de test Protractor

Le fichier de test (appelons-le dis-bonjour.js) a le contenu suivant :

describe("Suite de test de la feature qui dit bonjour", function() {

  it("Test 1 : si je renseigne mon nom, la feature me dit bonjour", function() {
    browser.get(browser.baseUrl);
    element(by.model('yourName')).sendKeys('Zoé');
    var message= element(by.xpath("//div[contains(@class, 'well')]//h1"));
    expect(message.getText()).toEqual('Hello Zoé!');
  });

  it("Test 2 : si je rêvasse en écrivant mon script de test, j'obtiens un faux positif", function() {
    browser.get('https://angularjs.org');
    element(by.model('yourName')).sendKeys('Chloé');
    var message= element(by.xpath("//div[contains(@class, 'well')]//h1"));
    expect(message.getText()).toEqual('Hello Zoé!');
  });

});

Structure et la syntaxe du script Protractor

Conformément à la syntaxe Jasmine, la suite de test se déroule dans la fonction "describe". Chaque test est détaillé dans une fonction "it".

L'URL de base (browser.baseUrl) est définie dans le fichier de configuration. Rien n'empêche bien sûr d'utiliser une autre URL (comme par exemple dans le deuxième test du fichier).

Fichier de configuration Protractor

Et maintenant, le fichier de configuration qui va permettre de lancer ces deux courts tests. Appelons-le conf.js. Celui-ci est minimaliste et ne contient que l'adresse du serveur Selenium, le chemin du script de test, et l'URL du SUT.

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['dis-bonjour.js'],
  baseUrl: 'https://angularjs.org'
};

Lancer les tests Protractor en ligne de commande

Maintenant, pour lancer les deux tests contenus dans le script, il suffit d'ouvrir une invite de commande, de se positionner dans le dossier contenant les deux fichiers et de lancer la commande :

protactor conf.js

Remarque : il est possible de changer la baseUrl au moment du lancement du test, ce qui donne :

protactor --baseUrl=http://monsupersiteweb.nc conf.js

Ce qui est pratique si l'on souhaite faire tourner les tests sur différents environnements par exemple.

Par défaut, c'est un navigateur Google Chrome qui s'ouvre et exécute les scénarios définis dans le script de test Protractor. Ce qui donne, dans notre cas, le résultat suivant :

Plutôt clair, non ?

Protractor et les IDE

Pour l'écriture des tests, un simple éditeur de texte suffit pour si l'on veut juste tester les commandes de bases et se faire une idée rapide des possibilités du framework. Mais pour industrialiser un projet de tests automatisés, il est bien sûr préférable d'utiliser un IDE. Il existe des plugins Protactor pour IntelliJ et pour Eclipse. Il est à noter que celui d'IntelliJ n'est disponible que si l'on dispose d'une licence commerciale (version Ultimate, et non Community). Il est possible d'essayer gratuitement la version Ultimate pendant 30 jours.

Protractor avec Eclipse

Configurer le plugin Protractor d'Eclipse nécessite quelques manipulations en plus (détaillées dans cette vidéo). Attention toutefois, depuis mars 2017 un bug empêche le plugin de tourner correctement.

Une erreur s'affiche : "SyntaxError: Unexpected token ..."

En effet, la configuration de Run Protactor utilise par défaut la version 4.2.4 de NodeJS, alors que 2 versions majeures ont été publiées depuis !

Indiquer un chemin vers un exécutable plus récent est possible, mais provoque une erreur : "Error while launching client file, Cannot find node install path node-native".

A suivre donc... Pour la suite de cette série d'articles, nous utiliserons donc la solution d'évitement : passer sur la version d'essai d'IntelliJ.

Protractor avec IntelliJ

  1. Créez un projet.
  2. Dans le fichier src, placez vos 2 fichiers (test et configuration).
  3. Créer une "Run configuration" Protractor
  4. Renseigner le chemin vers le fichier de configuration. Les chemins vers NodeJS et Protractor sont, normalement, trouvée automatiquement.

Voilà ce à quoi ressemblent les résultats d'exécution :

On se retrouve demain pour aller plus loin dans l'exploration de Protractor. Car on ne veut pas seulement créer un test, on veut pouvoir le jouer avec une multitude de jeux de données !

Un avis ? Un commentaire ?

Cet espace est pour vous.