Usar Behat con JavaScript

Una vez configurado Behat podemos hacer tests usando del driver Goutte de Mink, que es rápido pero no permite interacciones con JavaScript. Para solucionarlo debemos usar el driver Selenium2, que sí permite el uso de JavaScript. Nosotros hemos probado dos configuraciones:

Firefox

En este caso usamos un navegador Firefox completo, lo que nos permite realizar los tests más reales, dado que estamos usando un navegador completo de verdad. Obviamente es costoso dado que hace falta levantar una instancia de Firefox.

Para ponerlo en marcha necesitaremos tener instalado el entorno de ejecución de Java, el navegador Firefox y el servidor de Selenium. Los dos primeros están disponibles en los repositorios de casi cualquier dsitribución Linux, mientras que el servidor Selenium debemos descargarlo de su página de descargas (aquí están las versiones 2.39 y posteriores, las anteriores se deben descargar de su antigua página de descargas). De los diferentes paquetes disponibles deberemos escoger la versión standalone server, que es el componente que recibe las órdenes de Behat (de Mink concretamente) y las convierte en acciones en Firefox (pulsar un botón, recargar la página, clicar un enlace, etc).

Una vez tenemos los componentes no hace falta tocar nada en el archivo behat.yml, debería funcionar directamente.

Lo que sí es necesario es levantar el servidor Selenium. Normalmente bastará con ir al directorio donde hemos guardado el jar del standalone server y ejecutarlo:

java -jar selenium-server-standalone-2.45.0.jar

Una vez hecho esto bastará con lanzar los tests de Behat con la etiqueta @javascript y podremos ver como se levanta una instancia de Firefox y realiza los pasos indicados delante nuestro.

Bonus: Firefox en Vagrant

Si tenemos nuestro sitio en desarrollo en un Vagrant (cosa que es absolutamente necesaria en cuanto se quiere alcanzar un mínimo de profesionalización) la anterior receta no es válida directamente dado que normalmente se instalan sin entorno gráfico. Hay dos soluciones: instalar toda la paquetería necesaria para hacer funcionar Firefox sobre un servidor X11, con el consiguiente gasto de recursos, o engañar a Firefox. Para ello podes usar Xvfb, un servidor X11 pero que realiza todas las operaciones en memoria, sin mostrar nada por pantalla, por lo que requiere menos recursos y dependencias. Para instalarlo en Linux bastará con el siguiente comando: # aptitude install xvfb (como root o usando sudo; además si prefieres apt-get usa ese otro gestor).

Una vez instalado debemos lanzarlo usando un DISPLAY que seguro no esté en uso para evitar colisiones con el servidor X11 que esté usando nuestro escritorio, y lanzar el resto de programas (Firefox y Selenium).

Por ejemplo, en una consola podríamos ejecutar los siguientes comandos: export DISPLAY=:99 Xvfb :99 -ac & firefox& java -jar /opt/selenium-server/selenium-server-standalone-2.33.0.jar Esto es mis notas antiguas, repasando lo que tengo disponible en mi sistema ahora parece mucho más fácil gracias a xvfb-run: xvfb-run firefox El script se encarga de levantar el servidor con la configuración adecuada y ejecute el programa que queramos.

¡Listo! Ya podemos lanzar nuestros tests de JavaScript usando Firefox dentro de Vagrant. Eso sí, esta vez no veremos el navegador, claro.

PhantomJS

Si bien la solución de Firefox es válida es un poco engorrosa. Otra opción es usar PhantomJS, un navegador headless basado en Webkit que permite interaccionar con la web que estemos probando usando JavaScript.

La instalación de PhantomJS es muy sencilla. Basta con descargar su código fuente de su página de descargas y descomprimirlo en el directorio dónde queramos tenerlo instalado. Además es conveniente crear un enlace simbólico a su ejecutable desde un directorio de nuestra %PATH para no tener que poner la ruta completa cuando queramos ejecutarlo.

PhantomJS se usa de forma parecida a Selenium, es decir, se levanta como servicio y Behat se conecta a él para indicarle los pasos que tiene realizar. Tanto es así que Behat usa el driver de Selenium para manejarlo, pero esta vez sí necesitamos añadir una pequeña configuración. Bajo la clave selenium de nuestro fichero behat.yml se debe añadir la clave wd_host con la dirección dónde puede encontrar Behat al PhantomJS.

Por ejemplo:

      selenium2:
        wd_host: "http://127.0.0.1:8643/wd/hub"

Para levantar PhantomJS usaremos:

phantomjs --webdriver=8643

Como vemos le estamos indicando aquí el puerto en el que escuchar, que debe coincidir con el puerto que hemos indicado en el parámetro anterior wd_host.

Tras haber lanzado PhantomJS solo tenemos que ejecutar nuestros tests marcados con @javascript para que sea PhantomJS quien los realice.

Hay que tener en cuenta que es posible tener escenarios con las etiquetas @javascript y @api, de forma que podremos usar pasos de Drupal Extension que hacen uso del API de Drupal (vía drush o vía API directa) además de usar nuestro navegador headless con soporte total de JavaScript (eso sí, ciertos pasos no estarán disponibles, como la comprobación del estatus HTTP devuelto por la última petición). Esto permite, por ejemplo, rellenar un formulario AJAX mediante PhantomJS y después usar pasos que hagan uso de la API de Drupal, como lanzar el procesado de una cola (Drupal Queues) o hacer consultas a la BD de Drupal para comprobar que ciertos datos están como se supone que deben estar, todo ello en el mismo único test.