ProtracTutoriel de test Tor : Cadre d’outil d’automatisation

⚠️ Avis de dépréciation : Protractor est obsolète et archivéLe support a pris fin en août 2023 et l'interface de ligne de commande Angular (Angular CLI) a abandonné sa version Pro.tracConstructeur Tor après Angular 15. Choisissez Dramaturge, Cypress, WebdriverIO ou TestCafe pour les nouveaux tests de bout en boutLa procédure décrite ci-dessous reste valable pour les suites classiques.

Pourquoi avons-nous besoin de professionnels ?tracTor Framework ?

JavaLes scripts sont utilisés dans presque toutes les applications web. À mesure que les applications se développent, Javascénario La taille et la complexité augmentent également. Dans ce cas, il devient difficile pour les testeurs de tester l'application web dans 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 Node.js é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.

Qu'est-ce qu'une application AngularJS exactement ?

AngularJS Les applications AngularJS sont des applications web qui utilisent une syntaxe HTML étendue pour exprimer les composants d'une application web. Elles sont principalement utilisées pour les applications web dynamiques. Ces applications utilisent un code plus concis et plus flexible que les applications web classiques. Veuillez noter que le support à long terme d'AngularJS 1.x a pris fin le 31 décembre 2021 ; ces applications sont donc aujourd'hui considérées comme obsolètes.

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

Les applications AngularJS possèdent des attributs HTML supplémentaires tels que 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, Protractor au sommet de Selenium peut gérer et contrôler ces attributs dans les applications Web.

ProtracTor est un framework de test de bout en bout pour les applications basées sur AngularJS. Alors que la plupart des frameworks se concentrent sur la réalisation de tests, Tor se distingue par sa capacité à effectuer des tests de bout en bout. tests unitaires pour les applications AngularJS, Protractor se concentre sur le test des fonctionnalités réelles d'une application.

Avant de commencer ProtracPour installer Tor, nous devons installer les éléments suivants :

1. Selenium: vous pouvez trouver le Selenium étapes d'installation dans le Selenium Guide d'installation de WebDriver.
2. NPM (Node.js) : Pour installer la version Pro, il faut installer Node.js.tractor. Vous trouverez ces étapes d'installation dans le Guide de téléchargement et d'installation de Node.js.

ProtracInstallation du tor

Étape 1) Ouvrez l'invite de commande et tapez « npm install -g pro »tractor" et appuyez sur Entrée.

La commande ci-dessus téléchargera les fichiers nécessaires et installera la version Pro.tractor sur le système client, comme indiqué ci-dessous.

Étape 2) Vérifiez l'installation et la version en utilisant "partractor –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 WebDriver. Ce gestionnaire permet d'exécuter les tests de l'application web Angular dans un navigateur spécifique. Après ProtracSi Tor est installé, le gestionnaire WebDriver doit être mis à jour vers la dernière version. Pour ce faire, exécutez la commande suivante dans l'invite de commandes.

webdriver-manager update

Les fichiers binaires du pilote se téléchargent comme indiqué ci-dessous.

Étape 4) Démarrez le gestionnaire WebDriver. Cette étape exécutera le gestionnaire WebDriver en arrière-plan et écoutera tous les tests exécutés via protractor.

Une fois le test exécuté, WebDriver le charge automatiquement dans le navigateur approprié. Démarrez le gestionnaire avec la commande ci-dessous.

webdriver-manager start

La console affiche l'adresse d'écoute.

Maintenant, si vous allez à la suite URL (http://localhost:4444/wd/hub/static/resource/hub.htmlDans votre navigateur, vous verrez effectivement le gestionnaire WebDriver s'exécuter en arrière-plan.

Exemple de test d'application AngularJS avec Protractor

Avec le gestionnaire de pilotes en cours d'exécution, ProtracTor a besoin de deux fichiers pour fonctionner, un spec déposer et paramétrage fichier.

1. Fichier de configurationCe fichier aide les professionnelstracpour accéder à l'emplacement des fichiers de test (specs.js) et pour communiquer avec Selenium serveur (Selenium Adresse). Chrome est le navigateur par défaut pour Protractor.
2. Fichier de spécifications : Ce fichier contient la logique et les localisateurs pour interagir avec l'application.

Étape 1) Nous devons ouvrir 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 « Bonjour » 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!');
  });
});

Code Explication du fichier spec.js :

1. décrire(« Entrez le nom GURU99 », fonction() La syntaxe de description provient de Cadre JasmineIci, « 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 code appelée « Enter GURU99 », il s'agit simplement d'une chaîne de caractères et non d'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 les informations mentionnées URL.
4. un élément(par.model('votreNom')).envoyer des clés(« GURU99 ») Ici, nous recherchons l'élément Web en utilisant le nom du modèle comme « votreNom », qui est la valeur de «ng-modèle« » sur la page web. Consultez 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. attendons.(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']
};

Code Explication du fichier conf.js

1. Adresse Selenium : « http://localhost:4444/wd/hub ». Le fichier de configuration indique à Protracpour l'emplacement de Selenium Adresse avec qui parler Selenium Pilote Web.
2. spécifications : ['spec.js']Cette ligne indique à Protracpour l'emplacement des fichiers de test spec.js

Exécution de la Code

Commencez par accéder au dossier contenant les fichiers conf.js et spec.js, puis suivez les étapes ci-dessous..

Étape 1) Ouvrez l'invite de commande.

Étape 2) Assure-toi Selenium Le gestionnaire WebDriver est opérationnel. Pour cela, saisissez la commande « webdriver-manager start » et appuyez sur Entrée..

(Si Selenium WebDriver n'étant pas opérationnel, nous ne pouvons pas procéder au test en tant que Pro.tractor ne trouve pas le WebDriver pour gérer l'application web)

Étape 3) Ouvrez une nouvelle invite de commande et donnez la commande comme "partractor conf.js” Pour exécuter le fichier de configuration, l'exécution se termine comme indiqué ci-dessous.

Explication:

• Ici ProtracTor exécutera le fichier de configuration contenant le fichier de spécifications donné.
• On peut voir le Selenium serveur fonctionnant à «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..

Un résultat positif a été vérifié. Voyons maintenant un résultat négatif.

Étape 1) Ouvrez et modifiez le fichier spec.js pour obtenir « Hello change 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 « Exécution de Code" section

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 ! ». Il indique également 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 ?

Il est parfois possible de localiser des éléments AngularJS à l'aide de sélecteurs XPath ou CSS. Selenium WebDriver. Cependant, ces éléments sont générés et rebondissent dynamiquement, donc ProtracTor était l'option la plus sûre pour les suites AngularJS.

Générer des rapports à l'aide de Jasmine Reporters

ProtracTor prend en charge les journalistes Jasmine. Cette section utilise JUnitXmlReporter permet de générer automatiquement des rapports d'exécution de tests au format XML, en suivant les étapes ci-dessous.

Installation de Jasmine Reporter

Il existe deux options : locale ou globale

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 installe jasmine-reporters localement, dans le répertoire où elle est exécutée.

2. Ouvrez l'invite de commande, exécutez la commande suivante pour une installation globale

npm install –g jasmine-reporters@^2.0.0

Ici, les rapporteurs sont installés 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 PROtractor 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 Le test a échoué. L'échec est dû au fait que le résultat attendu de « spec.js » ne correspond pas au résultat réel obtenu sur la page Web.

Étape 7) Utilisez le fichier junitresult.xml pour les preuves ou les fichiers de résultats.

ProtracTor contre les alternatives modernes à l'automatisation des tests

Depuis ProtracTor ne reçoit plus de mises à jour ; les équipes qui planifient de nouvelles suites doivent savoir comment il se compare aux frameworks vers lesquels les projets Angular migrent désormais. Le tableau ci-dessous compare la version Pro.tractor avec les trois alternatives qui reviennent le plus souvent dans la FAQ ci-dessous.

Équipes avec un Pro existanttracLes suites de Tor migrent généralement le plus rapidement vers WebdriverIO, étant donné son style de commande et Selenium- La gestion des conducteurs basée sur les données reste proche de ce que ProtracLes testeurs de test le savent déjà. Les équipes qui partent de zéro ou qui ont besoin d'exécutions de tests très rapides choisissent plus souvent cette option. Cypress ou plutôt dramaturge.

FAQ