Introducción a Protractor

En este tutorial vamos a ver cómo realizar pruebas end2end en aplicaciones implementadas con AngularJS con la herramienta Protractor.

Índice de contenidos

• 1. Entorno
• 2. Introducción
• 3. Vamos al lío
• 4. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil Mac Book Pro 15″ (2,3 Ghz Intel Core i7, 16 GB DDR3)
• Sistema Operativo: Mac OS X El Capitan
• Atom 1.5.3
• Protractor 3.1.1

2. Introducción

Protractor es la herramienta que la gente de Google nos ofrece para la implementación de pruebas E2E de aplicaciones AngularJS, y recalco lo de aplicaciones AngularJS porque solo funciona con este tipo de aplicaciones.

Ya sabemos de otros tutoriales que AngularJS nos permite crear tests de cada elemento de la aplicación como vimos en este tutorial de Miguel Arlandy.

En esta ocasión vamos a hablar de pruebas máquina a máquina o test de aceptación, que se caracterizan por ser tests que realizan las verificaciones una vez la aplicación esta desplegada, gracias a Selenium, del que también hemos hablado en varias ocasiones.

3. Vamos al lío

Lo primero que tenemos que hacer es instalar la herramienta, que se distribuye como paquete npm.

$> npm install -g protractor

Esto nos va a instalar de forma global las herramientas protractor y webdriver-manager. Esta última nos va a ayudar a levantar una instancia de Selenium Server para lo que tendremos que ejecutar.

$> webdriver-manager update

Y una vez se haya descargado todos los binarios necesarios arrancamos la instancia ejecutando:

$> webdriver-manager start

Por defecto, nos levantará el servidor de Selenium en la URL: http://localhost:4444/wd/hub

El siguiente paso es configurar Protractor para lo que creamos el fichero e2e.conf.js en la raíz del proyecto con el siguiente contenido:

exports.config = {
  seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
  multiCapabilities: [{
    browserName: 'firefox'
  }, {
    browserName: 'chrome'
  }],
  specs: ['test/e2e/**/*.spec.js'],
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  }
}

En este fichero le estamos indicando cuál es la URL del servidor de Selenium que vamos a utilizar , en qué navegadores vamos a ejecutar, en este caso, Firefox y Chrome, dónde van a residir nuestros tests dentro de la estructura del proyecto y la configuración de Jasmine, para que muestre colores y establecer un timeout máximo de espera.

Ahora creamos nuestro primer tests, para lo cual necesitamos que la aplicación que vamos a probar este corriendo. En este enlace podéis descargar la aplicación de ejemplo con todo el contenido https://raguilera@bitbucket.org/raguilera/ng-protractor.git. Ahora ejecutáis dentro del directorio del proyecto:

$> bower install
$> live-server

Y ya tendréis la aplicación corriendo. En caso de error aseguraos que tenéis instalado bower y/o live-server, en caso contrario:

$> npm install -g bower
$> npm install -g live-server

La aplicación se levantará por defecto si no está ocupado en el puerto 8080 y simplemente consiste en un pequeño formulario que solo admite números y permite sumarlos, mostrando el resultado con un filtro que le añade tres asteriscos por delante y por detrás.

Ahora en vuestro proyecto creáis el fichero test/first.spec.js con el siguiente contenido:

describe('E2E: main page', function(){

  it('should exists calc div', function(){
    browser.get('http://127.0.0.1:8080/')
    var ele = by.id('calc')
    expect(browser.isElementPresent(ele)).toBe(true)
    element(by.model('calc.a')).sendKeys(2)
    element(by.model('calc.b')).sendKeys(4)
    element(by.id('suma')).click()
    expect(element(by.binding('calc.c')).getText()).toEqual('***6***')
  })

})

En este test primero conectamos con la URL donde está desplegada la aplicación y comprobamos que el div con id ‘calc’ existe. Acto seguido añadimos los valores deseados a los elementos del formulario por su propiedad ng-model y forzamos un click en el botón con identificador ‘suma’. Inmediatamente podemos evaluar el valor de la variable {{calc.c}} gracias a la función binding y con el matcher toEqual podemos ver que efectivamente es el resultado esperado.

Ahora ejecutamos en el terminal el comando protractor pasándole como argumento el fichero de configuración:

$> protractor e2e.conf.js

Esto hace que se ejecuten todos los tests que tengamos, lo que hará que se abran los navegadores especificados y que el resultado de los mismos nos lo muestre por pantalla.

4. Conclusiones

Como habéis podido ver resulta realmente sencillo hacer test end2end con protractor aunque recordad que en ningún caso deben sustituir a los test unitarios, ya que estos test son los más frágiles y requieren de mucho más mantenimiento.

Cualquier duda o sugerencia en la zona de comentarios.