Chimp.js. Automated web testing por y para desarrolladores

[Chimp.js] (simplemente Chimp en adelante) es un framework para automatizar pruebas web construido sobre Node.js y que funciona en cualquier plataforma (OSX, Linux y Windows). Permite escribir tests en Javascript obteniendo feedback en tiempo real, ya que el navegador puede ejecutar los tests mientras los escribimos.

Probar la interfaz de usuario con pruebas automatizadas

Se trata de una herramienta para crear pruebas sobre nuestra interfaz de usuario, por lo que vamos a poder utilizar estas pruebas como smoketests, pruebas de regresión, o incluso pruebas de aceptación. Permiten probar que la interfaz de usuario funciona correctamente después de realizar cambios en el código, más rápidamente que las pruebas manuales, por lo que podemos ejecutarlas con más frecuencia.

Este tipo de pruebas se situarían en la cúspide de la famosa pirámide de testing (concepto creado por Mike Cohn y popularizado por Martin Fowler).

Lo que plantea este concepto es que la base de nuestras pruebas de software debe estar compuesta por tests unitarios. Son pruebas de ejecución muy rápida que se encargan de verificar que cada uno de nuestros módulos por separado funciona.

En el siguiente escalón de la pirámide se situarían las pruebas de integración, con las que comprobamos el correcto funcionamiento de nuestro sistema. Estas pruebas requieren un entorno de integración, en lugar de usar dobles de test como hacen las pruebas unitarias, y tardan más tiempo en ejecutarse.

Por último estarían las pruebas que se ejecutan sobre la interfaz de usuario de nuestra aplicación. Estas pruebas han sido tradicionalmente frágiles (un cambio en la interfaz hace que haya que rehacer los tests). Esta fragilidad aumenta si usamos herramientas de tipo "grabar y reproducir", bastante usadas en el mundo del testing. Son pruebas que requieren más tiempo de ejecución y también, en muchos casos, son difíciles de manejar en entornos de integración continua.

Chimp facilita la tarea de realizar tests sobre la interfaz de usuario, encargándose de la configuración necesaria para poder ejecutar estas pruebas. Se encarga, por ejemplo, de instalar Selenium, ChromeDriver, IEDriver, PhantomJS o Cucumber.js haciendo de esa forma más sencillo mantener el foco en lo realmente importante: el desarrollo, tanto de nuestra aplicación como de los tests que asegurarán la calidad de nuestro software. Además, combina perfectamente con distintas herramientas de integración continua.

Usar Chimp es especialmente interesante si usamos como metodología BDD (Behaviour Driven Development), puesto quec está perfectamente integrado con Cucumber. Esto nos va a permitir avanzar sin distracciones en nuestro desarrollo. Además de con Cucumber, también podemos usar Chimp en combinación con otros frameworks de pruebas en javascript como Mocha o Jasmine.

Chimp es utilizado por Simian, una herramienta de colaboración para la especificación de requisitos de software también desarrollada por los chicos de Xolv.io.

Instalación

Los únicos requisitos previos son, tener instalado node y npm, y el JDK v1.8 o más actual. Para verificar que efectivamente cumplimos estos requisitos, abrimos uns ventana de línea de comandos (terminal en linux y mac) y verificamos las versiones instaladas de node.js y java. Para ello ejecutamos los siguientes comandos: 'node -v' para saber la versión de node.js, y 'java -version' para la versión de java.

Si lo necesitamos, este es el enlace para descargar java. Si los problemas son con node, aquí teneís una guía para instalar node en windows.

Si cumplimos con los requisitos, simplemente debemos ejecutar el comando 'npm install -g chimp' o 'npm install chimp', en función de que queramos instalarlo globalmente, o bien sólo para un determinado proyecto. Ya está. Es lo único que tenemos que hacer. NPM se encargará de instalar todos los módulos necesarios.

Ejemplo práctico

Para hacernos una idea más clara de como funciona Chimp, vamos a ver un sencillo ejemplo de uso. Vamos a crear un test en el que abriremos una ventana del navegador Chrome, iremos a la web de google (Given I have visited Google), realizaremos la búsqueda "Genbeta Dev" (When I search for "Genbeta Dev") y verificaremos que aparece un enlace a Genbeta Dev (Then I see "Genbeta Dev").

Necesitamos una ventana de línea de comandos y el editor de código que más nos guste. Para este ejemplo yo he usado Atom. Vamos a seguir el tutorial que hay en el sitio web de Chimp, pero para los más impacientes os voy a mostrar todo el código fuente y la estructura que vamos a tener como resultado final:

Lo primero que vamos a hacer es crearnos una carpeta dónde pondremos el todo el código de nuestro ejemplo (2 archivos). En nuestro caso hemos llamado a la carpeta 'tutorial_chimp'. Posteriormente, desde la línea de comandos, dentro de esta carpeta, ejecutamos el siguiente comando:

'chimp --watch'

Chimp descargará las herramientas que necesite y en la consola nos mostrará un mensaje como este:

'[chimp] Running... [chimp][cucumber] Directory ./features does not exist. Not running'.

Ahora vamos a crear una carpeta 'features' y veremos que arranca una sesión del navegador Chrome. Dentro la carpeta features creamos el archivo el archivo 'search.feature'. Editamos este archivo y ponemos lo siguiente:

Feature: Search the Web
  As a human
  I want to search the web
  So I can find information
  Scenario: Search for Genbeta Dev
    Given I have visited Google
    When I search for "Genbeta Dev"
    Then I see "Genbeta Dev"

En la consola nos aparecerá el siguiente mensaje:

[chimp] Watching features with tagged with @dev,@watch,@focus
[chimp] Running...
0 scenarios
0 steps

Ahora añadimos la etiqueta @watch a nuestro archivo search.feature justo antes de definir el escenario, y guardamos el archivo, quedando algo así:

Feature: Search the Web
  As a human
  I want to search the web
  So I can find information
@watch
  Scenario: Search for Genbeta Dev
    Given I have visited Google
    When I search for "Genbeta Dev"
    Then I see "Genbeta Dev"

En la consola ahora veremos más información, y cucumber nos indica que no se han implementado las definiciones de los pasos para ese escenario, y nos informa de cómo hacerlo. Creamos la carpeta support, dentro de features, añadimos el archivo 'step_defs.js' y añadimos el siguiente código:

module.exports = function() {

  this.Given(/^I have visited Google$/, function () {
    browser.url('http://google.com');
  });

  this.When(/^I search for "([^"]*)"$/, function (searchTerm) {
    browser.setValue('input[name="q"]', searchTerm);
    browser.keys(['Enter']);
  });

  this.Then(/^I see "([^"]*)"$/, function (link) {
    browser.waitForExist('a=' + link, 5000);
  });
}

Ahora si, Chrome irá a la página de Google.es, buscará 'Genbeta Dev', y Chimp confirmará que un enlace a 'Genbeta Dev' aparece en la página de resultados.

Conclusión

Esto es sólo un pequeño ejemplo de lo que se puede hacer con Chimp. Se trata de una herramienta con mucha proyección de futuro. Con los conocimientos adecuados de Cucumber y la sintaxis Gherkin puede aportar mucho a equipos que quieran empezar a aplicar BDD.

Aspectos positivos:

Entre las cosas que más me gustan de Chimp destacaría que es muy rápido empezar a usar la herramienta. En unos minutos podemos tener algunos tests listos para montarlos en nuestro entorno de integración continua, sin importar que usemos TravisCI, CircleCI, CodeShip o, por supuesto, Jenkins. Otro aspecto positivo es que hacen muy sencillo empezar a hacer Desarrollos Dirigidos por Comportamiento (BDD), muy demandados por la industria actualmente, y de gran valor si nuestros equipos de desarrollo y negocio trabajan codo con codo. Otro aspecto destacable

Aspectos negativos:

Lo peor es que de momento tiene poca comunidad, debido a su juventud. Esto hace que la información que hay en la web, más allá de la oficial, sea de momento escasa. Por otro lado, Chimp hace muchas cosas por nosotros a nivel de configuraación, y eso ahorra tiempo. Pero si se rompe, puede llevar algún tiempo conseguir que funcione de nuevo.

Más información | Chimp