Tests automatisés avec Jasmine Framework et Selenium

Dans le monde trépidant du développement de logiciels d’aujourd’hui, nous avons très fréquemment de nouvelles technologies et de nouveaux langages de développement. Cela s’accompagne de plusieurs outils et cadres de test et d’automatisation sur le marché connexe. Choisir le bon ensemble d’outils et de cadres devient une nécessité absolue car cela a un impact sur la précision et le TTM (Time to Market).

JavaScript est l’un des langages de programmation les plus utilisés pour les tests d’automatisation Web. Il prend également en charge un certain nombre de frameworks d’automatisation de test Selenium pour les tests d’interface utilisateur Web. De tous ceux disponibles, le framework Jasmine s’avère être le plus adapté, car il fournit une architecture stable et fonctionnelle. Il est facile de démarrer avec le framework Jasmine et de mettre en œuvre des scénarios de test avec le même.

Dans ce didacticiel sur les tests d’automatisation Selenium avec Jasmine, nous examinons les détails pratiques de Jasmine du point de vue des tests d’automatisation. Nous apprendrons également comment le configurer, suivi d’un exemple d’écriture de code et d’exécution.

Commençons!

Introduction au framework Jasmin

Jasmine Framework est un framework de test JavaScript open source. Il s’agit d’un framework basé sur le comportement (BDD), inspiré du développement et indépendant de tout autre framework. Il est utilisé pour les tests unitaires de scénarios de test JavaScript synchrones et asynchrones. En plus de sa prise en charge exceptionnelle de JS, il offre une prise en charge étendue de Python, Ruby et d’autres langages basés sur JavaScript. De plus, il est disponible pour différentes versions comme Standalone, Node.js, etc. Un avantage supplémentaire de l’utilisation de Jasmine est qu’il s’agit d’un framework indépendant avec une dépendance minimale (voire nulle) sur la langue, le navigateur et la plate-forme.

Le framework Jasmine ne nécessite pas de DOM et est très facile à mettre en place. De plus, il fournit une syntaxe impeccable et facile à lire comme dans l’exemple ci-dessous :

describe("A suite is just a function", function() {
  var a;
 
  it("and so is a spec", function() {
	a = true;
 
	expect(a).toBe(true);
  });
});

Pourquoi utiliser Jasmine Framework comme framework de test pour les tests JavaScript ?

Après avoir compris ce qu’est Jasmine Framework, examinons les principaux avantages de l’utilisation des tests d’automatisation JavaScript Selenium pour les tests d’interface utilisateur Web :

• Facile à configurer et facile à écrire des tests.
• Très rapide car il n’a presque aucune surcharge et aucune dépendance externe pour le noyau Jasmine.
• Il est livré avec un support prêt à l’emploi pour répondre à tous les besoins de test.
• Peut exécuter le navigateur et les tests Node.js avec le même framework.
• Une communauté étendue et active et une documentation régulièrement mise à jour pour le support et le développement.
• Prise en charge de l’utilisation d’espions pour la mise en œuvre de doubles de test dans le framework.
• Il prend même en charge les tests de code frontal à l’aide de l’extension Jasmine-jQuery.
• Il prend également en charge le développement piloté par les tests en plus du développement piloté par le comportement.
• Contrairement aux autres frameworks de test JavaScript, le framework Jasmine a des assertions intégrées.
• Il est livré avec un lanceur de test intégré, qui peut être utilisé pour exécuter des tests de navigateur.
• Fournit un grand nombre de matchers intégrés qui peuvent être utilisés pour répondre aux attentes et ajouter des assertions aux cas de test. Certains exemples sont:

Avantages de l’utilisation de Jasmine Framework avec Selenium

Jasmine et Selenium sont couramment utilisés pour les tests d’automatisation JavaScript et les tests d’automatisation de l’interface utilisateur Web, respectivement. Lorsque l’on travaille sur un projet Web UI basé sur JavaScript, mieux vaut conjuguer les forces pour en tirer parti :

• Le framework Jasmine et les tests d’automatisation Selenium se complètent en étant open source, faciles à mettre en œuvre et à l’échelle.
• Leur capacité à fonctionner avec presque tous les navigateurs et plates-formes est un autre avantage supplémentaire.
• En utilisant une grille Selenium, les tests du framework Jasmine peuvent être exécutés plus rapidement grâce à une exécution parallèle. Vous pouvez vous référer à notre article précédent sur « L’importance des tests parallèles dans Selenium » pour obtenir une compréhension détaillée des avantages offerts par l’exécution de tests parallèles.

Premiers pas avec le framework Jasmine

Après avoir rassemblé quelques connaissances sur le quoi et le pourquoi du framework Jasmine en JavaScript, allons maintenant creuser plus profondément et nous salir les mains avec l’implémentation. Dans cette section du Selenium Jasmine
tutoriel framework, nous apprendrons le workflow de Jasmine et comprendrons les bases de l’écriture de scénarios de test.

Supposons que nous devions tester un fichier Test.js en utilisant le framework Jasmine. SpecRunner.html serait le fichier de sortie qui exécutera tous les cas de test à partir de spec.js en prenant Lib comme entrée, puis affichez les résultats dans le navigateur.

• Lib: Se compose de fichiers JavaScript intégrés qui permettent de tester diverses fonctions et d’autres fichiers JS au sein du projet.
• SpecRunner.html: Un fichier HTML habituel qui affichera la sortie du test exécuté dans le navigateur.
• test.js: Ce fichier comprend les fonctionnalités/code réels sous test, qui doivent être testés à l’aide du spec.js et lib des dossiers.
• spec.js: Également appelé fichier de cas de test, il contient tous les cas de test dans un format prescrit pour le fichier à tester.

Voici les éléments de base des tests du framework Jasmine :

• Bloc suite : Suite constitue le bloc de construction de base du framework Jasmine. Une suite est composée de cas de test ou de spécifications écrites pour tester un fichier particulier et est composée de deux blocs : le describe() bloquer et it() bloc.
• describe(): Ceci est utilisé pour regrouper les cas de test liés écrits sous it(). Il n’y a qu’un seul describe() au niveau supérieur, sauf si la suite de tests est imbriquée. Dans ce cas, il faut un paramètre de chaîne pour nommer la collection de cas de test dans ce cas particulier describe() bloc.
• it()—contient des spécifications/cas de test : Ceci est utilisé pour définir les spécifications ou les cas de test à l’intérieur du describe() bloc. Comme un describe(), il prend des paramètres similaires : une chaîne pour le nom et une fonction qui est le cas de test que nous voulons exécuter. Une spécification sans aucune assertion n’est d’aucune utilité.

Chaque spécification du framework Jasmine consiste en au moins une assertion, appelée attente ici. Si toutes les attentes passent dans une spécification, cela s’appelle une spécification de réussite. D’un autre côté, si une ou plusieurs attentes échouent dans une spécification, on parle de spécification défaillante.

Note: Depuis it() et describe() les blocs sont des fonctions JavaScript, toutes les variables de base et les règles de portée s’y appliquent selon le code JS. De plus, ils peuvent contenir n’importe quel code exécutable valide. Cela signifie des variables au describing() niveau sont accessibles à tous et it() niveau dans la suite de tests.

Attentes ou correspondances

Les attentes ou les correspondances sont un moyen d’implémenter des assertions dans le framework Jasmine. Cela se fait avec l’aide du expect fonction, qui prend la valeur réelle produite par le cas de test en sortie.

Il est ensuite enchaîné avec une fonction matcher qui prend les résultats attendus pour ce cas de test, puis les évalue pour donner un résultat booléen. La valeur renvoyée est true si l’attente correspond, sinon c’est false. Le framework Jasmine fournit également l’utilitaire pour vérifier les assertions négatives en ajoutant not avant le matcher pour une fonction attendue requise.

Toutes les fonctions attendues relèvent de la it() bloc, et chaque it() bloc peut avoir un ou plusieurs expect() blocs. Le framework Jasmine fournit une large gamme de matchers intégrés et vous permet d’étendre les matchers via des matchers personnalisés :

describe("This is a describe block for expectations", function() {

it("this is a positive matcher", function() {
    expect(true).toBe(true);
  });

it("this is a negative matcher", function() {
    expect(false).not.toBe(true);
  });

});

Voici un petit exemple pour comprendre l’utilisation et l’implémentation du describe(), it()et expect() blocs. Nous allons tester un fichier nommé Addition.js avoir un fichier de spécifications correspondant avec des cas de test comme AdditionSpec.js:

function Addition() = { 
   
   initialValue:0,  
   
   add:function (num) { 
      this.initialValue += num; 
      return this.initialValue;    
   },     
   
   addAny:function () {    
      var sum = this.initialValue; 
		
      for(var i = 0; i < arguments.length; i++) { 
         sum += arguments[i]; 
      } 
      
      this.initialValue = sum; 
      Return  this.initialValue; 
   }, 
};

describe("to verify Addition.js file",function() { 
   
   //test case: 1  
   it("Should have initial value", function () {
      expect(Addition.initialValue).toEqual(0);  
   }); 
   
   //test case: 2  
   it("should add numbers",function() {
      expect(Addition.add(5)).toEqual(5); 
      expect(Addition.add(5)).toEqual(10);  
   });         
    
   //test case :3   
   it("Should add any number of numbers",function () {
      expect(Addition.addAny(1,2,3)).toEqual(6); 
   }); 
});

describe("to verify Addition.js file using nested suites",function() { 
   
   // Starting of first suite block  
   describe("Retaining values ",function () {
   
      //test case:1    
      it ("Should have initial value", function () { 
         expect(Addition.currentVal).toEqual(0);   
      });    
   }); //end of first suite block   

   //second suite block 
   describe("Adding single number ",function () {     
   
      //test case:2 
      it("should add numbers",function() { 
         expect(Addition.add(5)).toEqual(5); 
         expect(Addition.add(5)).toEqual(10); 
      });         
   }); //end of second suite block  

   //third suite block 
   describe("Adding Different Numbers",function () {  
   
      //test case:3 
      it("Should add any number of numbers",function() {  
         expect(Addition.addAny(1,2,3)).toEqual(6);  
      });    
   }); //end of third suite block 
});