Eating End to End Testing in Laravel Like Noodles

One of the beautiful things Laravel 5.4 Ushered in, was making our application a lot easier to test by introducing Dusk. This has brought a more reliable way to test our application. Since we can now see our test running in the browser, and watch how our application adapts to the user inputs, we can easily conclude that the days of avoidable bugs are over.

Installing Dusk is very easy and the procedures can be found on the Laravel Website. One thing I found confusing in the installation guide is the relationship between the Dusk driver configuration, and how to start up the installed browser driver.

In this article, I’m going to show you simple tricks to get your end to end test working and some useful hacks that would have gotten you stuck for hours.

The below steps are needed to make your experience smooth while setting up E2E testing with Laravel Dusk

Step One

If you haven’t set up your Dusk test, go to the Laravel documentation website to install the Dusk package and don’t forget to run php artisan dusk:install to create your browser test directory where all your test would run from when you type php artisan dusk into your terminal.

Step Two

The driver is meant to start automatically when you run php artisan dusk But sometimes, you would get chromedriver not installed or some weird errors. To avoid this frustration you need to manually install the browser driver you would like to use. In this article, I will be using the chrome driver. You need to download the binary file here.

Then, the next thing you need to do is copy the binary to the /usr/local/bin directory. After the installation, you need to make the chromedriver file executable by running sudo chmod +x /usr/local/bin/chromedriver

To test if your chromedriver is working, you need to start it up from your terminal on port 9515 like /usr/local/bin/chromedriver --port=9515 then you should some messages like;

Starting ChromeDriver 77.0.3865.40 (f484704e052e0b556f8030b65b953dce96503217-refs/branch-heads/3865@{#442}) on port 9515
Only local connections are allowed.
Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.

That means your chromedriver is ready to accept any request from your test cases. Congratulations

Step Three

The next step is to configure your driver, go to DuskTestCase.php and paste the below blocks of code in the driver method.

$host = ‘http://localhost:9515';
$options = (new ChromeOptions)->addArguments([
‘ — headless’,
‘ — disable-gpu’,
‘ — no-sandbox’,
‘ — ignore-certificate-errors’,
]);

return RemoteWebDriver::create(
$host, DesiredCapabilities::chrome()->setCapability(ChromeOptions::CAPABILITY, $options)
->setCapability(WebDriverCapabilityType::ACCEPT_SSL_CERTS, true)
->setCapability(‘acceptInsecureCerts’, true), 5000, 10000
);

If you’re running your terminal as a root user, you must enable— no-sandbox otherwise you might encounter some funny errors. And if you preferred to run the chromedriver as a headless browser, then you should remove — headless from the chrome options argument.

With the above configurations followed correctly, if you type php artisan dusk on your terminal, you should see the chrome driver opening a new browser to run your test cases.

Lastly, I’m going to drop some hacks here to ease your stress. Because running Laravel Dusk can be funny sometimes and this might give you a headache but with the below hacks, I think you should be fine.

Hacks

• Running your test is very slow

For a faster test execution time. Use the SQLite database.

Create a .sqlite file and go to config/database.php and create a database connection like below;

‘sqlite’ => [
‘driver’ => ‘sqlite’,
‘database’ => storage_path() . ‘/database.sqlite’,
‘prefix’ => ‘’,
],

And add the database connection to your .env.dusk.local file.

• Some selector cannot be reached even though they are on the webpage

Element <input type=”radio” name=”disability”> is not clickable at point (286, 594). Other elements would receive the click.

This can be solved by treating the browser test like some jquery DOM traversals.

Therefore, we are going to create a macro that would help us scroll to that element before we type or click on it. Go to the DuskTestCase.php file and add the below code to the prepare method like;

/**
* Prepare for Dusk test execution.
*
* @beforeClass
* @return void
*/
public static function prepare()
{
static::startChromeDriver();

Browser::macro(‘scrollTo’, function ($selector) {
$this->driver->executeScript(“$(\”html, body\”).animate({scrollTop: $(\”$selector\”).offset().top}, 0);”);

return $this;
});
}

So how do we use the above macro? Go to your test case and add the macro before the unreachable element like;

->scrollTo(‘.list-group’) // scroll to the element or a parent element
->radio(‘disability’, ‘Yes’) // select the radio option.

I didn’t write a single test case here, because I’m assuming that you’re already familiar with Dusk but having some problems using it in running your test.

Let me know in the comment section if this article is useful to you. And if you’re still having some issues using Dusk after going through this article, I’m happy to help provide some guidance.

I do hope that this article helps put a smile on someone’s face and thanks for taking the time to read it.