Tester votre app avec Protractor

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 :

$ sudo npm install -g protractor

1	$ sudo npm install -g protractor

Lancer la commande suivant afin de vérifier l’installation :

$ protractor --version

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 :

$ sudo webdriver-manager update

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 :

$ webdriver-manager start

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 :

http://localhost:4444/wd/hub

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 :

$ grunt serve

1	$ grunt serve

Une fois votre application lancée, exécuter vos tests Protractor :

$ grunt test:e2e

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 :

$ grunt serve
$ webdriver-manager start
$ grunt test:e2e

$ 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 :

$ sudo add-apt-repository ppa:webupd8team/java
$ sudo apt-get update
$ sudo apt-get install oracle-java8-installer

$ 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.

https://github.com/angular/protractor/blob/master/docs/browser-setup.md

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 :

capabilities: {
   'browserName': 'phantomjs',
},

capabilities: {

'browserName': 'phantomjs',

Il est possible d’utiliser plusieurs navigateurs avec multiCapabilities :

multiCapabilities: [{
    'browserName': 'firefox'
    }, {
    'browserName': 'chrome'
}]

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é.

specs: [
   'e2e/**/*.spec.js'
],

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.

exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['spec.js']
}

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.

by.css('.myclass')

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.

by.id('myid')

1	by.id('myid')

Ex : by.id(‘gobutton’) pour trouver <button id= »gobutton »>

by.model

Trouve un élément avec l’attribut ng-model.

by.model('name')

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.

by.binding('bindingname')

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.

by.repeater('post in posts')

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.

it('should have a title', function() {
    browser.get('http://github.io/protractor-demo/');
    expect( browser.getTitle() ).toEqual('Super Calculator');
});

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.

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();
  });

});

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

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!
  });
});

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.

element.all(by.repeater('post in posts')).then(function(posts) {
   var titleElement = posts[0].element(by.className('title'));
   expect(titleElement.getText()).toEqual('VotreTexteAttendu');
});

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( )

element.all(by.repeater('photos in album')).count().then(function(count) {
    expect(count).toEqual(5);
});

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.

$ cd \node_modules\protractor\bin
$ node ./elementexplorer.js <votre url>

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.

browser.sleep(1000)

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.

browser.debugger()

1	browser.debugger()

Ensuite :

$ protractor debug

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