Testing javascript End 2 End con Protractor

Tests automáticos javascript con Protractor, el framework de testing de AngularJS

Protractor es un framework para crear tests end-to-end. Sirve para automatizar pruebas sobre la aplicación que se quiera probar utilizando un navegador real e interaccionado como lo haría un usuario.

Aunque Protractor está diseñada para probar el framework javascript AngularJS, en este artículo lo configuraremos para que pueda probar cualquier tipo de aplicación javascript.

Instalar Protractor

Para ejecutar Protractor antes hay que tener instalado Node.js para poder usar el gestor de paquetes NPM. Si ya lo tienes instalado, desde la linea de comandos escribe la instrucción:

npm install -g protractor

Se instalará Protractor y la herramienta webdriver-manager. Para ver que se ha instalado correctamente ejecuta la siguiente instrucción que nos dará la versión instalada:

protractor --version

La herramienta webdriver-manager es una utilidad que sirve para emular las acciones de un usuario que se definirán mediante los tests. Para descargar selenium usa el comando:

webdriver-manager update

Una vez instalados los binarios, inicia el servidor con:

webdriver-manager start

Este servidor es una instancia de Selenium, que debes dejar abierta mientras se ejecutan los tests. Puedes abrir la url en http://localhost:4444/wd/hub para ver el estado del servidor.

Aunque no es necesario, en nuestro caso escribiremos los tests en coffeescript, un lenguaje para escribir javascript de forma más sencilla y leíble, para ello hay que instalar el módulo de node coffee-script:

npm install -g coffee-script

Antes de ejecutar los tests, antes hay que configurarlos. Para ello se crea un archivo lamado conf.js con el siguiente contenido:

require('coffee-script/register')
baseUrl = "http://localhost"

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: [
    '*.spec.coffee'
  ],
  baseUrl: baseUrl,
  capabilities: {
    'browserName': 'chrome'
  },
  onPrepare: function() {
    browser.ignoreSynchronization = true
    browser.manage().timeouts().pageLoadTimeout(40000)
    browser.manage().timeouts().implicitlyWait(25000)
  }
}

Este de archivo de configuración es en Javascript (.js) y cargamos con el require los comandos que parsearán el coffeescript.

También definimos la url del servidor selenium, los archivos que contienen los tests (en nuestro caso los que terminen con la extensión .spec.coffee), la url base de nuestra APP, el driver del navegador que se usará (en este caso chrome) y finalmente setearemos la variable browser.ignoreSynchronization a true, para indicarle que no es una aplicación AngularJS para que no intente sincronizarla como tal.

Escribir tests

Ahora vamos a definir un test de ejemplo. Para ello creamos un script llamado test.spec.coffee:

describe "Sesion de un usuario", ->
  it "inicio sesión de un usuario", ->
    browser.get("/")
    expect(browser.getTitle()).toEqual('Login')
    element(By.id('username')).sendKeys("nombreusuario")
    element(By.id('password')).sendKeys("contraseña")
    element(By.id('login')).click()

El ejemplo visita una página de login, rellena el usuario y password y le da click al botón "login".

Para ejecutar el test desde la consola usamos

protractor conf.js --verbose

La opción --verbose sirve para que muestre por la consola los mensajes de detallados del test cuando falla o salta una excepción.

Si todo ha ido bien, veremos como se abre una pantalla del navegador chrome y se van realizando los pasos definidos automáticamente.