Tutorial casperjs instalación, configuración y tips

tutorial-casperjs.md

CasperJS

CasperJS permite escribir test en JavaScript que se ejecutan en el navegador, permite testeo de navegadores headless o no según la librería empleada.

Podemos instalar CasperJS con PhantomJS o SlimerJS.

PhantomJS (no empleado actualmente)

Usa webkit mediante QtWebkit (v5.5 en el momento de escribir este README). Aunque no requiere su instalación. Es completamente headless por lo que no podremos ver la página web, eso puede inducir a errores como poder pulsar un botón que en realidad no se está viendo porque otro elemento lo oculta.

• Realease notes.

Instalar PhantomJS

En Ubuntu se puede instalar mediante el gestor de paquetes (v2.1.1 en el momento de escribir este README). Usando: sudo apt install phantomjs.

PhantomJS puede dar problemas al realizar el casper selftest. En dicha situación recomiendo emplear este gist que guía por la instalación de phantomjs y casper.

SlimerJS

Usa Gecko (Firefox 52 en el momento de escribir este README). No es headless, abre una instancia del navegador con una opción headless instable mediante una extensión.

• Realease notes.
• Compatibilidad Slmier y Firefox.

Instalar SlimerJS

Descargar versión compatible de Firefox, en nuestro caso la más reciente soportada es Firefox 52.

Intalamos slimer: npm install -g slimerjs

Descargamos Firefox 52 y descomprimimos en /usr/local/share. Lo metemos dentro del path para que esté accesible para slimerjs:

export PATH=/usr/local/share/firefox-52/:$PATH

Instalar CasperJS

A pesar de no ser un módulo de NodeJS se puede instalar mediante npm, para ello usamos npm install casperjs y lo probamos con:

node_modules/casperjs/bin/casperjs --fail-fast selftest.

Usamos el flag fail-fast para que aborte el test al primer fallo.

Ejecutar CasperJS con SlimerJS

Modificar hello-test.js por el correspondiente o eliminar test si no vamos a realizar tests.

node_modules/casperjs/bin/casperjs --engine=slimerjs --fail-fast test hello-test.js

• Usamos el flag --fail-fast para que aborte el test al primer fallo.

• Si SlimerJS no se carga y no abre el navegador podemos agregar el flag --debug=true.

Tiempo de ejecución aproximado

En el momento de escribir este readme el test completo tiene 31 pruebas y tarda menos de 3s en terminarse.

Tips útiles

Mostrar mensajes console.log

Para ver por consola lo que devuelve el console.log() debemos emplear un evento de CasperJS que captura dichos mensajes. Código JS:

casper.on('remote.message', function(message) {
    this.echo(message);
});

• Stack Overflow example