Complete CircleCI setup for Laravel Dusk

I have recently started working with Laravel 5.4 and totally love that it allows a ‘no pain’ solution for E2E(integration) tests which Laravel Dusk actually is. The problem is that it is easy to setup on local machine but the documentation on how to make all the tests to run correctly on CircleCI does lack a lot of info.

Here are the settings that are mention in Laravel docs:

test:
pre:
- "./vendor/laravel/dusk/bin/chromedriver-linux":
background: true
- cp .env.testing .env
- "php artisan serve":
background: true

override:
- php artisan dusk

This does lack a lot of additional settings that are required. I am going to mention all of the and explain one by one, why they all are needed.

  1. Inside .env.testing we need APP_URL set to http://127.0.0.1:8000 which is necessary, because we are working with E2E tests and browser can’t call the index.php file directly (like it could with PHPBrowser).
  2. The default Chrome version is not compatible with Facebook Webdriver (it is below 55 in the default CircleCI VM).

What we need is to add commands which will update the Chrome version first:

dependencies:
pre:
- wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
- sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
- sudo apt-get update
- sudo apt-get install google-chrome-stable

3. You should remember that you are required to register DuskServiceProvider on your local machine, if you are running tests there. Same should be done for CircleCI testing environment. Check your APP_ENV in your .env file and see if it is different, then register your DuskServiceProvider. Here is my AppServiceProvider.php:

/**
* Register any application services.
*
*
@return void
*/
public function register()
{
if ($this->app->environment('local', 'testing', 'circleci')) {
$this->app->register(DuskServiceProvider::class);
}
}

4. If you are running any webpack tasks or gulp tasks, don’t forget to do that on CircleCI as well (see the npm run dev) :

dependencies:
pre:
- wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
- sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
- sudo apt-get update
- sudo apt-get install google-chrome-stable
post:
- chmod -R 777 ~/MyApp/storage
- php artisan env
- printenv
- npm run dev

5. If you have added any new node dependencies for the project, you might need to clear the node_modules cache which is created automatically by CircleCI. There is an option to do that.

Thats pretty much it. After doing all this, I was able to run my Dusk tests correctly. I hope this will help you as well.