5 useful tricks for Laravel Dusk
Tags: laravel, tdd, webdriver, php
Published: 2019-05-01 19:12:13

---
title: 5 useful tricks for Laravel Dusk
published: true
description: 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.
tags: Laravel, TDD, Webdriver, PHP
cover_image: https://thepracticaldev.s3.amazonaws.com/i/8rhk4t5jhv63bo8fe1lz.jpg
---

# 5 useful tricks for Laravel Dusk

[Laravel Dusk](https://laravel.com/docs/5.8/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](https://laravel.com/docs/5.8/dusk#browser-macros)

{% gist https://gist.github.com/barmmie/5b57095aa793cf7f390a48dffdc6f8ec %}

### **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 `getCurrentPosition `method which would eventually be called by the page.

{% gist https://gist.github.com/barmmie/bf2d8c1065621b3d5fedeeabe373ae44 %}

### **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.
{% gist https://gist.github.com/barmmie/f4fde121e7abeaeece02d26104c19058 %}
*The only slight [inconsequential] annoyance to this approach is that it might
require you to break the fluent method calls on the *`$browser `*.*

### **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`

{% gist https://gist.github.com/barmmie/f19428dc25327ca20e19ac9b30c975e2 %}

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.

{% gist https://gist.github.com/barmmie/1e5abca3543aaef4d806da9db1b00177 %}

*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.*