Qu'est-ce que le test de rapporteur?
PROTRACTOR est un outil d'automatisation et de test de bout en bout axé sur le comportement qui joue un rôle important dans le test des applications AngularJS et fonctionne comme un intégrateur de solutions combinant des technologies puissantes telles que Selenium, Jasmine, pilote Web, etc. n'est pas seulement de tester les applications AngularJS, mais aussi d'écrire des tests de régression automatisés pour les applications Web normales.
Dans ce tutoriel pour débutants, vous apprendrez-
- Pourquoi avons-nous besoin d'un cadre de rapporteur?
- Installation du rapporteur
- Exemple de test d'application AngularJS à l'aide de Protractor
- Exécution du code
- Générer des rapports à l'aide de Jasmine Reporters
Pourquoi avons-nous besoin d'un cadre de rapporteur?
JavaScript est utilisé dans presque toutes les applications Web. Au fur et à mesure que les applications se développent, JavaScript augmente également en taille et en complexité. Dans ce cas, il devient une tâche difficile pour les testeurs de tester l'application Web pour différents scénarios.
Parfois, il est difficile de capturer les éléments Web dans les applications AngularJS à l'aide de JUnit ou Selenium WebDriver.
Protractor est un programme NodeJS qui est écrit en JavaScript et s'exécute avec Node pour identifier les éléments Web dans les applications AngularJS, et il utilise également WebDriver pour contrôler le navigateur avec les actions de l'utilisateur.
Ok, très bien maintenant discutons de ce qu'est exactement une application AngularJS?
Les applications AngularJS sont des applications Web qui utilisent la syntaxe HTML étendue pour exprimer les composants d'application Web. Il est principalement utilisé pour les applications Web dynamiques. Ces applications utilisent un code moins flexible et moins flexible que les applications Web normales.
Pourquoi ne pouvons-nous pas trouver des éléments Web Angular JS à l'aide du pilote Web Normal Selenium?
Les applications Angular JS ont des attributs HTML supplémentaires tels que ng-repeater, ng-controller, ng-model…, etc. qui ne sont pas inclus dans les localisateurs Selenium. Selenium n'est pas en mesure d'identifier ces éléments Web à l'aide du code Selenium. Ainsi, Protractor sur le dessus de Selenium peut gérer et contrôler ces attributs dans les applications Web.
Le rapporteur est un cadre de test de bout en bout pour les applications basées sur Angular JS. Alors que la plupart des frameworks se concentrent sur la réalisation de tests unitaires pour les applications Angular JS, Protractor se concentre sur le test des fonctionnalités réelles d'une application.
Avant de commencer Protractor, nous devons installer les éléments suivants:
- Sélénium
Vous pouvez trouver les étapes d'installation de Selenium dans les liens suivants, (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
Installation de NodeJS, nous devons installer NodeJS pour installer Protractor. Vous pouvez trouver ces étapes d'installation dans le lien suivant. (https://www.guru99.com/download-install-node-js.html)
Installation du rapporteur
Étape 1) Ouvrez l'invite de commande et tapez "npm install -g protractor" et appuyez sur Entrée .
La commande ci-dessus téléchargera les fichiers nécessaires et installera Protractor sur le système client.
Étape 2) Vérifiez l'installation et la version à l'aide de « Protractor --version ». En cas de succès, la version sera affichée comme dans la capture d'écran ci-dessous. Sinon, recommencez l'étape 1.
(Les étapes 3 et 4 sont facultatives mais recommandées pour une meilleure pratique)
Étape 3) Mettez à jour le gestionnaire de pilotes Web. Le gestionnaire de pilotes Web est utilisé pour exécuter les tests sur l'application Web angulaire dans un navigateur spécifique. Une fois Protractor installé, le gestionnaire de pilotes Web doit être mis à jour avec la dernière version. Cela peut être fait en exécutant la commande suivante dans l'invite de commande.
webdriver-manager update
Étape 4) Démarrez le gestionnaire de pilotes Web. Cette étape exécutera le gestionnaire de pilotes Web en arrière-plan et écoutera tous les tests exécutés via le rapporteur.
Une fois que Protractor est utilisé pour exécuter un test, le pilote Web se charge automatiquement et exécute le test dans le navigateur approprié. Pour démarrer le gestionnaire de pilotes Web, la commande suivante doit être exécutée à partir de l'invite de commande.
webdriver-manager start
Maintenant, si vous accédez à l'URL suivante ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) dans votre navigateur, vous verrez en fait le gestionnaire de pilotes Web s'exécuter en arrière-plan.
Exemple de test d'application AngularJS à l'aide de Protractor
Le rapporteur a besoin de deux fichiers pour s'exécuter, un fichier de spécifications et un fichier de configuration .
- Fichier de configuration : ce fichier aide le rapporteur à localiser les fichiers de test (specs.js) et à parler avec le serveur Selenium (adresse Selenium). Chrome est le navigateur par défaut de Protractor.
- Fichier de spécifications: ce fichier contient la logique et les localisateurs pour interagir avec l'application .
Étape 1) Nous devons nous connecter https://angularjs.org et entrer le texte comme "GURU99" dans la zone de texte "Entrez un nom ici".
Étape 2) Dans cette étape,
- Entré le nom "Guru99"
- Dans le texte de sortie "Hello Guru99" est vu.
Étape 3) Nous devons maintenant capturer le texte de la page Web après avoir entré le nom et vérifier avec le texte attendu .
Code:
Nous devons préparer le fichier de configuration (conf.js) et le fichier de spécification (spec.js) comme mentionné ci-dessus.
Logique de spec.js:
describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello GURU99!');});});
Explication du code de spec.js:
- describe ('Enter GURU99 Name', function ()
La syntaxe de description provient du framework Jasmine. Ici, «describe» («Enter GURU99 Name») définit généralement les composants d'une application, qui peuvent être une classe ou une fonction, etc. Dans la suite de codes appelée «Enter GURU99», il s'agit simplement d'une chaîne et non d'un code.
- it ('devrait ajouter un nom comme GURU99', function ()
- browser.get ("https://angularjs.org")
Comme dans Selenium Webdriver, browser.get ouvrira une nouvelle instance de navigateur avec l'URL mentionnée.
- élément (by.model ('votreNom')). sendKeys ('GURU99')
Ici, nous trouvons l'élément Web en utilisant le nom du modèle comme "yourName", qui est la valeur de "ng-model" sur la page Web. Vérifiez la capture d'écran ci-dessous-
- var guru = élément (par.xpath ('html / corps / div [2] / div [1] / div [2] / div [2] / div / h1'))
Ici, nous trouvons l'élément Web en utilisant XPath et stockons sa valeur dans une variable "guru" .
- expect (guru.getText ()). toEqual ('Bonjour GURU99!')
Enfin, nous vérifions le texte que nous avons obtenu de la page Web (en utilisant gettext ()) avec le texte attendu.
Logique de conf.js:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Explication du code de conf.js
- seleniumAddress: "http: // localhost: 4444 / wd / hub"
Le fichier de configuration indique à Protractor l'emplacement de l'adresse Selenium pour parler avec Selenium WebDriver.
- spécifications: ['spec.js']
Cette ligne indique à Protractor l'emplacement des fichiers de test spec.js
Exécution du code
Ici d'abord, nous allons changer le chemin du répertoire ou naviguer vers le dossier où les confi.js et spec.js sont placés dans notre système .
Suivez l'étape suivante.
Étape 1) Ouvrez l'invite de commande.
Étape 2) Assurez-vous que le gestionnaire de pilotes Web de sélénium est opérationnel. Pour cela, donnez la commande "webdriver-manager start" et appuyez sur Entrée .
(Si le pilote Web de sélénium n'est pas opérationnel, nous ne pouvons pas procéder à un test car Protractor ne peut pas trouver le pilote Web pour gérer l'application Web)
Étape 3) Ouvrez une nouvelle invite de commande et donnez la commande en tant que "rapporteur conf.js" pour exécuter le fichier de configuration.
Explication:
- Ici, Protractor exécutera le fichier de configuration avec le fichier de spécifications donné.
- Nous pouvons voir le serveur de sélénium tourner à " http: // localhost: 4444 / wd / hub " que nous avons donné dans le fichier conf.js.
- En outre, vous pouvez voir ici le résultat, le nombre de réussites et les échecs comme dans la capture d'écran ci-dessus .
Très bien, nous avons vérifié le résultat quand il est passé ou comme prévu. Examinons maintenant également le résultat de l'échec.
Étape 1) Ouvrez et modifiez normalement le fichier spec.js en "'Hello change GURU99" comme ci-dessous.
Après modification de spec.js :
describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello change GURU99!');});});
Étape 2) Enregistrez le fichier spec.js et répétez les étapes ci-dessus de la section "Exécution du code"
Maintenant, exécutez les étapes ci-dessus.
Résultat:
Nous pouvons voir le résultat comme un échec indiqué par 'F' dans la capture d'écran avec la raison comme "Attendu 'Hello GURU99!' pour être égal à «Bonjour change GURU99!». En outre, il indique le nombre d'échecs rencontrés lors de l'exécution du code.
Pouvons-nous réaliser la même chose avec le pilote Web Selenium?
Parfois, nous pouvons identifier les éléments Web des applications AngularJS à l'aide du sélecteur XPath ou CSS du pilote Web Selenium. Mais dans les applications AngularJS, les éléments seront générés et modifiés dynamiquement. Donc Protractor est la meilleure pratique pour travailler avec les applications AngularJS.
Générer des rapports à l'aide de Jasmine Reporters
Protractor aide les journalistes Jasmine à générer des rapports de test. Dans cette section, nous utiliserons JunitXMLReporter pour générer automatiquement des rapports d'exécution de test au format XML.
Suivez les étapes ci-dessous pour générer des rapports au format XML.
Installation de Jasmine Reporter
Vous pouvez le faire de deux manières, localement ou globalement
- Ouvrez l'invite de commande, exécutez la commande suivante pour installer localement
npm install --save-dev jasmine-reporters@^2.0.0
La commande ci-dessus installera les rapports de jasmin node-modules localement à partir du répertoire où nous exécutons la commande dans l'invite de commande.
- Ouvrez l'invite de commande, exécutez la commande suivante pour une installation globale
npm install -g jasmine-reporters@^2.0.0
Dans ce tutoriel, nous installerons les reporters jasmine localement .
Étape 1) Exécutez la commande.
npm install --save-dev jasmine-reporters@^2.0.0
à partir de l'invite de commande comme ci-dessous.
Étape 2) Vérifiez les dossiers d'installation dans le répertoire . "Node_modules" devrait être disponible s'il est installé avec succès comme dans l'instantané ci-dessous.
Étape 3) Ajoutez le code coloré suivant à un fichier conf.js existant
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',capabilities: {'browserName': 'firefox'},specs: ['spec.js'],framework: 'jasmine2' ,onPrepare: function() {var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true));}};
Explication du code:
Dans le code, nous générons le rapport " JUnitXmlReporter " et donnons le chemin où stocker le rapport.
Étape 4) Ouvrez l'invite de commande et exécutez le rapporteur de commande conf.js.
Étape 5) Lorsque vous exécutez le code ci-dessus, junitresults.xml sera généré dans le chemin mentionné.
Étape 6) Ouvrez le XML et vérifiez le résultat. Le message d'échec est affiché dans le fichier de résultats car notre scénario de test a échoué. Le scénario de test a échoué car le résultat attendu de "spec.js" ne correspond pas au résultat réel d'une page Web
Étape 7) Utilisez le fichier junitresult.xml pour les preuves ou les fichiers de résultats.
Résumé:
Bien que Selenium puisse faire certaines des choses que fait le rapporteur, le rapporteur est la norme industrielle et la meilleure pratique pour tester les applications AngularJS. Un rapporteur peut également gérer plusieurs capacités et gérer les changements dynamiques des éléments Web en utilisant ng-model, ng-click…, etc. (ce que le sélénium ne peut pas faire).
Cet article est rédigé par Ranjith Kumar Enishetti