Transportador - Escribiendo la primera prueba

En este capítulo, entendamos cómo escribir la primera prueba en Transportador.

Archivos requeridos por transportador

Transportador necesita los siguientes dos archivos para ejecutarse:

Archivo de prueba o especificación

Es uno de los archivos importantes para ejecutar Protractor. En este archivo, escribiremos nuestro código de prueba real. El código de prueba se escribe utilizando la sintaxis de nuestro marco de prueba.

Por ejemplo, si estamos usando Jasmine framework, entonces el código de prueba se escribirá utilizando la sintaxis de Jasmine. Este archivo contendrá todos los flujos funcionales y afirmaciones de la prueba.

En palabras simples, podemos decir que este archivo contiene la lógica y los localizadores para interactuar con la aplicación.

Ejemplo

El siguiente es un script simple, TestSpecification.js, que tiene el caso de prueba para navegar a una URL y verificar el título de la página:

//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');
      });
   });
});

Explicación del código

El código del archivo de especificación anterior se puede explicar de la siguiente manera:

Navegador

Es la variable global creada por Protractor para manejar todos los comandos del nivel del navegador. Básicamente es un contenedor alrededor de una instancia de WebDriver. browser.get () es un método simple de Selenium que le indicará a Transportador que cargue una página en particular.

  • describe y it- Ambas son las sintaxis del marco de prueba Jasmine. los’Describe’ se utiliza para contener el flujo de un extremo a otro de nuestro caso de prueba, mientras que ‘it’contiene algunos de los escenarios de prueba. Podemos tener múltiples‘it’ bloques en nuestro programa de casos de prueba.

  • Expect - Es una afirmación donde estamos comparando el título de la página web con algunos datos predefinidos.

  • ignoreSynchronization- Es una etiqueta de navegador que se utiliza cuando intentamos probar sitios web no angulares. Transportador espera trabajar con sitios web angulares solo, pero si queremos trabajar con sitios web no angulares, esta etiqueta debe establecerse en“true”.

Archivo de configuración

Como sugiere el nombre, este archivo proporciona explicaciones para todas las opciones de configuración del transportador. Básicamente le dice a Transportador lo siguiente:

  • Dónde encontrar los archivos de prueba o especificaciones
  • Que navegador elegir
  • Qué marco de prueba usar
  • Dónde hablar con Selenium Server

Ejemplo

El siguiente es el script simple, config.js, que tiene la prueba

// 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'],

Explicación del código

El código del archivo de configuración anterior que tiene tres parámetros básicos, se puede explicar de la siguiente manera:

Parámetro de capacidades

Este parámetro se utiliza para especificar el nombre del navegador. Se puede ver en el siguiente bloque de código del archivo conf.js:

exports.config = {
   directConnect: true,

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

Como se vio arriba, el nombre del navegador que se proporciona aquí es 'chrome', que es el navegador predeterminado para Transportador. También podemos cambiar el nombre del navegador.

Parámetro de marco

Este parámetro se utiliza para especificar el nombre del marco de prueba. Se puede ver en el siguiente bloque de código del archivo config.js:

exports.config = {
   directConnect: true,

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

Aquí estamos usando el marco de prueba 'jasmine'.

Parámetro de declaración de archivo de origen

Este parámetro se utiliza para especificar el nombre de la declaración del archivo fuente. Se puede ver en el siguiente bloque de código del archivo conf.js:

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

Como se vio arriba, el nombre de la declaración del archivo fuente dado aquí es ‘TestSpecification.js’. Es porque, para este ejemplo, hemos creado el archivo de especificación con el nombreTestSpecification.js.

Ejecutando el código

Como tenemos conocimientos básicos sobre los archivos necesarios y su codificación para ejecutar Transportador, intentemos ejecutar el ejemplo. Podemos seguir los siguientes pasos para ejecutar este ejemplo:

  • Step 1 - Primero, abra el símbolo del sistema.

  • Step 2 - A continuación, debemos ir al directorio donde hemos guardado nuestros archivos, a saber, config.js y TestSpecification.js.

  • Step 3 - Ahora, ejecute el archivo config.js ejecutando el comando Protrcator config.js.

La captura de pantalla que se muestra a continuación explicará los pasos anteriores para ejecutar el ejemplo:

Se ve en la captura de pantalla que la prueba ha sido superada.

Ahora, suponga que si estamos probando sitios web no angulares y no ponemos la etiqueta ignoreSynchronization en verdadero, luego de ejecutar el código obtendremos el error "Angular no se pudo encontrar en la página".

Se puede ver en la siguiente captura de pantalla:

La generación del informe

Hasta ahora, hemos hablado sobre los archivos necesarios y su codificación para ejecutar casos de prueba. Transportador también puede generar el informe para casos de prueba. Para ello, apoya a Jasmine. JunitXMLReporter se puede utilizar para generar informes de ejecución de pruebas automáticamente.

Pero antes de eso, necesitamos instalar Jasmine Reporter con la ayuda del siguiente comando:

npm install -g jasmine-reporters

Como puede ver, la opción -g se usa al instalar Jasmine Reporters, es porque hemos instalado Protractor globalmente, con la opción -g.

Después de instalar con éxito jasmine-reporters, necesitamos agregar el siguiente código en nuestro archivo config.js usado anteriormente:

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'
   }));

Ahora, nuestro nuevo archivo config.js sería el siguiente:

// 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'
      }));
   },
};

Después de ejecutar el archivo de configuración anterior de la misma manera, lo hemos ejecutado anteriormente, generará un archivo XML que contiene el informe en el directorio raíz en reportscarpeta. Si la prueba tuvo éxito, el informe se verá a continuación:

Pero, si la prueba falló, el informe se verá como se muestra a continuación: