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

Compartir...Share on LinkedInEmail this to someoneShare on Google+Tweet about this on TwitterShare on FacebookPrint this page

nightwatch.jsRetomamos 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í:

nightwatch tree

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:

Crear archivo nightwatch.json

Crear archivo nightwatch.json

Cambiar extensión

Cambiar extensión

Archivo nightwatch.json abierto con sublime text

Archivo nightwatch.json abierto con sublime text

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.

nightwatch.js MSDOS

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í:

nightwatch tree final

nightwatch tree final

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.

9 comentarios

  • Pingback: Automatización de pruebas web con Nightwatch.js y Selenium - Testeando Software

  • Pingback: CasperJS: Asegurando la calidad de un proyecto Drupal - Testeando Software

  • Roberto Camacho Martinez

    Muy buena aportacion! Ahora solo me gustaria saber como puedo ejecutar la misma prueba pero en Google Chrome

    • Raúl Hernández

      Hola Roberto, para poder lanzar los tests en Google chrome tienes que hacer dos cosas. La primera es añadir al archivo nightwatch.json, dentro de test settings, la siguiente configuración:

      ,
      "chrome":{
      "desiredCapabilities":{
      "browserName":"chrome",
      "javascriptEnabled":true,
      "acceptSslCerts":true
      }
      }

      Y dentro de la parte de configuración de selenium lo siguiente:

      "cli_args":{
      "webdriver.chrome.driver":"./lib/chromedriver.exe""
      }
      },

      Con esto le estás diciendo dónde está el driver de chrome, que tendrás que descargar y poner en esa ruta. El driver lo puedes descargar de aquí.

      Debería ser algo así:

      Configuración nightwatch.js más chrome

      Por último, cuando vayas a lanzar los tests desde línea de comandos, debes especificar el ‘environment’ que quieres usar así:

      nightwatch -e chrome

      Si necesitas más info la encontrarás en la página de nightwatch.js.

      • Roberto Camacho Martinez

        {
        “src_folders” : [“./src/tests”],
        “output_folder” : “./logs/”,
        “selenium” : {
        “start_process” : true,
        “server_path” : “./lib/selenium-server-standalone-2.48.2.jar”,
        “log_path” : “./logs/”,
        “host” : “127.0.0.1”,
        “port” : 5555,
        “cli_args”:{
        “webdriver.chrome.driver”:”./lib/chromedriver.exe”
        }
        },
        “test_settings” : {
        “default” : {
        “launch_url” : “http:testeandosoftware.com”,
        “selenium_host” : “127.0.0.1”,
        “selenium_port” : 5555,
        “silent”: true,
        “screenshots” : {
        “enabled” : false,
        “path” : “./screenshots/”
        },
        “chrome”:{
        “desiredCapabilities”:{
        “browserName”:”chrome”,
        “javascriptEnabled”:true,
        “acceptSslCerts”:true
        }
        }
        }
        }
        }

        nightwatch -c config/nightwatch -e chrome

  • Jorge

    Muchas gracias por el aporte, una consulta si quisiera hacer una prueba que considerara solo hacer clic a un link como debería ser??

    intento lo siguiente pero no me funciona me da error: driver.findElement(By.cssSelector(“a[href*=’long’]”)).click();

  • carlos bello

    cuando se esta ejecutando selenium cuanto demora en cargarse?

  • manuel gomez

    hice el ejercicio completo pero me da el siguiente error.
    SyntaxysError: C:\nightwacht\config\nightwatch.json:unexpected token . in JSON at position 514

    • Testeando Software

      Hola Manuel,

      Revisa el archivo que te indica, nightwatch.json, porque tienes un punto donde no deberías. Creo que sería interesante que lo pases por una herramienta que te formatee el json.

      Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *