Tutoriel de test du rapporteur : cadre d'outils d'automatisation

Pourquoi avons-nous besoin d’un cadre de rapporteur ?

JavaLe script est utilisé dans presque toutes les applications Web. Au fur et à mesure que les applications se développent, Javascénario augmente également en taille et en complexité. Dans un tel cas, il devient difficile pour les testeurs de tester l’application Web pour différents scénarios.

Il est parfois difficile de capturer les éléments Web dans les applications AngularJS à l'aide de JUnit or Selenium Pilote Web.

Protractor est un programme NodeJS écrit en JavaLe script 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, parlons maintenant 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'applications Web. Il est principalement utilisé pour les applications Web dynamiques. Ces applications utilisent moins de code flexible que les applications Web normales.

Pourquoi ne pouvons-nous pas trouver les éléments Web Angular JS en utilisant Normal Selenium Pilote Web ?

Les applications Angular JS ont des attributs HTML supplémentaires comme ng-repeater, ng-controller, ng-model..., etc. qui ne sont pas inclus dans Selenium localisateurs. Selenium n'est pas en mesure d'identifier ces éléments Web à l'aide Selenium code. Donc, rapporteur en haut 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 de la fonctionnalité réelle d'une application.

Avant de démarrer Protractor, nous devons installer les éléments suivants :

1. SeleniumVous pouvez trouver Selenium Étapes d'installation dans les liens suivants, (https://www.guru99.com/installing-selenium-webdriver.html )
2. Installation de NPM (Node.js)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 rapporteur" 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 en utilisant "Rapporteur – version. » En cas de succès, la version sera affichée comme dans la capture d'écran ci-dessous. Sinon, répétez 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 vers 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 chargera et exécutera automatiquement 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

Protractor a besoin de deux fichiers pour s'exécuter, un spec déposer et paramétrage fichier.

1. Fichier de configuration: Ce fichier permet de déterminer où sont placés les fichiers de test (specs.js) et de discuter avec Selenium serveur (Selenium Adresse). Chrome est le navigateur par défaut de Protractor.

2. 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 entrez le texte comme « GURU99 » dans la zone de texte « Entrez un nom ici ».

Étape 2) Dans cette étape,

1. J'ai saisi le nom « Guru99 »
2. Dans le texte de sortie « Hello Guru99 » est visible.

É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 fichier de spécifications (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 :

1. décrire("Entrez le nom GURU99", fonction()La syntaxe de description provient du framework Jasmine. Ici, "describe" ("Entrez le nom GURU99") 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é « Enter GURU99 », c'est juste une chaîne et non un code.
2. it('devrait ajouter un nom comme GURU99', fonction()
3. navigateur.get('https://angularjs.org')Comme dans Selenium Webdriver browser.get ouvrira une nouvelle instance de navigateur avec l'URL mentionnée.
4. un élément(par.model('votreNom')).envoyer des clés(« 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-

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Ici, nous trouvons l'élément Web en utilisant XPath et stocker sa valeur dans une variable « gourou ».
6. attendre(gourou.getText()).égaler("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

1. seleniumAddress : 'http://localhost:4444/wd/hub'Le fichier de configuration indique à Protractor l'emplacement de Selenium Adresse avec qui parler Selenium Pilote Web.
2. specs : ['spec.js']Cette ligne indique à Protractor l'emplacement des fichiers de test spec.js

Exécution du Code

Ici, nous allons d’abord modifier le chemin du répertoire ou accéder au 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 Selenium est opérationnel. Pour cela, donnez la commande « webdriver-manager start » et appuyez sur Entrée..

(Si le pilote Web Selenium 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 comme "rapporteur conf.js" pour exécuter le fichier de configuration.

Explication:

• Ici, Protractor exécutera le fichier de configuration contenant le fichier de spécifications donné.
• Nous pouvons voir le serveur Selenium fonctionner à «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 lorsqu'il est réussi ou comme prévu. Examinons maintenant également le résultat de l'échec.

Étape 1) L'ouverture et la modification devraient donner lieu à spec.js en « Bonjour, changement GURU99 » comme ci-dessous.

Après changement dans 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 suivante : « Attendu 'Bonjour 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 Selenium pilote Web ?

Parfois, nous pouvons identifier les éléments Web des applications AngularJS à l'aide du sélecteur XPath ou CSS de Selenium pilote Web. Mais dans les applications AngularJS, les éléments seront générés et modifiés dynamiquement. Protractor est donc 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 tests au format XML.

Suivez les étapes ci-dessous pour générer des rapports au format XML.

Installation de Jasmine Reporter

Vous pouvez procéder de deux manières : localement ou globalement

1. 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 modules de nœuds de rapports Jasmine localement, à partir du répertoire où nous exécutons la commande dans l'invite de commande.

2. 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 allons installer 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 en donnant le chemin où stocker le rapport.

Étape 4) Ouvrez l'invite de commande et exécutez la commande rapporteur 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 comme notre Cas de test est raté. 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 peut 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 fonctionnalités et gérer les changements dynamiques des éléments Web à l'aide de ng-modèle, ng-click.., etc. (ce que le sélénium ne peut pas faire).