Nightwatch.js. Instalación y primeras pruebas (I)

Retomamos las pruebas con Node.js. Hoy os vamos a hablar de como automatizar pruebas de navegador a partir de un proyecto construido en node.js utilizando el framework Nightwatch.js (que ejecuta llamadas contra un servidor de selenium usando el protocolo JsonWireProtocol).

Instalación de Nightwatch.js:

Durante el artículo vamos a partir de un equipo con windows 7, en el cual ya tenemos instalado Node.js. Si no lo tenéis instalado podéis seguir las instrucciones en nuestro artículo Nodejs. Instalación en windows.

Para confirmar que node está correctamente instalado abrimos una ventana de línea de comandos y escribimos ‘node -v’, y nos aparecerá un mensaje como el siguiente:

C:\Users\user>node -v

v0.10.32

Para instalar la última versión de Nightwatchjs, desde la misma ventana de línea de comandos escribimos ‘npm install -g nightwatch‘:

C:\Users\user>npm install -g nightwatch

El -g es muy importante, pues con esto conseguimos que el nightwatch runner esté disponible globalmente en cualquier ruta de nuestro sistema.

Cuando acabe de instalar, escribimos nightwatch -v y le damos a intro para verificar que se ha instalado correctamente:

C:\Users\user>nightwatch -v

nightwatch v0.5.28

Perfecto, ya tenemos nightwatch.js instalado en nuestro equipo.

Creando el proyecto

Lo primero que vamos a hacer es crearnos una estructura de carpetas que posteriormente nos va a facilitar la labor de administrar nuestro proyecto de pruebas automáticas.

Para ello, en la ruta que queramos de nuestro sistema vamos a crear una carpeta a la que nosotros hemos llamado nightwatch. Dentro de esta carpeta vamos a crear 2 más. La primera será config y la segunda src. La primera contendrá la configuración del proyecto, y en la carpeta src estarán los ficheros con el código de las pruebas, por lo que crearemos una carpeta aquí llamada tests. Crearemos una tercera carpeta lib, a la misma altura que config y src, que utilizaremos posteriormente. Debe quedarnos una estructura así:

Dentro de C:\ tenemos una carpeta nightwatch, dentro de esta 3 carpetas (config, lib y src) y dentro de src la carpeta tests.

Entramos en la carpeta config y, pulsando con el botón derecho, le decimos que queremos crear un nuevo documento de texto. Le ponemos de nombrenightwatch.json (es necesario que podamos ver las extensiones de nuestros archivos). Cuando nos pregunte que si estamos seguros, le decimos que si. Posteriormente, abrimos este archivo con alguna herramienta como sublime text, notepad++, o simplemente el bloc de notas, y escribimos lo siguiente:

{
 "src_folders" : ["./src/tests"],
 "output_folder" : "./logs/",
 "selenium" : {
  "start_process" : false,
  "log_path" : "./logs/"
 }, 
 "test_settings" : {
  "default" : {
   "launch_url" : "http:testeandosoftware.com",
   "selenium_host" : "127.0.0.1",
   "selenium_port" : 4444,
   "silent": true,
   "screenshots" : {
    "enabled" : false,
    "path" : "./screenshots/"
    }
   }
 }
}

Tras esto, guardamos el archivo. Para que lo veáis gráficamente, el proceso sería el siguiente:

Ejecutando el servidor de Selenium

Para poder ejecutar nuestras pruebas necesitamos tener arrancado el servidor de selenium. Tendremos que descargarlo, y después podemos ejecutarlo independientemente de las pruebas de nightwatch, o bien decirle a nightwatch que arranque el servidor de selenium.

Descargar Selenium

Descarga la última versión de selenium-server-standalone-{VERSION}.jar desde la página de descargas de selenium,  y guárdalo en la ubicación que prefieras.

Ejecutando Selenium Manualmente

Para ejecutar el servidor de selenium manualmente debemos abrir una ventana de línea de comandos, ir a la ruta dónde tenemos el archivo .jar que hemos descargado, y ejecutar el siguiente comando:

java -jar selenium-server-standalone-{VERSION}.jar

Ejecutando Selenium Automaticamente

Si vamos a tener el servidor de selenium en la misma máquina dónde vamos a ejecutar nightwatch.js, podemos hacer que el Nightwatch Test Runner se encargue directamente de arrancar y parar selenium. Para ello, en el archivo nightwatch.json cambiaremos esto:

"selenium" : {
  "start_process" : false,
  "log_path" : "./logs/"
 },

Por esto:

"selenium" : {
 "start_process" : true,
 "server_path" : "./lib/selenium-server-standalone-2.43.1.jar",
 "log_path" : "./logs/",
 "host" : "127.0.0.1",
 "port" : 4444
 },

Y guardamos el archivo.

Necesitamos además crear una nueva carpeta dentro de la carpeta nightwatch, a la que llamaremos lib, y donde copiaremos el archivo selenium-server-standalone-{VERSION}.jar que hemos descargado anteriormente.

Nosotros para las pruebas, vamos a hacer que el nightwatch runner arranque selenium.

Crear nuestra primera prueba automática

Por último vamos a crear nuestra primera prueba automática. Vamos a la carpeta src, y creamos una nueva carpeta llamada tests. Dentro de esta creamos un nuevo archivo al que llamaremos ejemplo1.js, y después lo abrimos con nuestro editor favorito (sublime text o notepad++ serán perfectos). Escribimos lo siguiente:

module.exports = {
 "Demo test Google" : function (browser) {
 browser
 .url("https://www.google.com")
 .waitForElementVisible('body', 1000)
 .setValue('input[type=text]', 'testeandosoftware')
 .waitForElementVisible('button[name=btnG]', 1000)
 .click('button[name=btnG]')
 .pause(1000)
 .assert.containsText('#main', 'testeandosoftware.com')
 .end();
 }
};

Y guardamos nuestro archivo.

Con esta prueba, lo que vamos a hacer es:

1. Abrir firefox
2. Ir a google.com
3. Escribir testeandosoftware en el recuadro de búsqueda y darle a buscar
4. Verificar que en la página de resultados aparece testeandosoftware.com.

Ejecutando la prueba

Para lanzar nuestra prueba, abrimos una ventana de línea de comandos, vamos hasta la ruta de nuestra carpeta nightwatch, y ejecutamos lo siguiente:

nightwatch -c config/nightwatch

Si todo va bien en la ventana de línea de comandos iremos viendo como se ejecutan los pasos.

Según se ejecutan los pasos, se abrirá firefox e irá haciendo lo que hemos indicado en el test.

Veremos que entre nuestras carpetas ha aparecido una nueva carpeta logs, que recoge los logs de la prueba, y que se ha creado automaticamente. El árbol de carpetas y archivos final será algo así:

A partir de aquí, navegando entre la gran documentación que hay en la developer guide  de nightwatch.js, podremos ir creando más pruebas automáticas que verifiquen nuesto sitio web, y no sólo que nuestro sitio web aparece en google.

Próximamente iremos haciendo crecer nuestra bateria de tests, y os mostraremos como ejecutar estas mismas pruebas contra un dispositivo móvil (android) que esté conectado a la misma red que nosotros (vía WiFi) sin necesidad de que esté conectado por USB, gracias a Appium.

Nightwatch.js. Instalación y primeras pruebas.