Protractor para AngularJS

Ya hemos hablado en varios post sobre desarrollo de aplicaciones usando el framework AngularJS y a los que llevamos unos cuantos proyectos a la espalda se nos antoja muy necesaria una completa gestión sobre la calidad del producto que estamos desarrollando. Tristemente no siempre es un aspecto que se aborda en un mundo donde prima la velocidad del desarrollo sobre la calidad. Y ese es un clamoroso error, porque al final lo barato sale caro. El tiempo que vamos a ahorrar desarrollando de cualquier manera para llegar a objetivos lo vamos a consumir en la resolución de errores e imprevistos en los despliegues. Problemas que crecerán tanto en cuando el número de aportaciones crezca. Afortunadamente para ello existen múltiples herramientas para la automatización de pruebas de integridad, una de las mas conocidas podría ser Selenium HQ. Pues bien, si a la potencia y flexibilidad que aporta Selenium lo combinamos con AngularJS obtenemos Protractor la herramienta completa y eficaz para comprobar que todo sigue funcionando antes de "comitear" nuestro código.

Para romper un poco el hielo vamos a seguir el completo tutorial que nos ofrece la página de Protractor para la puesta a punto y uso. Asumimos como siempre que estamos desarrollando en un entorno Linux con NodeJS y Npm instalados.

Comenzaremos instalando en nuestro sistema a nivel global los paquetes de Protractor desde Npm:

$npm install -g protractor

Una ves instalado nos aseguramos que la herramienta webdriver-manager está actualizada e iniciada con:

$webdriver-manager update

$webdriver-managerstart

Ya tenemos el entorno preparado. Lo siguiente sería la configuración en nuestro proyecto.
Para ello  crearemos un fichero llamado conf.js con el contenido

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['todo-spec.js']
};

Atención que el truco está en la definición de nuestro fichero para la batería de pruebas spec.js (Nombre orientativo)

Para una primera prueba bastaría con copiar dentro del mismo el sigueinte contenido:

describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
    browser.get('http://www.angularjs.org');

    element(by.model('todoText')).sendKeys('write a protractor test');
    element(by.css('[value="add"]')).click();

    var todoList = element.all(by.repeater('todo in todos'));
    expect(todoList.count()).toEqual(3);
    expect(todoList.get(2).getText()).toEqual('write a protractor test');
  });
});

Y para lanzar finalmente por consola el test:

$protractor conf.js

Una nueva instancia de nuestro navegador se abrirá y ejecutara las pruebas.  Y en la consola obtendremos el resultado de las mismas.


si todo ha ido bien, nuestra aplicación se mantiene estable ;)


Mas información y tutoriales aquí.


Saludos!