CasperJS y la automatización de pruebas funcionales

El desarrollo de pruebas es una parte vital dentro del ciclo de desarrollo de aplicaciones de software, ya que gracias a ellas podemos disminuir el numero de bugs y regresiones; y con ello asegurar la calidad de nuestras aplicaciones. Durante el ciclo de desarrollo existen varios varios tipos de pruebas que son muy útiles para asegurar la calidad de una aplicación, entre las mas utilizadas están las pruebas unitarias y pruebas funcionales. En la actualidad hay muchas herramientas que facilitan el proceso de automatización de pruebas funcionales, dependiendo de la plataforma en la que se ejecuten nuestras aplicaciones. Dicha automatización nos ahorra tiempo, ya que no es necesario que una o varias personas estén ejecutando los mismos escenarios de prueba cada vez que hay un nuevo release. Por tanto, el día de hoy vamos a dar un vistazo a casperjs, que es una herramienta que facilita la automatización de escenarios de pruebas funcionales. 1. INSTALACION (Ubuntu 13.10) [prism:bash] # aptitude install phantomjs # aptitude install python # aptitude install build-essential chrpath git-core libssl-dev libfontconfig1-dev # git clone git://github.com/ariya/phantomjs.git # cd phantomjs # git checkout 1.9 # ./build.sh # ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs [/prism:bash] Para otras instalaciones ir a la pagina oficial de casper.js. 2. Una vez instalado, procedemos a automatizar un pequeño escenario de prueba en el que: Hacemos una búsqueda de '1+2' desde https://www.google.com.pa/. Para ello creamos un archivo llamado "calculadora.js", con el siguiente código: [prism:javascript] casper.test.begin('Calculadora', 2, function suite(test) { //>>Paso 1 casper.start('https://www.google.com.pa/', function() {//Cargamos la pagina this.test.assertTitle('Google');//Verificamos el titulo de la pagina this.fillSelectors('form', { //Llenamos el input de busqueda con '1 + 2 = 3' 'input[name="q"]': '1+2', }, true); ScreenShot(this, '1', 1);//Tomamos el screenshot del paso 1 }); //>>Paso 2 casper.then(function(){ this.test.assertEquals(this.getHTML('h2.r'), '1 + 2 = 3');//Verificamos que el resultado de la busqueda es el esperado ScreenShot(this, '2', 1);//Tomamos el screenshot del paso 2 }); casper.run(function() { test.done(); }); }); function ScreenShot(casperObject, step, delay) { casperObject.capture('paso-'+step+'.png', { top: 20, left: 10, width: 800, height: 400 }); } function delay(casperObject, seconds) { casperObject.wait((seconds*1000), function() {}); } [/prism:javascript] NOTA: Para ver mas detalles sobre los métodos ofrecidos por casperjs ir aquí 3. Ahora podemos ejecutar este escenario desde la terminal, para ello nos situamos en la carpeta donde tenemos nuestro código y aplicamos el siguiente comando: [prism:bash] $ casperjs test calculadora.js --verbose --log-level=debug [/prism:bash] 4. Esto nos debe arrojar el siguiente resultado: [prism:bash] PASS 2 tests executed in 3.794s, 2 passed, 0 failed, 0 dubious, 0 skipped. [/prism:bash] Por ultimo, si revisamos la carpeta donde tenemos el archivo "calculadora.js", veremos 2 nuevos archivos png (paso-1 y paso-2). Estos son screenshots tomados al final de cada paso, gracias al método "casperObject.capture", estos nos permite saber de manera visual el estado de la navegación al final de cada paso.