Comparte en Facebook Twitter Google+

Hace unas horas se ha publicado la versión Alpha de Laravel Dusk. Dusk es un nuevo componente para realizar pruebas automatizadas en Laravel que nos permitirá probar aplicaciones desde la perspectiva de un usuario, incluso aquellas que hagan uso de JavaScript en el navegador.

A grandes rasgos, es una capa de abstracción sobre el Webdriver creado por Facebook, al que se han agregado métodos para poder hacer pruebas sobre Laravel de forma más sencilla. Por defecto utiliza Chromedriver, un driver para que las pruebas se ejecuten sobre Chrome, pero es posible usar otros navegadores soportados por Selenium.

Ten en cuenta que es una versión Alpha, por lo que puede contener errores, o puede que la API se modifique en el futuro. La documentación del componente aún no está disponible, pero podrás ver ya algunos ejemplos en el repositorio de GitHub https://github.com/laravel/dusk

Instalación

Laravel Dusk sólo está disponible actualmente para Mac y Linux, pronto estará disponible también para Windows.

Para probar Dusk vamos a crear un nuevo proyecto con la versión 5.4 de Laravel. Como esta versión aún está en desarrollo, debemos indicar a Composer que nos instale la versión de desarrollo:

Si tienes el instalador de Laravel puedes usar laravel new probando-dusk --dev (no olvides colocar –dev para instalar la versión en desarrollo).

A continuación, entramos a la carpeta del proyecto e instalamos el componente de Dusk:

En el método register de AppServiceProvider nos aseguramos que se registre el Service Provider de Dusk:

El Servide Provider está añadido aquí, en lugar del array de providers de la configuración, para poder limitar los entornos en los que Dusk se ejecuta, ya que Dusk agrega una funcionalidad para poder iniciar sesión como otros usuarios para facilitar los tests. Por seguridad, lo debemos limitar únicamente a los entornos de testing.

Ahora vamos a ejecutar el siguiente comando:

Este comando generará en el directorio tests  el fichero DuskTestCase.php , que contendrá la clase de la que extenderán las pruebas de Dusk, y el directorio Browser , donde podremos crear todas nuestras pruebas.

Por último, debes configurar la aplicación para que sea accesible desde una url, y debes configurar esa url en el fichero .env . En mi caso, configuré un virtualhost con la siguiente url:

Con esto ya podemos comenzar a ejecutar las pruebas. Para ejecutar los tests, usamos el comando:

Si todo ha ido bien, la terminal deberá mostrar un mensaje indicando que el test de ejemplo ha pasado correctamente:

En mi caso tuve problemas, ya que los tests no comenzaban y al final fallaban por timeout. Si te ocurre lo mismo, para solventar el problema de forma temporal y poder probar Dusk puedes descargar Chromedriver y ejecutarlo de forma manual en una terminal aparte, indicándole un puerto diferente al que Laravel configura por defecto.

En mi caso descargué la versión para Linux de 64 bits. Descarga la versión correspondiente para tu sistema operativo en https://sites.google.com/a/chromium.org/chromedriver/downloads

Y por último, en el archivo DuskTestCase.php  modifica la URL del WebDriver para indicar el puerto configurado anteriormente:

Ahora ya puedes probar de nuevo a ejecutar los tests:

Ten en cuenta que Dusk abrirá un navegador para ejecutar las pruebas. Por lo tanto, es posible que no funcione si lo ejecutas en un servidor. Al probar Dusk he comprobado que no funciona en Homestead, así que las pruebas las he ejecutado en mi propio equipo.

Creando nuestra primera prueba con Dusk

Vamos a crear una prueba que compruebe que un usuario se carga correctamente con JavaScript. Para hacer el ejemplo sencillo, no vamos a guardar el usuario en la base de datos, sino que simplemente devolveremos un array con sus datos.

Para crear la prueba puedes usar el comando php artisan dusk:make NombreDelTest:

Esto creará un nuevo test en tests/Browser/UserTest.php . En el test incluiremos el siguiente código:

En el test estamos indicando los siguientes pasos:

  • Abre un nuevo navegador.
  • Visita la url /profile.
  • Espera a que se cree un elemento con el id #user  en la página.
  • Comprueba que en un elemento con la clase .name  se muestra el nombre.
  • Comprueba que en un elemento con la clase .email  se muestra el email.

Podemos ejecutar esta prueba prueba de forma individual con

o ejecutar todas con

Dusk utiliza PHPUnit, por lo que podemos pasarle los mismos argumentos que usamos con PHPUnit.

Al ejecutar la prueba nos mostrará un mensaje similar a este:

Este error, aunque no queda muy claro, quiere decir que estuvo esperando 5 segundos a que se mostrase el elemento #user en la página, pero no ocurrió. Además puedes ver la captura de pantalla del error en la carpeta tests/Browser/screenshots/

Para solucionar esto vamos a crear la página y dicho elemento. Añade en routes/web.php  las rutas necesarias.

Y crea la vista resources/views/profile.blade.php  con el siguiente contenido:

El código anterior requiere de ES6 así que asegúrate de tener instalada la última versión de Chrome para poder ejecutarlo sin problemas.

Si ejecutas ahora la prueba, debe pasar correctamente:

Fíjate que la vista carga los datos del usuario de forma dinámica usando JavaScript y que Dusk está validando correctamente que los datos del usuario se han agregado a la página.

Ventajas de Dusk frente a otros sistemas de testing

Las versiones anteriores de Laravel ya incluyen un sistema que permiten hacer pruebas simulando ser un usuario, el Browser Kit Testing el cuál se ha explicado de forma extensa en el curso Crea una aplicación con Laravel 5.3 y TDD. Sin embargo, ese componente no ejecuta JavaScript, por lo cuál sólo resulta útil para partes de nuestra aplicación donde no se requiera de JavaScript.

También existen otros sistemas que sí permiten probar aplicaciones hechas con JavaScript (CodeceptJS, Nightmare.js, Protractor, entre otros), sin embargo estos sistemas no están integrados con Laravel, además de que los tests debemos programarlos con JavaScript.

Laravel Dusk permite escribir las pruebas directamente en PHP, lo que nos permite aprovechar funcionalidades del framework como los Model Factories. Además, integra algunos métodos que nos ayudan a probar las aplicaciones, como el método loginAs, con el que podemos simular que un usuario ha iniciado sesión de forma sencilla.

Más adelante en Styde habrán más tutoriales y lecciones sobre cómo sacarle el máximo provecho a Laravel Dusk.

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.