Laravel, with the 5.4 version, released a new tool for frontend application testing, Laravel Dusk.

Dusk provides an expressive, easy-to-use browser automation and testing API. By default, Dusk, uses the Chromedriver installed on the host system to run the tests. If you use Docker locally or if you want to implement browser testing in your Gitlab CI, you need to prepare a Docker container with Chromedrive.

Container Creation

For the container creation we can use the RobCherry docker image docker-chromedriver. To use it, just add, after your Laravel container, in your docker-compose.yml:

version: '3'
services:
.
.
.
.
 chrome:
    image: robcherry/docker-chromedriver
    networks:
       - app-network
    environment:
       CHROMEDRIVER_WHITELISTED_IPS: ""
       CHROMEDRIVER_PORT: "9515"
    ports:
       - 9515:9515
    cap_add:
       - "SYS_ADMIN"

The CHROMEDRIVER_WHITELISTED_IPS enviroment needs to allow all containers to use che Chromedriver (the default whitelisted ip is 127.0.0.1, with the default configuration che Chromedriver will response ever).
The CHROMEDRIVER_PORT environment variable changes the Chromedriver’s port in the container which is set to 4444. I set it to 9515 since it is the default port for a local installation of the software. The container then, must expose this new port (see ports in the yaml).
The SYS_ADMIN capabilityneeds to be added to work with the the latest versions of chrome, to read about this you need to check inside the repo’s issues.

After creating the container we can start to add Dusk in our Laravel project.

Dusk Installation

To install Dusk in our Laravel project we need to require the package with composer (for Laravel 5.4 we need to require the 1.x version of Dusk)

composer require --dev laravel/dusk:^1.0

Next we need to register the DuskProvider inside our AppServiceProvider

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

And finally, to complete the installation process:

php artisan dusk:install

This command will create a Browser folder inside the tests directory and will contain an example test.

TIPS: Make sure to add in your .env the APP_URL environment. The APP_URL environment will be the default start path to access our application

Inside the tests directory we will find the DuskTestCase class, now we need to change the path of the RemoteWebDriver in http://{{docker-services-name}}:{{services-port}}, in our case http://chrome:9515

Now we can create our first Dusk test:

php artisan dusk:make LoginTest

This command will create a LoginTest class inside the browser folder

namespace Tests\Browser;

use App\User;
use Tests\DuskTestCase;
use Laravel\Dusk\Chrome;
use Illuminate\Foundation\Testing\DatabaseMigrations;class LoginTest extends DuskTestCase
{
    /**
     * A Dusk test example.
     *
     * @return void
     */    use DatabaseMigrations;
    public function loginSuccessffully()
    {
        $user = factory(User::class)->create([
            'email' => '[email protected]',
        ]);        $this->browse(function ($browser) use ($user) {
            $browser->visit('/login')
                    ->type('email', $user->email)
                    ->type('password', 'secretpassword')
                    ->press('Login')
                    ->assertSee('You are logged in!');
        });
    }
}

Now we can execute our Dusk tests:

php artisan dusk

if the test will pass sucessfully we will se an output like this:

PHPUnit 5.7.6 by Sebastian Bergmann and contributors.

.                                                       1 / 1(100%)

Time: 1.71 seconds, Memory: 10.00MB

OK (1 tests, 1assertions) 

Otherwise we will receive either an error or a failure. In case of an error, it means there’s a php error such as missing classes or syntax errors. Failures mean a test fail, but do not be discouraged, inside the Browser/screenshots folder we will find the .png file of the fail.

TIPS: Never use a real database to testing but use the Model Factories (Laravel Feature) to create “fake” models.

That’s all! We can start using dusk inside our Docker enviroment.

Thanks and stay tuned :)