CasperJS y la automatización de pruebas funcionales

By Anonymous (not verified), 10 April, 2014
desarrollo de software

 

El desarrollo de pruebas es una parte vital dentro del ciclo de desarrollo de aplicaciones de software, ya que ayuda a disminuir el número de bugs y regresiones, asegurando la calidad de las aplicaciones. Durante este ciclo, existen varios tipos de pruebas útiles para garantizar dicha calidad, entre las más comunes están las pruebas unitarias y las pruebas funcionales.

 

En la actualidad, existen muchas herramientas que facilitan el proceso de automatización de pruebas funcionales, dependiendo de la plataforma en la que se ejecuten las aplicaciones. La automatización de pruebas nos ahorra tiempo, ya que no es necesario que una o varias personas ejecuten los mismos escenarios de prueba cada vez que hay un nuevo release.

 

En este artículo, vamos a explorar CasperJS, una herramienta que facilita la automatización de escenarios de pruebas funcionales.

 

1. Instalación de CasperJS en Ubuntu 13.10

Para instalar CasperJS en Ubuntu, sigue los siguientes pasos en la terminal:

 
# Instalar dependencias necesarias aptitude install phantomjs aptitude install python aptitude install build-essential chrpath git-core libssl-dev libfontconfig1-dev # Clonar el repositorio de phantomjs git clone git://github.com/ariya/phantomjs.git cd phantomjs git checkout 1.9 ./build.sh # Crear enlace simbólico a CasperJS ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs 

 

Para otros sistemas operativos o versiones, puedes consultar la página oficial de CasperJS.

 

2. Automatización de un Escenario de Prueba

Una vez que CasperJS está instalado, vamos a automatizar un pequeño escenario de prueba en el cual realizamos una búsqueda de "1+2" en Google desde https://www.google.com.pa. Para ello, vamos a crear un archivo llamado calculadora.js con el siguiente código:

 
casper.test.begin('Calculadora', 2, function suite(test) {    // Paso 1: Cargar la página de Google y hacer la búsqueda    casper.start('https://www.google.com.pa/', function() {        this.test.assertTitle('Google');  // Verificar el título de la página        this.fillSelectors('form', {     // Llenar el formulario de búsqueda            'input[name="q"]': '1+2',        }, true);        ScreenShot(this, '1', 1);  // Tomar un screenshot del paso 1    });    // Paso 2: Verificar el resultado de la búsqueda    casper.then(function() {        this.test.assertEquals(this.getHTML('h2.r'), '1 + 2 = 3');  // Verificar que el resultado es el esperado        ScreenShot(this, '2', 1);  // Tomar un screenshot del paso 2    });    casper.run(function() {        test.done();    }); }); // Función para capturar screenshots function ScreenShot(casperObject, step, delay) {    casperObject.capture('paso-'+step+'.png', { top: 20, left: 10, width: 800, height: 400 }); } 

 

Nota: Para obtener más detalles sobre los métodos disponibles en CasperJS, puedes consultar la documentación oficial.

 

3. Ejecución del Escenario de Prueba

Una vez que hayas creado el archivo calculadora.js, puedes ejecutar el escenario desde la terminal con el siguiente comando:

$ casperjs test calculadora.js --verbose --log-level=debug 

 

4. Resultados y Verificación de la Prueba

Al ejecutar el comando anterior, deberías obtener el siguiente resultado en la terminal:

 

PASS 2 tests executed in 3.794s, 2 passed, 0 failed, 0 dubious, 0 skipped. 

 

Además, al revisar la carpeta donde se encuentra el archivo calculadora.js, verás dos nuevos archivos PNG (paso-1.png y paso-2.png). Estos screenshots fueron tomados al final de cada paso gracias al método casperObject.capture, lo que nos permite tener una visión visual del estado de la navegación después de cada paso.

 

De esta forma, puedes automatizar escenarios de prueba funcionales utilizando CasperJS, ahorrando tiempo y recursos en la ejecución de pruebas repetitivas durante el ciclo de desarrollo de software.

 

Te recomendamos este video

Thumbnail
Imagen
desarrollo de software
Weight
0
Hero
Title
CasperJS y la automatización de pruebas funcionales
Image
Imagen
Text Color
White
Text Alignment
Left
Size
Medium
Overlay effect
Hide overlay effect
Date
Premium
No