En este tutorial vamos a conocer la utilidad WebdriverIO que sirve para el testeo e2e (end to end) de aplicaciones web. Explicaremos como configurarlo y crearemos un test de ejemplo.
Índice de contenidos
1. Introducción
WebdriverIO es una utilidad para Nodejs que nos permite crear test de Selenium con Javascript haciendo uso de los frameworks de testeo más populares de Nodejs como son Mocha y Jasmine.
WebdriverIO nos proporciona una API y funcionalidad para realizar peticiones a un servidor Selenium mediante el WebDriver Wire Protocol y gestionar las respuestas. De esta forma podremos testear nuestra aplicación web ante cierto tipo de eventos y flujos de uso.
2. Entorno
El tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil MacBook Pro 17′ (2.66 Ghz Intel Core I7, 8GB DDR3).
- Sistema Operativo: Mac OS El Capitan 10.11.2
- Entorno: Editor Atom
- Node 5.X
3. Instalación
Se presupone que está instalada una versión estable de Nodejs. (Para saber como instalar Nodejs puedes ir al punto 3 aquí)
En primer lugar vamos a crear un directorio para realizar el tutorial. Abrimos un terminal y navegamos al lugar donde realizaremos el tutorial y creamos el directorio de trabajo
$> mkdir e2eWIOExample && cd e2eWIOExample
Seguidamente instalamos WebdriverIO. Es tan sencillo como ejecutar
$> npm install webdriverio
Una vez instalado procedemos a configurar el entorno, para ello WebdriverIO nos proporciona una herramienta para crear la configuración que nos permita ejecutar los test y definir el entorno de test. Ejecutamos el comando
$> wdio config
El terminal mostrará una serie de preguntas.
- En la primera seleccionamos: On my local machine
- En la segunda: mocha
- La tercera pregunta nos pide que indiquemos el directorio donde se almacenaran los test, aun no hemos creado dicho directorio pero vamos a aceptar el predeterminado pulsando intro
- En la cuarta pregunta se esta definiendo el tipo de formato de salida de los resultados de los test. Seleccionamos la opción spec.
- En la quinta pregunta seleccionamos error para que solo se nos muestre información en caso de error.
- Aceptamos el valor predeterminado para la sexta pregunta
- En la siguiente pregunta aceptamos el valor predeterminado ya que para este ejemplo testearemos una pagina web existente
Al acabar el proceso tendremos un fichero wdio.config.js en nuestro directorio de trabajo.
Para finalizar la configuración abrimos el archivo y buscamos la configuración del navegador
capabilities: [{
browserName: 'firefox'
}],
Podemos sustituirlo si queremos por otros navegadores como chrome (este paso es optativo)
capabilities: [{
browserName: 'chrome'
}],
A continuación instalamos el framework de mocha también con npm.
$> npm install --save-dev mocha
y los complementos para Mocha, Chai y Chai as Promise para ejecutar aserciones con promesas Javascript.
$> npm install --save-dev chai
$> npm install --save-dev chai-as-promised
Ahora necesitamos configurar el entorno de test para que incluya la librería de chai.
Para ello abrimos el archivo wdio.conf.js y añadimos las siguientes líneas a la función before al final del archivo.
var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
expect = chai.expect;
chai.Should();
Por último hay que instalar un servidor de selenium que nos permita ejecutar los test.
Por suerte tenemos uno disponible en node y podemos instalarlo con los siguientes pasos.
$> npm install --save-dev selenium-standalone
$> ./node_modules/selenium-standalone/bin/selenium-standalone install
Por último dejamos el servidor corriendo con
$> ./node_modules/selenium-standalone/bin/selenium-standalone start
4. Test
Una vez que hemos configurado todo lo anterior vamos a proceder a implementar los test.
Para ello creamos el directorio que especificamos en la configuración con
$> mkdir test && mkdir test/specs
Abrimos un editor (se recomienda Atom) y creamos un archivo test.js en el nuevo directorio. Dentro del archivo definiremos las pruebas que queremos realizar. En nuestro caso serán dos pruebas contra la página de google para no dedicar tiempo a la edición de html.
//Descripción del test
describe('app e2e tests', function() {
//Tiempo máximo para completar el test
this.timeout(40000);
it('Título correcto', function() {
});
it('Búsqueda ', function() {
});
});
Si ejecutamos
$> wdio wdio.conf.js
veremos como se ejecutan los test correctamente al no haber ninguna condición y por tanto todas las «condiciones» cumplirse.
Ahora vamos a implementar la lógica para el test ‘Título correcto’. Añade dentro de dicho test las siguientes lineas
return browser
.url('http://www.google.com')
.getTitle().should.eventually.be.equal('Google')
Es un sencillo test donde solicitamos que se cargue una dirección (en este caso google) con la función url una vez que se cumple la promesa de cargar la página se accede al título mediante getTitle y se compara haciendo uso de Chai.
La variable browser es proporcionada por WebdriverIO y representa de alguna manera el navegador con el que interactuamos.
WebdriverIO hace uso de las promesas en todos sus comandos y que se ejecutan a través de la variable browser
Si volvemos a ejecutar de nuevo
$> wdio wdio.conf.js
observamos como vuelve a superarse la batería de tests.
El siguiente test que vamos a implementer es hacer una búsqueda con google.
Para ello añade el siguiente código al test Búsqueda
return browser
.click('#sfdiv')
.keys('Prueba e2e')
.pause(5000)
.click('#sblsbb')
.pause(5000)
Obsérvese que como la página ya ha cargado en el test anterior no es necesario hacer una nueva llamada a url.
Hacemos uso del comando click para seleccionar el campo para búsqueda (en este caso un id encontrado gracias al inspector de código de chrome). A la función se le pasa un selector del DOM (y que en un desarrollo propio conoceríamos por lo general). Los selectores identifican un objeto del DOM. Es posible usar como selector un id, una clase o clases anidadas css, o incluso el xpath de un elemento.
Posteriormente se envía un evento de teclado con la frase «Prueba e2e» que quedará introducido como criterio de búsqueda.
Lo siguiente que hacemos es introducir una pausa con el objetivo de que se vea la interacción que están teniendo el navegador y el servidor selenium. Después hacemos click en el botón de búsqueda para que se realice la búsqueda y creamos una pausa para que pueda apreciarse que la búsqueda se ha realizado. Estas pausas no son necesarias de cara al test pero pueden ser útiles en otras situaciones donde necesitamos esperar a animaciones para interactuar con el navegador
Si volvemos a ejecutar los test veremos esos periodos de espera en el navegador y veremos nuevamente pasar los dos test en el terminal
5. Conclusiones
Siempre es bueno que nuestros proyectos estén cubiertos por tests en lo posible. Con WebdriverIO es posible testear flujos complejos, si bien estos test pueden llegar a ser tediosos de programar (especialmente con páginas con mucha animación) sería deseable cubrir ciertos aspectos de nuestras aplicaciones web que puedan requerir mucho tiempo para ser testeados por personas.
Así mismo un buen uso de css y un uso apropiado de los ids en las etiquetas html en los templates y código generado puede facilitar mucho la elaboración posterior de los test e2e.
En la página de WebdriverIO podrás encontrar la API (el enlace lo tienes más abajo en referencias). En posteriores tutoriales entraremos a fondo sobre la configuración y otras funcionalidades disponibles. Permaneced atentos!
