Testing your Laravel App with Dusk

T

Dusk was the new feature provided with Laravel 5.4 for testing. Dusk was created to solve some common problems while testing apps using BrowserKit. For example: Javascript interation.

In this article, we will learn how to setup and make basic browser tests with Dusk in a Laravel application.

Add the Dusk package

First, in your Laravel root folder, import the Dusk package using composer

Register the Service

To register the Dusk service and make it available to us. Let’s edit app\Providers\AppServiceProvider.php and import the Dusk Class, and register it.

Install

Install using the following in the terminal.

Change your APP_URL

In order to Dusk access your application and test it, you have to change your local development URL editing the .env file. By default, the APP_URL is http://localhost. If you are running your server in another port, for example 8000, change it to http://localhost:8000. If you keep http://localhost, Dusk will not be able to test your app.

For all tests, just run the Dusk from command line.

DOM Crawler Test

The DOM Crawler Test check if an element based on a string is rendered by the DOM. For example, let’s check if the following H1 tag was rendered in a specific route.

Change the welcome.blade.php view to the following:

And change your tests/Browser/ExampleTest.php testBasicExample method to:

Dusk will crawl the page and search for “Laravel Testing” string. The result (fail or success) will be returned in command line.

If you try visit the same URL searching another string, you will get a fail message.

Creating a new test

This will create a file name ElementTest.php in /tests/Browser directory.

Interacting with Elements

Change you welcome.blade.php view and add an ID attribute to the H1 tag, like:

In the ElementTest.php, let’s get this element’s text.

This will echo “Laravel Testing” on terminal.

We also can get an input field value, using the value method.

Links and Javascript

Suppose we have a page with a text field and a link. If you click this link, javascript will change the #myHeader tag to the text you type in the input field. We could have a code like:

How can we test if this is working with Dusk? We can crawl the page, and trigger events, click in the anchor and change the input value via PHP.

You will get a fail result if you input a text, and search for another one.

Conclusion

Test database and page behavior is very simple with Dusk. You can do a lot of interactions with the page, test routes, functionalities and also attach files, mouse over elements, etc. For more, see the official docs at https://laravel.com/docs/5.4/dusk.

About the author

Cristiano Ventura

Programmer, in love with my woman.
I'm here to bring all that I learn daily and share experiences as a developer.

2 comments

*

    • Do you mean form validation?
      Dusk validates what is rendered by DOM.. in this case you can show an error message via JavaScript (“This field is required”, for example) or even an error class in an input field.
      A form submission can also be validated, if the response after send it was not what expected. For example: the route was not changed.

      ;D

By Cristiano Ventura