Un avis ? Un commentaire ?
Cet espace est pour vous.
Note préalable : cet article date de 2017. Depuis, Protractor a atteint la fin de sa vie. Merci à lui et surtout aux personnes qui ont contribué à cet outil !
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-repeater, ng-controller, ng-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 Protractor améliore :
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 :
Nous utilisons ici la version 5 de Protractor.
Voici quelques prérequis avant de pouvoir vous lancer dans les tests avec Protractor :
npm install -g protractor
webdriver-manager update
webdriver-manager start
EDIT de décembre 2020 : Si à ce moment-là votre invite de commande vous indique que « java n’est pas reconnu en tant que commande interne ou externe », assurez-vous que votre PATH contient bien le chemin vers le dossier « bin » qui se trouve dans le dossier où est installé Java. Ca peut ressembler à C:Program FilesJavajdk-xx.x.xbin. (Fin de l’EDIT)
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).
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.
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é!');
});
});
EDIT de décembre 2020 : si vous souhaitez lancer vos tests sur une application qui n’est pas une application Angular, il est important d’intégrer la commande suivante à vos scripts, afin qu’elle empêche Protractor d’attendre qu’Angular soit correctement chargé : browser.waitForAngularEnabled(false). (Fin de l’EDIT)
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).
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: 'http://monsupersiteweb.nc'
};
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 :
protractor conf.js
Remarque : il est possible de changer la baseUrl au moment du lancement du test, ce qui donne :
protractor --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 ?
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 Protractor 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.
EDIT de décembre 2020 : le bug évoqué est peut-être résolu depuis, nous n’avons pas réessayé. (Fin de l’EDIT)
Configurer le plugin Protractor d’Eclipse nécessite quelques manipulations en plus (détaillées dans cette vidéo). Attention toutefois, en mars 2017 un bug empêchait le plugin de tourner correctement.
En effet, la configuration de Run Protractor 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.
Voilà ce à quoi ressemblent les résultats d’exécution :
Ce paragraphe est un EDIT de décembre 2020.
Ouvrez une nouvelle fenêtre de Visual Studio code ; dans la partie de droite de l’écran s’affiche un encart appelé « Customize ». Dans la partie « Tools and languages », faites en sorte que VSC supporte JavaScript, TypeScript, et si vous le sentez vous pouvez également installer d’autres extensions telles que Mocha Snippets ou Protractor Snippets, qui proposent des raccourcis permettant d’accélérer la saisie des scripts de test Protractor.
Cette manipulation décuplera votre productivité par l’autocomplétion !
(Fin de l’EDIT)
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 !
Cet espace est pour vous.