Étape 0 - Écrivez un test

Ouvrez une nouvelle ligne de commande ou une nouvelle fenêtre de terminal et créez un nouveau dossier à tester.

Protractor a besoin de deux fichiers à exécuter, un fichier de spécifications et un fichier de configuration.

Commençons par un simple test qui permet de rechercher une application AngularJS et de vérifier son titre. Nous utiliserons l'application Super Calculator à l'adresse http://juliemr.github.io/protractor-demo/.


Copiez ce qui suit dans spec.js :

La syntaxe describe et it est issue du framework Jasmine. browser est un fichier global créé par Protractor, utilisé pour les commandes de niveau navigateur telles que la navigation avec browser.get.
Créez maintenant le fichier de configuration. Copiez ce qui suit dans conf.js:

Cette configuration indique à Protractor où se trouvent vos fichiers de test (specs) et où parler avec votre serveur Selenium (seleniumAddress). Il spécifie que nous utiliserons Jasmine pour la structure de test. Il utilisera les valeurs par défaut pour toutes les autres configurations. Chrome est le navigateur par défaut. Maintenant, lancez le test avec :

Étape 1 - Interaction avec les éléments

Modifions maintenant le test pour interagir avec les éléments de la page. Modifiez spec.js comme suit :

Ceci utilise les globals element et by, qui sont également créés par Protractor. La fonction element est utilisée pour rechercher des éléments HTML sur votre page Web. Elle retourne un objet ElementFinder, qui peut être utilisé pour interagir avec l'élément ou en obtenir des informations. Dans ce test, nous utilisons sendKeys pour taper dans ‹input/›, click clique sur un bouton et getText il renvoie le contenu d'un élément.

element prend un paramètre, un localisateur, qui décrit comment rechercher l'élément. L'objet by crée des localisateurs. Ici, nous utilisons trois types de localisateurs :

• by.model('first') trouver l'élément avec ng-model="first". Si vous inspectez la source de la page de la calculatrice, vous verrez que c'est ‹input type="text" ng-model="first"/›.
• by.id('gobutton') pour trouver l'élément avec l'id donné. Cela trouve ‹button id="gobutton"›.
• by.binding('latest') pour trouver l'élément lié à la variable latest. Ceci trouve la durée contenant {{latest}}

Lancer les tests avec :

Vous devriez voir la page entrer deux nombres et attendre que le résultat soit affiché. Comme le résultat est 3 et non 5, notre test échoue. Corrigez le test et essayez de l'exécuter à nouveau.

Étape 2 - Écriture de plusieurs scénarios

Mettons ces deux tests ensemble et nettoyons-les un peu.

Modifiez spec.js comme suit :

Ici, nous avons introduit la navigation dans une fonction beforeEach qui est exécutée avant chaque bloc it. Nous avons également stocké les ElementFinders pour les première et deuxième entrées dans des variables agréables pouvant être réutilisées. Remplissez le deuxième test à l'aide de ces variables, puis relancez les tests pour vous assurer de leur réussite.

Dans la dernière assertion, nous lisons la valeur du champ d'entrée avec firstNumber.getAttribute('value') et nous la comparons à la valeur définie précédemment.

Étape 3 - Changer la configuration

Maintenant que nous avons écrit quelques tests de base, examinons le fichier de configuration. Le fichier de configuration vous permet de changer des choses telles que les navigateurs utilisés et la façon de se connecter au serveur Selenium. Changeons le navigateur.

Modifiez conf.js comme suit :

Essayez de relancer les tests. Vous devriez voir les tests en cours d'exécution sur Firefox au lieu de Chrome. L'objet capabilities décrit le navigateur à tester. Pour une liste complète des options, voir le fichier de configuration.

Vous pouvez également exécuter des tests sur plusieurs navigateurs à la fois.

Remplacez conf.js par :

Essayez de courir encore une fois. Vous devriez voir les tests s'exécuter simultanément sur Chrome et Firefox, et les résultats consignés séparément sur la ligne de commande.

Étape 4 - Listes d'éléments

Revenons aux fichiers de test. N'hésitez pas à modifier la configuration pour ne plus utiliser qu'un seul navigateur.

Parfois, vous voudrez traiter une liste de plusieurs éléments. Vous pouvez le faire avec element.all, ce qui retourne un ElementArrayFinder. Dans notre application de calculatrice, chaque opération est enregistrée dans l'historique, qui est implémenté sur le site sous forme de tableau ng-repeat. Faisons quelques opérations, puis testons qu'elles sont dans l'historique.

Remplacez spec.js par :

Nous avons fait deux choses ici, d'abord, nous avons créé une fonction d'assistance, add. Nous avons ajouté la variable history. Nous utilisons element.all avec le by.repeater localisateur pour obtenir un ElementArrayFinder. Dans nos spécifications, nous affirmons que l'historique a la longueur attendue à l'aide de la méthode count. Corrigez le test pour que la seconde attente soit satisfaite.

ElementArrayFinder a de nombreuses méthodes en plus de count. Utilisons-nous last pour obtenir un ElementFinder qui correspond au dernier élément trouvé par le localisateur.

Remplacez le test par :

Comme la calculatrice affiche le résultat le plus ancien en bas, l'addition la plus ancienne (1 + 2) correspond à la dernière entrée de l'historique. Nous utilisons le toContain matriciel Jasmine pour affirmer que le texte de l'élément contient "1 + 2". Le texte complet de l'élément contiendra également l'horodatage et le résultat.

Corrigez le test de sorte qu'il s'attend à ce que la première entrée de l'historique contienne le texte "3 + 4".

ElementArrayFinder a également des méthodes each, map, filter et reduce qui sont analogues aux JavaScript méthodes Array.