“Está solo y no hay nadie en el espejo”
Jorge L. Borges

Como toda buena empresa de Software, en Mango llevamos la bandera de automatizar al máximo todo lo que tenga sentido. Es por eso que haber dado con CasperJS fue amor a primera vista.

Definido por su creador como una “herramienta de scripting de navegación y testing para PhantomJS y SlimerJS escrita en JavaScript”, Casper hace simple tareas fundamentales durante el desarrollo de toda web app. En otras palabras, levanta un navegador, realiza interacciones como seguir un link, hacer click en un selector CSS, escalar la ventana o completar un formulario siguiendo recetas escritas en nuestro querido JavaScript.

Mantener una suite de tests funcionales automatizada nos permite tener control en cada revisión de código de interacciones del usuario difíciles de testear de otro modo como son modales, widgets externos, sistemas de routing client-side, tiempos de carga del navegador e incluso la seguridad de mantener las funcionalidades para distintas resoluciones de pantalla.

A modo de ejemplo, subí un repositorio a github que muestra algunas funcionalidades útiles puestas en práctica. La tarea que realiza el script en este caso es entrar al sitio de WolframAlpha, buscar por la función “seno” y tomar una captura de pantalla del contenido de un elemento de tipo canvas que se carga dinámicamente. Luego abre un modal, espera a que se muestre, toma una captura completa y lo cierra. Lo capturado en el siguiente video fue generado automáticamente utilizando CasperJS.

La API de CasperJS nos provee de métodos muy convenientes como waitForSelector, waitWhileVisible o waitForResource para determinar cuando es posible realizar ciertas acciones. A su vez es relevante observar que la sección de testing de Casper tiene en cuenta métodos para verificar códigos de requests HTTP, cambios en el DOM y tiempos de ejecución.

A través de la utilización de esta herramienta encontramos casos de uso que hoy en día nos ayudan mucho y no imaginamos al empezar a utilizarla. Casper permite tomar capturas de pantalla mediante el método casper.capture. Pasar de una captura a un gif animado o un video del pasaje de un usuario por la aplicación es cuestión de timers y alguna herramienta como puede ser ffmpeg.

Un modo simple de generar estas animaciones en un entorno de tipo UNIX es:

var casper = require('casper').create({
  viewportSize: { width: 1024, height: 768 }
});

var i = 0;
var interval;

function takePictures() {
  interval = setInterval(function(){
    var n = ((i < 10) ? '0':'') + i;
    casper.capture('image-' + (n) + '.jpg', {
      top: 0,
      left: 0,
      width: 1024,
      height: 768
    });
    i++;
  }, 1000/8);
}

casper.start('http://casperjs.org/', function() {
  takePictures();
  casper.click('.nav li a');
});

casper.waitForUrl(/latest/, function(){
  clearInterval(interval);
});

casper.run();

Otro uso muy interesante que encontramos es el de inyectar código en sitios de terceros para testear como se vería nuestro código y nuestros widgets en los sitios de nuestros clientes antes de que sean implementados. Este tipo de testing permite detectar errores prematuramente y brindar una experiencia confiable y segura al usuario final.

Si todavía no probaron CasperJS, les recomiendo mucho que lo hagan. Para una excelente documentación y guia siempre es mejor recurrir al sitio oficial.

Pueden contarnos en Twitter a nuestra cuenta @getmango sus experiencias usando CasperJS