5 de abril de 2019

Realizar testing E2E con Protractor + Jasmine

Vivimos en un mundo en el que la tecnología está presente en nuestro día a día. Tareas como leer el periódico, hacer la compra o pedir cita en el médico, entre otras, se hacen con un ordenador, un smartphone o una tablet.

Para llegar a esto, es imprescindible el buen funcionamiento de las webs y aplicaciones que utilicemos.

En este artículo, nos vamos a centrar en la realización de pruebas en un entorno web y concretamente, en la utilización de la herramienta Protractor junto con Jasmine, que se usan para el testing E2E.

¿Qué es el testing End-To-End (E2E)?
Se trata de una metodología que permite verificar que el flujo de la aplicación funciona como está diseñado, de principio a fin. El objetivo de estas pruebas, es identificar las dependencias del sistema y asegurar la integridad de los datos entre los componentes que lo forman.

Lo que se suele hacer, es realizar el testeo de toda aplicación, poniendo mayor énfasis en las funcionalidades más críticas.

¿Qué es Protractor?
Es un framework E2E opensource, que se usa para testear aplicaciones web basadas en Angular y AngularJS. Se puede descargar en el siguiente enlace: https://www.protractortest.org

¿Qué es Jasmine?
Es un framework opensource, que se utiliza para probar el código JavaScript. Se puede descargar en el siguiente enlace: https://jasmine.github.io/

 Y ¿por dónde empiezo?
Vamos a crear un test de ejemplo, con el que probaremos el título de una web basada en AngularJS.

El test lo podéis encontrar aquí: https://github.com/bmontes1067/protractor-example

La información del equipo donde se ha realizado la prueba, es la siguiente:

  • Hardware: Portátil 2.5 GHz Intel Core i7, 8 GB DDR3.
  • Sistema Operativo: Windows 10 Home 64 bits.
  • Node.js 10.15.3
  • Protractor 5.4.2
  • Jasmine 3.3.1

1. Configuración
Protractor y Jasmine, son programas que se distribuyen como paquetes npm, por lo que necesitamos tener Node.js instalado en nuestro PC.
> npm install -g protractor

> npm install jasmine


Con estos comandos, instalamos Protractor y Webdriver-manager de forma global en nuestro equipo, así como Jasmine.

Para verificar que la instalación se ha realizado correctamente, podemos ejecutar este comando:

> protractor --version


Webdriver-manager, es una herramienta que nos permite crear una instancia de Selenium Server. Para descargar todos los recursos necesarios usaremos:

> webdriver-manager update

Y para arrancar el servidor:

> webdriver-manager start

Por defecto, el servidor de Selenium se levantará en la dirección http://localhost:4444/wd/hub
 


2. Creación del test:
Una vez hecho esto, crearemos nuestro test. Por un lado, tenemos el archivo conf.js que contiene la información relativa a la configuración y donde indicaremos el nombre del archivo que contiene el test a realizar. Por defecto, el navegador es Chrome.

exports.config = {

  framework: 'jasmine',

  seleniumAddress: 'http://localhost:4444/wd/hub',

  specs: ['spec.js']

}


El otro archivo que tendremos, en este caso, es spec.js que es el que contiene las pruebas que se van a realizar.

En esta prueba, vamos a comprobar el título de la página https://about.google/ 


Nuestro spec, quedaría así:

describe('Protractor Example App', function() {

  it('should have a title', function() {

    browser.get('https://about.google/');

    expect(browser.getTitle()).toEqual('Sobre nosotros | Google');

  });

});


A modo descriptivo, podríamos decir que:


  • "describe" e "it", son sintaxis de Jasmine, 
  • "browser" es un global creado por Protractor, que se utiliza para comandos a nivel de navegador. 

3. Ejecutar el test
Para comprobar si lo que hemos hecho funciona, ejecutaremos el comando:

> protractor conf.js

Deberíamos ver una ventana de Chrome con el mensaje informativo de que está siendo controlado por un software externo. Se cargará la URL https://about.google/ y se cerrará muy rápido.

El output que veremos en la consola será el siguiente:




 


Si has llegado hasta aquí y tienes el output indicado, ¡Enhorabuena! has completado de forma satisfactoria tu primer test con Protractor + Jasmine.

En las próximas publicaciones, iremos aumentando la complejidad de los test y veremos la creación de suites, entre otras muchas cosas.
¡Hasta la próxima!


Belén Montes
Quality Assurance en SDOS

1 comentario:

  1. Me encanta!

    Muy util para los que somos profanos en esta materia.

    Quedo a la espera de futuros aportes ampliando este area. Sigue asi!

    ResponderEliminar

¿Hablamos?

Cuéntanos como ayudarte

Si quieres más información sobre lo que hacemos, necesitas ayuda o quieres hablar con nosotr@s, solo tienes que ponerte en contacto.

Teléfono:

(+34) 648 961 876