Guillermo Paz Mango Argentina payments pagos startup equipo

Estamos muy contentos de darle la bienvenida a Guillermo Paz al equipo de Mango.

Guille pasó los últimos 5 años en MercadoLibre donde cumplió funciones como Desarrollador Frontend Senior y fue uno de los responsables de Chico UI, una librería open source que ofrece un conjunto de componentes UI para la construcción de frontends.

En Mango, Guillermo se desempeñará como Desarrollador Frontend Senior y Evangelizador de Producto, lo que le permitirá trabajar en el corazón de los productos de Mango y adicionalmente colaborar estrechamente con la comunidad de desarrolladores para que puedan sacar el mayor provecho de nuestras soluciones.

Cuando Guille no está trabajando en los productos Mango, disfruta de ver series y películas, jugar al fútbol (gran defensor por derecha), jugar con su PS3 (su preferido: God of War), patinar en longboard, aprender sobre nuevas tecnologías web y seguir experimentando con JavaScript.

Pueden seguir a Guillermo en su perfil de GitHub y su cuenta de Twitter.

¡Bienvenido a Mango!

¿Querés trabajar en el equipo de Mango? Tenemos todas estas búsquedas abiertas. ¡Postulate ahora!

CasperJS Mango testing

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

CasperJS Mango

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