Automatización de pruebas de aplicaciones Web con Javascript

Durante el ciclo de vida de las aplicaciones nos encontramos con distintos retos, cada uno de ellos con diversas soluciones. En el ámbito de la calidad, la metodología y prácticas utilizadas durante las pruebas son unos de los mayores retos, y su automatización, una de las prácticas en auge.

La automatización de pruebas de aplicaciones Web tiene como objetivo crear un conjunto de pruebas que simulen las acciones que puede realizar un usuario sobre el navegador, de forma que puedan ser repetidas tantas veces como sea necesario, ya sean en distintos momentos del desarrollo o sobre los distintos navegadores del mercado, para verificar el correcto funcionamiento de la aplicación web.

En este segmento se encuentra Selenium, que es la solución de código abierto y gratuita líder, y Nigthwatch que permite especificar pruebas para Selenium utilizando Javascript mediante una sintaxis fluent, lo que lo hace un lenguaje ideal para expresar de forma muy narrativa las pruebas automatizadas.

El objetivo de este artículo es presentar un ejemplo práctico de cómo automatizar pruebas utilizando Nightwatch.js.

Un ejemplo práctico

Para enseñar el funcionamiento de Nigthwatch utilizaré un ejemplo basado en la web de ITBlogSogeti. El objetivo de la prueba es verificar que se cumple con la siguiente especificación funcional:

“Como lector quiero poder buscar artículos por autor de forma que:

Cuando introduzco un autor en el cuadro de búsqueda que tenga artículos publicados entonces debe devolverme el listado de artículos de este autor.

Cuando introduzco un autor en el cuadro de búsqueda que no tenga artículos publicados entonces no aparece ningún artículo en el listado de artículos.”

Empecemos por el principio: Preparemos el entorno

Antes de poder comenzar a utilizar Nigthwatch es necesario preparar el entorno. Para poder ejecutar Nigthwatch debe instalarse los siguientes componentes:

1. Entorno de ejecución: js o iojs

2. Nightwatch: desde la línea de comandos de Windows y ejecutar la siguiente sentencia:

3. Comprobar que se ha instalado correctamente:

4. Descargar el servidor de Selenium (http://www.seleniumhq.org/download/)

Continuamos: Creamos una suite de pruebas

En este caso para crear una suite de pruebas utilizaremos Visual Studio 2013 Community Edition con Node.js Tools for Visual Studio (https://nodejstools.codeplex.com/).

Desde Visual Studio creamos un nuevo proyecto de consola de Node.js utilizando la acción “New Project” > “Blank Node.js Console Application”.

A continuación creamos la estructura de carpetas para la suite de pruebas, creamos las carpetas tests y reports, y a continuación añadimos el archivo nigthwatch.json.

 

Configuración de Nigthwatch:  Selenium, carpetas de pruebas, ubicación de los resultados…

Para configurar  Nightwatch utilizamos el archivo nigthwatch.json. Mediante este archivo es posible especificar la ubicación de las pruebas y donde se almacenar sus resultados, también podemos especificar la configuración de Selenium y definir diversos escenarios de pruebas, así como otros parámetros que definen como se va a comportar nigthwatch (http://nightwatchjs.org/guide#settings-file).

A continuación se incluye un archivo de ejemplo con una configuración mínima que permite el inicio automático de Selenium.

Desde este archivo configuramos las siguientes características de la prueba:

• Rutas que contienen las pruebas (src_folders) y rutas en las que se generan los informes de resultados (output_folder)
• Configuración del servidor de Selenium, es posible indiciar si nightwatch debe iniciar el servidor de Selenium (start_process: true) y la ruta en la que se encuentra el servidor de Selenium (server_path)
• Configuración de la prueba, en este ejemplo se ha creado una configuración por defecto (default) en la que se especifica que se probará con el navegador firefox (browserName), se añade soporte para Javascript (JavascriptEnabled) y para aceptar certificados SSL (acceptSslCerts).

Nuestra primera prueba: Estructura de una prueba

Una vez configurado Nigthwatch ya es posible iniciar el desarrollo de las pruebas automatizadas. Teniendo en cuenta la configuración de ejemplo, las pruebas deben crearse en la carpeta “tests”.

Dentro de la carpeta «tests» añadimos el archivo BuscarArticulosPorAutor.js. Para probar esta funcionalidad especificamos los dos escenarios descritos en el ejemplo: “Buscar artículos de Xavier Delgado” y “Buscar artículos de un autor no existente”.

Los escenarios de prueba se definen como funciones del objeto module.exports (para más información sobre el funcionamiento de los módulos de Node.js se puede consultar la documentación oficial de node.js https://nodejs.org/api/modules.html).

Incluimos a continuación la estructura mínima de una prueba sin implementación:

Una vez creada esta estructura, ya podemos ejecutar las pruebas utilizando la línea de comandos Nightwatch desde la carpeta en la que se encuentra el archivo nigthwatch.json. Al ejecutar la suite de pruebas se abrirá el navegador Firefox y  nos mostrará los siguientes resultados de la ejecución.

Muestra las pruebas que se han ejecutado y en este caso nos informa que en estas pruebas no se ha ejecutado ninguna verificación (No assertions ran), normal teniendo en cuenta que las pruebas son funciones vacías.

Verifiquemos el correcto funcionamiento

Añadimos el siguiente código a las pruebas para verificar ambos escenarios:

Como ya hemos visto, cada prueba (escenario) consiste en una función que recibe como argumento el objeto browser, sobre el que podremos especificar las interacciones del usuario utilizando la sintaxis de Nightwatch.

En concreto la prueba “Buscar artículos de Xavier Delgado” se ha configurado para realizar las siguientes acciones:

• Abrir la URL https://itblogsogeti.com/

 .url(«https://itblogsogeti.com/»)

• Esperar a que el elemento correspondiente al selector body.home este visible, en el caso en que tarde más de un segundo se generará un error de timeout

.waitForElementVisible(‘body.home’, 1000)

• Escribimos el texto Xavier Delgado en el elemento con el selector .search-text

.setValue(‘.search-text’, «Xavier Delgado»)

• Ejecutamos la búsqueda realizando un submit del formulario con selector .search-form

.submitForm(‘.search-form’)

• Esperamos a que el elemento con selector body.search sea visible, en el caso en que tarde más de un segundo generará un error de timeout. Si no se produce ningún error se ejecutará la callback function suministrada

 .waitForElementVisible(‘body.search’, 1000, function () {

• Verifica que se han encontrado artículos, comprobando que existen elementos con el selector h2.entrytitle.

browser.expect.element(‘h2.entrytitle’).to.be.present;

• Cierra el navegador

.end();

Ejecutemos las pruebas

Una vez codificadas las pruebas ya podemos continuar ejecutando estas pruebas.

Al ejecutar se abrirá el navegador  y veremos cómo ejecuta los comandos codificados.

En la consola veremos los resultados de la ejecución de las pruebas,  podemos observar que se han ejecutado los dos escenarios y se han pasado todas las verificaciones codificadas.

Conclusiones:

Este ejemplo básico nos ofrece una primera aproximación al desarrollo de pruebas automatizadas sobe aplicaciones Web utilizando Nightwatch.

Revisando este ejemplo podemos ver que Nigtwatch proporciona:

1. Una sintaxis fluida, de forma que el resultado de la ejecución de una función devuelve el mismo objeto, permitiéndome encadenar acciones
2. Selectores CSS3 para referenciar elementos del DOM de la página que estamos probando
3. Comandos (http://nightwatchjs.org/api#commands) que nos permiten simular las acciones del usuario, waitForElementVisible, setValue, click, clearValue, …
4. Gestión de expectativas (http://nightwatchjs.org/api#expect-api), que permite utilizar una sintaxis estilo BDD (Behavior Driven Development) en las verificaciones.
5. Y aunque en este ejemplo no se están usando, también es posible incluir Verificaciones (http://nightwatchjs.org/api#assertions) visible, elementPresent, valueContains, …. Además las verificaciones pueden ser de dos tipos assert.<condición> de forma que si falla la condición la prueba finaliza o verify.<condición> de forma que si la condición falla se registra el error pero continua con la ejecución de la prueba.

Nigthwatch aporta las siguientes ventajas respecto a otras soluciones de automatización de pruebas:

• Basado en Javascript, una vez escritas las pruebas es posible ejecutarlas sin necesidad de procesos de build o compilación adicionales.
• Permite ejecutar las pruebas en todos los sistemas operativos que soporten node.js y Java.
• Sintaxis familiar para los desarrolladores Web (Selectores CSS3) y fácil de entender.

Más información:

Xavier Delgado es Jefe de Proyecto de Sogeti España desde 2007. Como jefe de proyecto de la unidad de Soluciones Microsoft, es responsable de la gestión y entrega de los proyectos garantizando la satisfacción de nuestros clientes. Xavier comenzó su carrera en 1997 en la industria del software y en el año 2004 se unió a Sogeti para colaborar en proyectos como Analista-Orgánico.

Si deseas conocer más información sobre las soluciones bajo tecnología Microsoft que Sogei puede ofrecerte, visita nuestra web.