5 useful tricks for Laravel Dusk

Laravel Dusk is an expressive, easy-to-use, powerful browser automation and testing tool for Laravel. With Dusk you can programmatically test javascript driven applications. Occasionally while writing browser tests with Laravel dusk, I have often run into some limitations. In this article, I will share instances of these situations and how I was able to get past said limitations.

1. Filling hidden fields

When testing certain JS components (e.g Autocomplete, Datepickers) It can be strenuous writing actions to simulate DOM clicks/interactions with said components. Since most of these components eventually save the eventual value to a hidden field. It can be more expedient to fill in the hidden field directly with the value. This prevents flaky tests and ensures that we are not testing things we do not own/control (third party components).

While Laravel Dusk does not provide us with a method like $browser->fillHidden($field, $value), we can create it ourselves using Dusk Browser Macros

2. Mocking HTML Geolocation

I once had to test a page that needed to provide a Geolocation to the HTML site so it could display some results. There was no direct mock method available so I had to override the getCurrentPositionmethod which would eventually be called by the page.

3. Using XPath selectors

Occasionally I’d run into situations where I'm unable to use CSS selectors to locate an element. These often happen with dynamic tables or in my case with a third party js component which I could not modify. Laravel Dusk, however, does not support XPath selectors directly and often requires accessing the underlying WebDriver instance.

4. Full Page screenshots

Laravel dusks provide us with screenshots of our failed tests and these can be very helpful to know why our tests are failing. However, sometimes the error or the element in question might be below the fold.

To create full page screenshots in Laravel Dusk we have to create a captureFailuresFor() method in our tests\DuskTestCase.php which would override the one originally defined in Laravel\Dusk\Concerns\ProvidesBrowser

Now, whenever we call $browser->screenshot('$shotname') or when there’s an error. we’d get a full page screenshot

5. Accessing browser error logs

Ok. This isn’t a limitation, just something interesting I found. We can access browser console logs by calling $browser->driver->manage()->getLog(‘browser’)

This will return an array of logs in the browser’s console. It can be useful for testing for example that there are no javascript errors on the page.

Be warned though, it doesn’t contain the output of *console.log calls*

Conclusion

Thanks for reading this, hopefully, you found one or more tip(s) useful.

p.s If you notice any errors or inaccuracies in the post, do point it out and I’d be happy to correct it immediately.