Testing javascript End 2 End con Protractor

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

testing-javascript-end-2-end-con-protractor

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 línea de comandos escribe la instrucción:

Terminal
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:

Terminal
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:

Terminal
webdriver-manager update

Una vez instalados los binarios, inicia el servidor con:

Terminal
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:

Terminal
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

Terminal
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.