Laravel Dusk, guía completa para realizar pruebas de navegador con Laravel

Tabla de contenidos Laravel Dusk Una de las grandes herramientas de Laravel es Laravel Dusk, disponible desde Laravel 5.4, una potente herramienta para realizar pruebas en el navegador con Laravel la cual facilitará la vida a todos los desarrolladores proporcionando una API común, algo completamente necesario para un framework como Laravel.

Mi recomendación personal es que inviertas tanto tiempo como puedas en tus proyectos con Laravel Dusk, todo lo que puedas hacer con Laravel Dusk será beneficioso para tu proyecto.

Por defecto Laravel Dusk utiliza ChromeDriver, una herramienta de código abierto para realizar pruebas automatizadas de aplicaciones web, aunque podemos utilizar otros navegadores para realizar las pruebas unitarias, no será lo normal. Instalar Laravel Dusk Para instalar Laravel Dusk simplemente ejecuta el siguiente comando.

Para registrar el provider en nuestra aplicación, abre el arhivo AppServiceProvider y modifica el código por el siguiente.

Finalmente ejecuta el siguiente comando para instalar todo lo necesario para empezar con las pruebas.

El comando dusk:install habrá creado el directorio tests/Browser y todo lo necesario. Primer test con Laravel Dusk Para crear nuestra primera prueba de navegador con Laravel Dusk vamos a ejecutar los siguientes comandos, primero para instalar el sistema de autenticación de Laravel, a continuación para crear un test para las zonas de autenticación.

Antes de crear tu primer test, asegúrate que el APP_URL de tu archivo .env es el correcto ya que de otra forma Laravel Dusk fallará.

Ahora vamos a abrir el archivo tests/Browser/LoginTest.php y vamos a modificar el código por el siguiente para comprobar si realmente estamos en la página de login.

Para que Laravel Dusk sepa que un método es un test éste debe empezar por test.

Lo único que hacemos es decirle a Dusk que visite la página de Login, que compruebe que el título es Laravel y que revise si existe el texto Forgot Your Password?. Para ejecutar la prueba simplemente ejecuta el siguiente comando y verás que todo ha salido bien.

php artisan dusk

Si queremos navegar entre páginas con Laravel Dusk también podemos hacerlo de forma muy sencilla, vamos a modificar la prueba para navegar a la página password/reset y hacer algunas pruebas en ella.

Interactuar con bases de datos con Laravel Dusk

Ahora vamos a crear un archivo de entorno llamado .env.dusk.local y vamos a añadir el siguiente código para trabajar con SQLite y así poder realizar tests sin alterar nuestra base de datos.

Para configurar la conexión dusk vamos a modificar el archivo config/database.php añadiendo la siguiente clave al array de configuración.

Para finalizar la configuración y así poder trabajar con SQLite debemos crear un archivo dusk.sqlite en el directorio databases de nuestro proyecto.

Para ejecutar nuestra aplicación con el entorno que acabamos de crear deberás ejecutar el siguiente comando.

A partir de ahora, todas las pruebas que hagamos serán utilizando la base de datos SQLite en lugar de nuestra base de datos MySQL. Probando el sistema de Login con Laravel Dusk Vamos a abrir de nuevo el archivo LoginTest y vamos a modificar el código para intentar hacer login en la aplicación.

Gracias al trait DatabaseMigrations, una vez ejecutemos nuestros tests, se ejecutará el comando php artisan migrate y, una vez hayan finalizado, se ejecutará el comando php artisan migrate:rollback, así no nos tenemos que preocupar de tener datos para realizar las pruebas.

Cómo puedes ver, con el método type podemos introducir información en los campos con nombre email y password del formulario de login.

A continuación, utilizamos el método press para ejecutar dicho formulario, este método buscará un botón con el texto Login y, si todo ha ido bien, el test assertPathIs devolverá true porque estaremos en la página home que es donde Laravel te deja por defecto al iniciar sesión.

LoginAs en Laravel Dusk

Aunque el método anterior es completamente funcional, Laravel Dusk nos ofrece un atajo para iniciar sesión, el método loginAs, al cual simplemente le debemos pasar el id de un usuario.

Utilizando el flag --debug podemos ver más información de lo que está sucediendo en nuestros Tests.

Probando tablas html con Laravel Dusk

Otro test que podemos hacer es sobre tablas, para ello vamos a crear una ruta /users.

Fíjate que estamos utilizando el middleware auth para controlar el acceso. Ahora crea el archivo users/index.blade.php y añade el siguiente código.

Antes de continuar, hágamos una pequeña modificación en el archivo layouts/app.blade.php.

Para poder probar nuestro código, vamos a crear un nuevo test con el siguiente comando.

Abre el archivo de test que se acaba de crear en tests/Browser/UsersTableTest.php y añade el siguiente código que pasamos a comentar.

Lo primero en lo que debemos fijarnos es en cómo utilizamos la anotación @group. Piensa que prácticamente todo lo que puedas hacer con PHPUnit lo puedes hacer con Laravel Dusk.

Gracias a la anotación @group podemos ejecutar únicamente los tests del archivo UsersTableTest con el siguiente comando.

Con el método with en Laravel Dusk podemos acceder a un elemento del DOM, y acceder a él utilizando una closure cómo podemos ver en el ejemplo. Ajax en Laravel Dusk Prácticamente todas las aplicaciones hoy en día trabajan con ajax, así que Laravel Dusk nos ofrece varios métodos para solucionar este problema.

Nosotros vamos a trabajar con Yajra Datatables y vamos a desarrollar las siguientes pruebas de funcionalidad.

• Comprobar si la tabla ha cargado correctamente.

• Comprobar si un usuario existe en la página actual.

• Eliminar usuarios y comprobar que ha sido eliminado correctamente.

• Comprobar la paginación.

• Realizar búsquedas con ajax.

Primero instala Laravel DataTables.

Modifica el archivo app.blade.php para que DataTables funcione correctamente.

Añade algunas rutas dentro del grupo protegido por el middleware auth con el prefijo users para tener nuestra tabla disponible y así poder testearla.

Ahora crea el archivo users/datatables.blade.php para pintar la tabla con Datatables.

Probando tablas con Datatables en Laravel Dusk Vamos a crear un nuevo test llamado DatatablesTest para realizar una primera prueba y asegurarnos que la tabla ha cargado correctamente.

Y vamos a actualizar el código para poder interactuar con Ajax en Dusk por primera vez.

Fíjate que ahora estamos utilizando @group datatables para toda la clase, así que todos los métodos que empiecen por test se ejecutarán cuando ejecutemos el comando php artisan dusk --group=datatables.

Lo primero que hacemos es crear 10 usuarios con factory, después obtenemos el usuario con id 2 y lo utilizamos para iniciar sesión, visitamos la ruta /users/datatables y utilizamos el método waitForText hasta que el texto Siguiente sea visible, este texto es el que por defecto muestra la paginación de Datatables en Español, si lo vemos, accedemos a la tabla y nos aseguramos que podemos ver el email del usuario con el que nos hemos identificado.

Eliminar datos con Ajax y Laravel Dusk

Otra funcionalidad necesaria en la mayoría de los casos es eliminar datos con Ajax, para probar esta funcionalidad vamos a añadir el siguiente método a la clase DatatablesTest.

Ahora, en lugar de utilizar el método waitForText, utilizamos el método pause de Laravel Dusk, gracias a este método podemos decirle la cantidad de milisegundos que queremos esperar hasta que el las pruebas continúen.

Con el método assertDontSee nos aseguramos que el usuario eliminado ya no existe en la tabla, así que si todo ha ido bien tendremos un ok en la terminal.

php artisan dusk --group=datatables --debug

Paginación con Laravel Dusk y Ajax

Otra funcionalidad muy interesante son las paginaciones con Ajax, nosotros vamos a hacer el siguiente test, iremos a la primera página, nos aseguraremos que estamos en ella comprobando que existe un usuario que debe ser mostrado, a continuación pulsaremos en el botón siguiente, haremos un wait y con assertSee comprobaremos que podemos ver el usuario que debe aparecer en la segunda página.

php artisan dusk --group=datatables --debug

Búsquedas con Datatables y Laravel Dusk

Finalmente vamos a realizar una búsqueda utilizando el buscador de datatables y vamos a comprobar que el usuario se ha encontrado.

Llegados a este punto debes tener una idea muy clara del funcionamiento de Laravel Dusk, pero aún queda lo mejor y el trabajo con LaravelDuskPage, una clase para realizar tests ya semi-definidos donde podemos hacer cosas que no son posibles en los tests que hemos visto hasta ahora. Laravel Dusk Pages, tests avanzados con Laravel Todo test que herede de LaravelDuskPage podrá agrupar toda la lógica de una página asociada a una ruta en un mismo archivo con los beneficios que esto puede suponer.

Para llevar a cabo el trabajo con los tests a páginas necesitamos crear primero un modelo y una migración.

La migración va a ser muy sencilla, únicamente tendremos un campo name.

Ahora vamos a crear unas nuevas rutas para poder procesar un sencillo formulario para dar de alta registros con Laravel Dusk.

También debemos crear un sencillo form request con Laravel para las validaciones.

Ahora crea el archivo frameworks/form.blade.php y añade el siguiente código para pintar nuestro formulario.

Crear nuestra primera página con Laravel Dusk Para crear un test de tipo página simplemente ejecuta el siguiente comando.

Ahora abre el archivo que se acaba de generar en tests/Browser/Pages/Framework.php y vamos a añadir el siguiente código que pasamos a explicar.

El método url le dice a nuestra página donde debe ir una vez la llamemos, el método elements nos permite crear atajos para acceder a los elementos de la página a visitar, y el método createFramework nos va a ayudar a ejecutar el formulario anterior para crear nuevos registros en base de datos utilizando el atajo @framework-name, que cómo puedes ver es el segundo parámetro del método.

Para utilizar esta página, vamos a crear el test y añadimos primero el siguiente método que nos dirá si haciendo uso de nuestra página hemos podido visitar la ruta asignada.

Cómo puedes ver, ahora al método visit le pasamos una instancia de Framework, eso es suficiente para que Laravel Dusk sepa qué tiene que hacer.

php artisan dusk --group=framework-page --debug

Añade el siguiente método para asegurarnos que el campo name del formulario es requerido y la validación funciona perfectamente.

Aquí lo único que hacemos es visitar la ruta y pulsar el botón submit, al ser name un campo requerido podemos ver el típico mensaje error de Laravel. Esto es posible por haber añadido novalidate al tag form de nuestro formulario.

php artisan dusk --group=framework-page --debug

Para finalizar este tutorial de Laravel Dusk vamos a crear un nuevo framework y de paso vamos a ver que una vez el registro existe en base de datos podemos asegurarnos que no se puede volver a insertar ya que estamos utilizando unique en nuestro form request.

Aquí vemos algo muy interesante, y es cómo podemos ejecutar el método createFramework de nuestra página, una vez visitamos la ruta con la instancia de la clase Framework ese método pasa a estar disponible en la cadena de métodos, una vez se ejecuta el método createFramework se ejecutará el formulario y si todo ha ido bien tendrás un ok en tu consola.

Eso es todo lo que necesitas saber de saque en lo que respecta a Laravel Dusk, si te ha parecido interesante comparte el post en las redes sociales para que llegue a más usuarios.

No te pierdas todo lo que tenemos para Laravel