Pendant de nombreuses années, lorsqu’il s’agissait d’automatiser les tests d’interface utilisateur Web, Selenium était le roi. Et il est sûr de dire qu’il l’est toujours! En tant qu’outil de test d’automatisation largement connu et éprouvé, il s’agit souvent d’un choix par défaut pour de nombreux projets logiciels. Mais cela signifie-t-il qu’il ne faut pas explorer d’autres technologies et frameworks ? Bien sûr que non! Dans cet article, je vais discuter des principaux points derrière l’utilisation de Protractor et expliquer comment le configurer pour une utilisation transparente avec Cucumber et Page Object Model.
Le point principal derrière l’utilisation de Protractor est qu’il a été développé principalement pour tester les applications angulaires. Étant donné qu’Angular a ses propres propriétés individuelles – méthodes, fonctionnalités et synchronisation, Protractor les traite pour rendre le test de ces applications plus facile et plus fiable. Il convient de mentionner que Protractor est un wrapper sur webdriver.js – l’implémentation JavaScript officielle de Selenium Webdriver. Cela signifie que pendant le développement des tests, des éléments Angular particuliers peuvent être atteints avec des méthodes de framework de test prêtes à l’emploi et cela ressemble toujours à ce qui aurait été codé dans un projet Selenium typique. En plus de cela, Protractor est capable de se synchroniser avec Angular, ce qui contribue également à la stabilité des tests.
Les hypothèses pour la mise en place du projet étaient similaires aux efforts précédents avec des projets d’automatisation de test – la structure doit être claire (Page Object Model) et les scripts de test doivent être clairs et compréhensibles, même pour les membres de l’équipe non techniques (Cucumber et Gherkin) . Le choix du langage de programmation s’est porté sur JavaScript puisque Protractor est une application node.js et l’autre option viable, TypeScript, nécessiterait un peu plus de codage. Cette fois, le projet utilisera Visual Studio Code comme IDE.
Pour commencer à configurer le projet, vous devez d’abord installer node.js. Après l’avoir installé sur votre machine, vous pouvez vérifier que l’installation a réussi en tapant ‘node -v’ dans le terminal. Pendant que vous y êtes, au même endroit, vous pouvez également vérifier le gestionnaire de packages de nœuds, en tapant ‘npm – v’. Ensuite, tapez ‘npm install -g protractor’ et vérifiez son installation réussie avec ‘protractor –version’. Au cas où, vous pouvez mettre à jour le pilote de temps en temps à l’aide de la commande “web driver-manager update”.
Notre prochaine étape consistera à configurer l’IDE pour un travail confortable. Tout d’abord, dans Visual Studio Code, installez l’extension “Cucumber (Gherkin) full support”. Une fois cela fait, nous devons nous occuper de nos dépendances. Dans le fichier package.json de notre projet, nous devrons inclure chai et chai-as-promised pour les assertions, le concombre et le rapporteur – le tout dans la section des dépendances. Dans devDependencies, nous aurons besoin de protractor-cucumber-framework pour atteindre l’objectif que nous recherchons.
Pour avoir du confort et de la clarté dans le processus de développement, l’une des fonctionnalités qui le fournissent est la possibilité de rechercher rapidement quel code est exécuté derrière chaque étape de cornichon. Pour y parvenir dans un projet Protractor, nous devrons spécifier les options Cucumber dans le fichier conf.js. Ce qui est nécessaire est le chemin d’accès au dossier étapes.
Ensuite, dans le fichier settings.json, nous devrons spécifier les chemins d’accès aux dossiers contenant les définitions d’étapes et les méthodes qui sont exécutées derrière eux. Nous pouvons le faire de la manière suivante :
Lorsque nous faisons cela, nous pouvons facilement naviguer dans le projet en cliquant sur l’étape/la définition/la méthode/l’élément spécifié dans le code avec un bouton CTRL ou CMD enfoncé. C’est une chose simple, mais cela peut considérablement augmenter la productivité et réduire le temps consacré au développement ou au débogage des tests !
Notre prochaine prémisse à laquelle nous devons nous attaquer consiste à exécuter les tests par balises. Bien que l’ajout d’une balise à un fichier de fonctionnalité soit assez simple, la partie où ceux-ci sont exécutés nécessite de fournir un chemin vers les fichiers de fonctionnalité Cucumber dans le fichier conf.js.
Comme vous pouvez l’observer dans le morceau de code ci-dessus, la section cucumberOpts du fichier conf.js nécessite une variable nommée ‘tags’ sous forme de liste vide.
Pendant que nous y sommes, il est important de souligner que le fichier conf.js doit avoir une section où nous spécifions le Cucumber comme notre framework de test :
La structure globale du projet de test automatisé créé dans Page Object Model est similaire d’une technologie à l’autre. Un aperçu de Protractor peut être observé ci-dessous:
Une fois que vous avez créé tous les fichiers nécessaires et terminé la configuration, il est temps d’écrire les tests eux-mêmes.
Puisque nous travaillons dans le cadre BDD, commençons par un simple fichier de fonctionnalités avec un scénario simple axé sur la vérification d’un formulaire d’inscription (avec une balise pour l’exécuter plus tard)
Une fois cela fait, nous pouvons spécifier ce qui se passe à chaque étape dans /steps/registration.js :
Dans ce fichier, nous spécifions d’abord le chemin d’accès au fichier contenant les méthodes qui vont être appelées dans chacune des définitions d’étape. Ensuite, nous appelons des bibliothèques d’assertions et configurons des délais d’attente.
La mise en œuvre de la définition des étapes est assez simple ; le mot-clé Cucumber précède une regex et un paramètre ; le corps d’une étape appelle une méthode à partir du fichier /pages/registration.js. Habituellement, une étape nécessite une seule méthode, mais les étapes de test peuvent être plus complexes si nécessaire. Notez que si une méthode renvoie une valeur booléenne, nous invoquons une assertion au niveau d’une définition d’étape (ligne 23).
Dans le fichier/pages/registration.js, nous devons spécifier un dictionnaire de localisation pour les éléments avec lesquels nous allons interagir. Vous pouvez le faire de la manière suivante :
Veuillez noter les sélecteurs utilisés pour localiser les éléments ; vous pouvez utiliser diverses méthodes prêtes à l’emploi pour localiser des éléments dans Protractor, qui ont été décrites en détail dans le Guide officiel de Protractor (lien)
Il en va de même pour les méthodes utilisées pour interagir avec les éléments :
(PS. Ne stockez pas vos identifiants de connexion dans le code d’automatisation du test… Ce qui précède est juste à des fins de démonstration)
Ce qui se passe ci-dessus, c’est que nous implémentons des méthodes que nous avons appelées dans le fichier /steps/registration.js, en utilisant les éléments que nous avons mis dans le dictionnaire de localisation (surlignés en bleu clair) et en interagissant avec eux à l’aide des méthodes Protractor (surlignées en violet).
Il est alors temps de lancer les tests. Dans VS Code, ouvrez une nouvelle fenêtre de terminal et appuyez sur la commande “web driver-manager start”. Webdriver devrait être opérationnel maintenant.
Pour exécuter le test que vous avez écrit et balisé en conséquence, il vous suffit maintenant d’ouvrir une autre nouvelle fenêtre de terminal dans VS Code et d’entrer la commande :
protractor protractor.conf.js –cucumberOpts.tags=’@smoke1′ – étiquetant la fonctionnalité souhaitée en conséquence.
Et voila! Vous disposez maintenant d’un framework de test Protractor prêt et configuré intégré à Cucumber, Page Object Model que vous pouvez exécuter à l’aide de balises. Si vous souhaitez en savoir plus sur Protractor, je vous encourage à vous rendre sur le site Web de Protractor, qui contient une documentation complète avec des exemples de code. ici.