Qu’est-ce que Protractor?
Protractor est un cadriciel de tests point à point (e2e ou End 2 End) qui permet de tester vos applications AngularJS. Protractor exécute vos tests dans un navigateur comme Firefox ou Chrome. Il permet d’interagir avec vos applications et de simuler le comportement d’un utilisateur.
L’avantage d’utiliser Protractor est qu’il est supporté par Google et qu’il n’est pas nécessaire d’ajouter des instructions sleep dans votre code afin d’attendre les réponses du serveur. L’attente est planifiée par Protractor (on parle de Automatic waitingsur le site de Protractor).
Installer et lancer Protractor
Installer Protractor
https://angular.github.io/protractor/#/
Installer Protractor globalement :
1 |
$ sudo npm install -g protractor |
Lancer la commande suivant afin de vérifier l’installation :
1 |
$ protractor --version |
Lancer l’outil webdriver-manager (fourni par Protractor) qui vous aide à mettre en place un serveur Selenium. Il télécharge et installe les outils nécessaires :
1 |
$ sudo webdriver-manager update |
Lancer Selenium
* Selenium nécessite Java, voir les instructions plus bas pour l’installer.
Maintenant, lancer le serveur Selenium avec :
1 |
$ webdriver-manager start |
Cette commande lance un serveur Selenium et affiche les logs d’utilisation à l’écran. Les tests Protractor envoient les commandes à Selenium qui contrôle votre navigateur pour exécuter les tests et vérifier les résultats.
Des informations supplémentaires sur le serveur Selenium sont disponibles à l’adresse suivante :
Lancer vos tests
* Afin de pouvoir exécuter les commandes suivantes, un générateur Yo comme Angular-fullstack est nécessaire.
Vous pouvez lancer vos tests dans un autre terminal avec :
1 |
$ grunt serve |
Une fois votre application lancée, exécuter vos tests Protractor :
1 |
$ grunt test:e2e |
Résolution de problèmes
Avant de lancer vos tests, assurez-vous que le serveur Selenium est fonctionnel et que votre application est disponible sur le port 9000.
Vous devez donc lancer :
1 2 3 |
$ grunt serve $ webdriver-manager start $ grunt test:e2e |
Selenium nécessite Java
Afin de rouler Selenium, vous devez installer Java.
Sur Ubuntu, les commandes suivantes vous aideront :
1 2 3 |
$ sudo add-apt-repository ppa:webupd8team/java $ sudo apt-get update $ sudo apt-get install oracle-java8-installer |
Error: No selenium server jar found at the specified location (/home/username/fs3/node_modules/protractor/selenium/selenium-server-standalone-2.47.1.jar).
Afin de remédier à ce message d’erreur, supprimer le dossier node_modules/protractor de façon à utiliser la version globale et non locale de Protractor.
Tester avec PhantomJS et Protractor
Il est possible d’exécuter les tests avec PhantomJS, par contre, plusieurs bogues sont répertoriés. Il est donc recommandé d’utiliser Chrome ou Firefox.
Fichier de configuration Protractor
Le fichier protractor.conf.js contient les configurations pour Protractor.
Voici quelques éléments intéressants de la configuration :
Défini le navigateur à utiliser pour les tests avec capabilities :
1 2 3 |
capabilities: { 'browserName': 'phantomjs', }, |
Il est possible d’utiliser plusieurs navigateurs avec multiCapabilities :
1 2 3 4 5 |
multiCapabilities: [{ 'browserName': 'firefox' }, { 'browserName': 'chrome' }] |
Liste des fichiers à charger dans le navigateur. Si votre fichier test ne se trouve pas dans le dossier e2e, il ne sera pas exécuté.
1 2 3 |
specs: [ 'e2e/**/*.spec.js' ], |
Exemple de fichier de configuration minimale
Ce fichier identifie le nom du cadriciel de tests (Jasmine), l’adresse du serveur Selenium et le nom du fichier contenant les tests à exécuter.
1 2 3 4 5 |
exports.config = { framework: 'jasmine', seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['spec.js'] } |
Programmer vos tests avec Protractor
Sélecteurs disponibles
Afin d’interagir avec les éléments d’une page Web, vous devez tout d’abord les sélectionner grâce aux sélecteurs fournis par Protractor. Les sélecteurs vous permettront d’obtenir une référence vers les éléments d’intérêt.
by.css
Trouve un élément grâce à son sélecteur css.
1 |
by.css('.myclass') |
Ex : by.css(‘btn-primary’) pour trouver <a class= »btn btn-primary »>
by.id
Trouve un élément grâce à son id.
1 |
by.id('myid') |
Ex : by.id(‘gobutton’) pour trouver <button id= »gobutton »>
by.model
Trouve un élément avec l’attribut ng-model.
1 |
by.model('name') |
Ex : by.model(‘first’) afin de trouver l’élément avec ng-model= »first »
by.binding
Trouve un élément associé (binding) à une variable.
1 |
by.binding('bindingname') |
Ex : by.binding(‘latest’) pour trouver l’élément lié à la variable latest {{latest}}
by.repeater
Trouve l’élément de répétition.
1 |
by.repeater('post in posts') |
Ex : by.repeater(‘post in posts’) pour trouver l’élément ng-repeat= »post in posts »
En savoir plus
Afficher la documentation complète sur les Sélecteurs de Protractor.
Exemple de vérification d’un formulaire avec Protractor
Vérifier le titre d’une page
Un exemple tout simple qui vérifie le titre d’une page.
1 2 3 4 |
it('should have a title', function() { browser.get('http://github.io/protractor-demo/'); expect( browser.getTitle() ).toEqual('Super Calculator'); }); |
Vérifier le bon fonctionnement d’un formulaire
L’exemple suivant vérifie le bon fonctionnement d’un formulaire. On s’assure que le message d’erreur est bien caché initialement, on complète le champ courriel avec un courriel invalide, on clique sur le bouton soumettre et on vérifie que le message de courriel invalide est bien présenté à l’utilisateur.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
it('should display a notification if the email is not valid', function() { element(by.className('emailInvalid')).isDisplayed().then(function(visible) { expect(visible).toBeFalsy(); }); element(by.model('email')).sendKeys('invalidEmail'); element(by.id('formSubmit')).click(); element(by.className('emailInvalid')).isDisplayed().then(function(visible) { expect(visible).toBeTruthy(); }); }); |
Voici le détail de quelques fonctions bien utiles pour automatiser le navigateur avec Protractor :
- isDisplayed : retourne true si l’élément est visible.
- sendKeys : envoi des caractères dans le champ spécifié.
- click : clique sur un élément du formulaire.
Envoyer des touches et cliquer
1 2 3 4 5 6 7 8 9 10 |
describe('Protractor Demo App', function() { it('should add one and two', function() { browser.get('http://github.io/protractor-demo/'); element(by.model('first')).sendKeys(1); element(by.id('gobutton')).click(); expect(element(by.binding('latest')).getText()). toEqual('5'); // This is wrong! }); }); |
Vérifier le contenu d’un élément d’un répéteur
Le sélecteur by.repeater vous retourne un callback (méthode then) sur un tableau des éléments de votre boucle. Vous pouvez ainsi accéder aux objets du tableau et y faire les vérifications nécessaires.
1 2 3 4 |
element.all(by.repeater('post in posts')).then(function(posts) { var titleElement = posts[0].element(by.className('title')); expect(titleElement.getText()).toEqual('VotreTexteAttendu'); }); |
Vérifier le nombre d’éléments d’un répéteur avec count( )
1 2 3 |
element.all(by.repeater('photos in album')).count().then(function(count) { expect(count).toEqual(5); }); |
Tout sur les répéteurs
https://angular.github.io/protractor/#/api?view=ProtractorBy.prototype.repeater
Glossaire
Spec : Une spécification à tester. Comprend une ou plusieurs suites de tests. Devrait couvrir tous les comportements voulus.
Suite de tests : Groupe de tests identifié par un bloc describe avec Jasmine.
Test : Instructions de tests avec une ou plusieurs vérifications (expect). Identifié par le bloc it avec Jasmine.
Valeur actuelle : Valeur actuelle dans l’application sous test.
Valeur attendue : La valeur attendue qui sera comparée à la valeur actuelle dans vos tests.
Comparateur (matcher) : Une fonction qui permet de comparer la valeur actuelle et la valeur attendue. Elle retourne une valeur booléenne. Exemples avec Jasmine : toEqual, toBeGreatherThan, toHaveBeenCalledWith.
Compléments
Explorateur d’éléments
L’explorateur d’éléments fourni avec Protractor.
1 2 |
$ cd \node_modules\protractor\bin $ node ./elementexplorer.js <votre url> |
Mise en attente avec sleep( )
Si vous voulez ralentir l’exécution d’une instruction, vous pouvez utiliser la méthode sleep de l’objet browser.
1 |
browser.sleep(1000) |
Déboguer avec debugger( )
Il est possible d’ajouter l’instruction suivante pour vous aider à déboguer vos tests. Vous devrez lancer Protractor en mode debug.
1 |
browser.debugger() |
Ensuite :
1 |
$ protractor debug |
Tester dans le nuage
Il peut être intéressant de noter qu’il est possible d’exécuter ces tests automatisés dans le nuage avec SauceLabs et BrowserStack.
Exercice Protractor
- Configurer et installer Protractor.
- Écrire votre premier test.
- Lancer votre test et s’assurer qu’il est exécuté avec succès.
Références
Protractor/docs at master · angular/protractor
https://github.com/angular/protractor/tree/master/docs
Protractor tutorial – end to end testing for AngularJS
http://www.protractortest.org/#/tutorial
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!