Rapporteur - Rédaction du premier test

Dans ce chapitre, voyons comment écrire le premier test dans Protractor.

Fichiers requis par le rapporteur

Protractor a besoin des deux fichiers suivants pour fonctionner -

Spec ou fichier de test

C'est l'un des fichiers importants pour exécuter Protractor. Dans ce fichier, nous écrirons notre code de test réel. Le code de test est écrit en utilisant la syntaxe de notre framework de test.

Par exemple, si nous utilisons Jasmine framework, alors le code de test sera écrit en utilisant la syntaxe de Jasmine. Ce fichier contiendra tous les flux fonctionnels et les assertions du test.

En termes simples, on peut dire que ce fichier contient la logique et les localisateurs pour interagir avec l'application.

Exemple

Ce qui suit est un script simple, TestSpecification.js, ayant le cas de test pour naviguer vers une URL et vérifier le titre de la page -

//TestSpecification.js
describe('Protractor Demo', function() {
   it('to check the page title', function() {
      browser.ignoreSynchronization = true;
      browser.get('https://www.tutorialspoint.com/tutorialslibrary.htm');
      browser.driver.getTitle().then(function(pageTitle) {
         expect(pageTitle).toEqual('Free Online Tutorials and Courses');
      });
   });
});

Explication du code

Le code du fichier de spécifications ci-dessus peut être expliqué comme suit -

Navigateur

C'est la variable globale créée par Protractor pour gérer toutes les commandes au niveau du navigateur. Il s'agit essentiellement d'un wrapper autour d'une instance de WebDriver. browser.get () est une méthode simple de Selenium qui demandera à Protractor de charger une page particulière.

  • describe et it- Les deux sont les syntaxes du framework de test Jasmine. le’Describe’ est utilisé pour contenir le flux de bout en bout de notre cas de test alors que ‘it’contient certains des scénarios de test. On peut avoir plusieurs‘it’ blocs dans notre programme de cas de test.

  • Expect - Il s'agit d'une assertion où nous comparons le titre de la page Web avec certaines données prédéfinies.

  • ignoreSynchronization- C'est une balise de navigateur qui est utilisée lorsque nous essaierons de tester des sites Web non angulaires. Le rapporteur s'attend à travailler uniquement avec des sites Web angulaires, mais si nous voulons travailler avec des sites Web non angulaires, cette balise doit être définie sur“true”.

Fichier de configuration

Comme son nom l'indique, ce fichier fournit des explications sur toutes les options de configuration de Protractor. Il dit essentiellement à Protractor ce qui suit -

  • Où trouver les fichiers de test ou de spécifications
  • Quel navigateur choisir
  • Quel framework de test utiliser
  • Où parler avec le serveur Selenium

Exemple

Ce qui suit est le script simple, config.js, ayant le test

// config.js
exports.config = {
   directConnect: true,

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },

   // Framework to use. Jasmine is recommended.
   framework: 'jasmine',

   // Spec patterns are relative to the current working directory when
   // protractor is called.
   specs: ['TestSpecification.js'],

Explication du code

Le code du fichier de configuration ci-dessus ayant trois paramètres de base, peut être expliqué comme suit -

Paramètre de capacités

Ce paramètre est utilisé pour spécifier le nom du navigateur. Cela peut être vu dans le bloc de code suivant du fichier conf.js -

exports.config = {
   directConnect: true,

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
},

Comme vu ci-dessus, le nom du navigateur donné ici est «chrome» qui est par défaut le navigateur pour Protractor. Nous pouvons également changer le nom du navigateur.

Paramètre de cadre

Ce paramètre est utilisé pour spécifier le nom du framework de test. Cela peut être vu dans le bloc de code suivant du fichier config.js -

exports.config = {
   directConnect: true,

   // Framework to use. Jasmine is recommended.
   framework: 'jasmine',

Ici, nous utilisons le framework de test 'jasmine'.

Paramètre de déclaration du fichier source

Ce paramètre est utilisé pour spécifier le nom de la déclaration du fichier source. Cela peut être vu dans le bloc de code suivant du fichier conf.js -

exports.config = {
   directConnect: true,
   // Spec patterns are relative to the current working 
   directory when protractor is called.
   specs: ['TsetSpecification.js'],

Comme vu ci-dessus, le nom de la déclaration du fichier source donné ici est ‘TestSpecification.js’. C'est parce que, pour cet exemple, nous avons créé le fichier de spécification avec le nomTestSpecification.js.

Exécuter le code

Comme nous avons une compréhension de base des fichiers nécessaires et de leur codage pour exécuter Protractor, essayons d'exécuter l'exemple. Nous pouvons suivre les étapes suivantes pour exécuter cet exemple -

  • Step 1 - Tout d'abord, ouvrez l'invite de commande.

  • Step 2 - Ensuite, nous devons aller dans le répertoire où nous avons enregistré nos fichiers à savoir config.js et TestSpecification.js.

  • Step 3 - Maintenant, exécutez le fichier config.js en exécutant la commande Protrcator config.js.

La capture d'écran ci-dessous expliquera les étapes ci-dessus pour exécuter l'exemple -

On voit sur la capture d'écran que le test a été réussi.

Maintenant, supposons que si nous testons des sites Web non angulaires et que nous ne mettons pas la balise ignoreSynchronization à true, après l'exécution du code, nous obtiendrons l'erreur «Angular est introuvable sur la page».

Il peut être vu dans la capture d'écran suivante -

Génération de rapports

Jusqu'à présent, nous avons discuté des fichiers nécessaires et de leur codage pour exécuter des cas de test. Protractor est également capable de générer le rapport pour les cas de test. A cet effet, il prend en charge Jasmine. JunitXMLReporter peut être utilisé pour générer automatiquement des rapports d'exécution de test.

Mais avant cela, nous devons installer Jasmine reporter à l'aide de la commande suivante -

npm install -g jasmine-reporters

Comme vous pouvez le voir, l'option -g est utilisée lors de l'installation de Jasmine Reporters, c'est parce que nous avons installé Protractor globalement, avec l'option -g.

Après avoir installé avec succès jasmine-reporters, nous devons ajouter le code suivant dans notre fichier config.js précédemment utilisé -

onPrepare: function(){ //configure junit xml report

   var jasmineReporters = require('jasmine-reporters');
   jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
      consolidateAll: true,
      filePrefix: 'guitest-xmloutput',
      savePath: 'test/reports'
   }));

Maintenant, notre nouveau fichier config.js serait le suivant -

// An example configuration file.
exports.config = {
   directConnect: true,

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },

   // Framework to use. Jasmine is recommended.
   framework: 'jasmine',

   // Spec patterns are relative to the current working directory when
   // protractor is called.
   specs: ['TestSpecification.js'],
   //framework: "jasmine2", //must set it if you use JUnitXmlReporter

   onPrepare: function(){ //configure junit xml report

      var jasmineReporters = require('jasmine-reporters');
      jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
         consolidateAll: true,
         filePrefix: 'guitest-xmloutput',
         savePath: 'reports'
      }));
   },
};

Après avoir exécuté le fichier de configuration ci-dessus de la même manière, nous l'avons exécuté précédemment, il générera un fichier XML contenant le rapport sous le répertoire racine dans reportsdossier. Si le test réussit, le rapport ressemblera à ci-dessous -

Mais, si le test échoue, le rapport ressemblera à celui ci-dessous -