Cada vez más, el tráfico que reciben los sitios web procede de dispositivos móviles, y nuestras pruebas, como los desarrollos, deben ir cada vez más hacía el 'mobile first', es decir, nuestras pruebas web deben realizarse pensando primero en los dispositivos móviles. Según el artículo 'Internet stats & facts for 2016' de hostingfacts.com:
There are more mobile internet users than desktop internet users; 52.7% of global internet users access the internet via mobile, and 75.1% of U.S. internet users access the internet via mobile
A esto debemos unir que en los entornos encaminados hacía el 'continuous delivery' en los que trabajamos, no tiene sentido que estas pruebas sean manuales. Si queremos ser eficientes, y rápidos en la entrega de valor, debemos tener baterías de pruebas automáticas, que se ejecuten en una cierta variedad de dispositivos, y que nos permitan asegurar que nuestros sitios web cumplen con el nivel de calidad que hemos decidido.
Vale, me has convencido pero... ¿cómo automatizo mis pruebas web en móviles?
Una opción interesante es utilizar la siguiente combinación de herramientas: Appium + Nightwatch.js. A estas tendríamos que añadir una opción como Jenkins o Bamboo, que se encargue, por ejemplo, de lanzar las pruebas de forma automática cada vez que se suban cambios al repositorio.
Appium
Appium es el estándar en automatización de pruebas para móviles. Se trata de un framework open source que permite probar aplicaciones nativas, híbridas o, como en nuestro caso, aplicaciones web. Se dice de appium que 'es como selenium, pero para aplicaciones móviles'.
Appium se va a encargar de ejecutar las pruebas en el dispositivo móvil. Tiene varias características que lo hacen interesante:
- Nos vale tanto para dispositivos Android como para iOS.
- Podemos escribir los tests en el lenguaje que más nos guste: Java, Objective-C, JavaScript con Node.js, PHP, Python, Ruby, C#, Clojure, o Perl, en todos los casos usando el API de Selenium WebDriver.
- Tiene un grado de madurez alto, y apunta a ser el estándar para pruebas en dispositivos móviles de los próximos años.
Nightwatch.js
Nightwatch.js es un framework para pruebas web automáticas. Lo habitual es utilizarlo para lanzar las pruebas en dispositivos 'no móviles', ya que nightwatch.js ejecuta llamadas contra un servidor de selenium usando el protocolo JsonWireProtocol. En este caso vamos a combinarlo con appium, lo que nos va a permitir hacer pruebas web automáticas en tablets y móviles.
Instalando las herramientas
Los requisitos previos son tener instalado Node.js (incluido npm), y Java. Para verificar que efectivamente cumplimos estos requisitos, abrimos una ventana de línea de comandos (terminal en linux y mac) y verificamos las versiones instaladas de node.js y java.
Para saber la versión de node.js (recomendado tener al menos la v4.4.7):
node -v
Para la versión de java (recomendado tener a partir de la v1.8.0):
java -version
Primero confirmamos nuestra versión de Node y Java
Una vez confirmado que tenemos node.js instalado con una versión actual, tanto appium como nightwatch.js pueden ser instalados directamente desde su gestor de paquetes (npm). Desde línea de comandos ejecutamos los siguientes comandos para instalar las herramientas globalmente (anteponiendo 'sudo' , o haciendo 'su' antes en equipos linux):
npm install -g appium
De esta forma instalamos appium. Cuando finalice el proceso instalaremos nightwatch:
npm install -g nightwatch
En los siguientes enlaces tenéis más información sobre la instalación y primeras pruebas con nightwatch.js en Windows y tambien instalación y primeras pruebas con nightwatch.js en Mac OS.
Además de estas herramientas, necesitaremos alguna herramientas específicas para poder conectarnos a cada tipo de dispositivo, android o iOS. En el caso de android, necesitaremos tener instalado como mínimo el adb Universal Windows ADB Driver y el sdk de android, para lo que es recomendable instalar android studio. En iOS el mayor requisito es que necesitamos ejecutar las pruebas desde un MAC.
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.
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 dos carpetas más. La primera será 'config' y la segunda 'src'. En 'config' tendremos el fichero con 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.
En la carpeta config vamos a crear un nuevo archivo con el nombre 'nightwatch.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 algún editor de código fuente como sublime text (importantísimo que no nos introduzca caracteres extraños):
{
"src_folders": ["./src/tests"],
"output_folder": "./logs/",
"selenium": {
"start_process": false,
"log_path": "./logs/"
},
"test_settings": {
"default": {
"launch_url": "http://localhost/",
"selenium_host": "127.0.0.1",
"selenium_port": 4444,
"silent": true,
"screenshots": {
"enabled": true,
"on_failure": true,
"on_error": true,
"path": "./screenshots/errors/"
},
"desiredCapabilities": {
"browserName": "firefox",
"javascriptEnabled": true,
"acceptSslCerts": true
}
},
"iphone": {
"launch_url": "http://www.google.com",
"selenium_port": 4723,
"selenium_host": "localhost",
"silent": true,
"screenshots": {
"enabled": false,
"path": ""
},
"desiredCapabilities": {
"browserName": "iphone",
"platformName": "iOS",
"deviceName": "iPhone Simulator",
"version": "7.1",
"app": "PATH TO YOUR IPHONE EMULATOR APP",
"javascriptEnabled": true,
"acceptSslCerts": true
}
},
"android": {
"launch_url": "http://www.google.com/",
"selenium_port": 4723,
"selenium_host": "localhost",
"silent": true,
"screenshots": {
"enabled": false,
"path": ""
},
"desiredCapabilities": {
"browserName": "chrome",
"platformName": "ANDROID",
"deviceName": "CB51249FHF",
"version": "",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}
Escribiendo nuestro primer test
Ahora vamos a crear nuestro primer test. Vamos a la carpeta src/tests y dentro de esta creamos un nuevo archivo al que llamaremos ejemplo1.js. Después lo abrimos con el editor de código y escribimos lo siguiente:
module.exports = {
"Demo test Google" : function (browser) {
browser
.url("http://www.google.com")
.waitForElementVisible('body', 1000)
.setValue('input[type=search]', 'genbetadev.com')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('#main', 'genbeta')
.end();
}
};
En la siguiente imagen podéis ver el "proyecto completo". A la izquierda del todo podéis ver la estructura de carpetas, en el centro el archivo de configuración de nightwatch.js, y a la derecha el archivo con el test en si.
Como se ve nuestro proyecto en el editor Atom
Ejecutando la prueba
Para lanzar nuestra prueba lo primero que necesitamos es arrancar appium. Vamos a una ventana de línea de comandos, escribimos 'appium' y le damos a intro. Si lo hemos instalado globalmente como indicamos, veremos que la consola nos muestra algo similar a esto:
El servidor de Appium nada más arrancar
Después abrimos otra ventana de línea de comandos, desde la que vamos a ejecutar el runner de nightwatch.js. Vamos hasta la ruta de nuestra carpeta nightwatch, y ejecutamos lo siguiente:
nightwatch -c config/nightwatch.json -e android
Nightwatch es la orden para lanzar los tests. Con -c le especificamos la ruta del archivo (config/nightwatch.json) de configuración que deseamos que utilice y con -e le indicamos el entorno con el que queremos ejecutar las pruebas (android).
Si todo va bien en la ventana de línea de comandos iremos viendo como se ejecutan los pasos, en el móvil veremos como se abre chrome y ejecuta la navegación indicada, y en appium veremos todo lo que va haciendoen cada momento.
A la izquierda el runner de nightwatch.js, en el centro el navegador chrome ejecutándose en un móvil android, y a la derecha el servidor de appium
En nuestro caso, hemos instalado una herramienta -Vysor- que nos permite acceder desde el ordenador al móvil android, y confirmar que todo se ejecuta correctamente.
Siguientes pasos
Una vez que tenemos automatizado nuestra primera prueba, lo siguiente que tendríamos que hacer es seguir creciendo en pruebas, hasta tener una batería de pruebas mínima que podamos ejecutar automáticamente desde jenkins (por ejemplo) con la periodicidad que queramos, y que permita asegurar que nuevo código no rompa nuestro sitio web.
