Introduction

In the previous article we explained how to create unit and feature tests and how to automate them with Buddy. In this guide, we’ll show you how to run E2E tests using Laravel Dusk.

Laravel Dusk is a type of browser tests introduced in Laravel in v5.4. The tests use the ChromeDriver by default, but they can be easily configured to use Selenium in a different browser as well.

Test project

The process of adding tests will be explained on the basis of a simple calculator. You can read how to create such calculator in this guide.

  1. First, you should fork and clone the project github.com/buddy-works/laravel-first-steps

  2. Once done, you can check the application straight away by running:

     $ laravel-first-steps
 $ composer install
 $ php artisan serve

NOTE: If you encounter any troubles, check if you have installed all required things.

<div class="video"><iframe src="//player.vimeo.com/video/207598127?badge=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

Install Dusk

Installing Dusk requires a couple of steps:

  1. Install Laravel Dusk and add it to the project’s dependency:

     $ composer require laravel/dusk

  2. Register DuskServiceProvider. For that, open app\Providers\AppServiceProvider.php and add the namespace:

     use Laravel\Dusk\DuskServiceProvider;

  3. Register the provider in the register method by adding this part of code:

     if ($this->app->environment('local', 'testing')) {
	     $this->app->register(DuskServiceProvider::class);
     }

    The whole AppServiceProvider file will look like this:

     <?php

 namespace App\Providers;

 use Illuminate\Support\ServiceProvider;
 use Laravel\Dusk\DuskServiceProvider;

 class AppServiceProvider extends ServiceProvider
 {
     /**
      * Bootstrap any application services.
      *
      * @return void
      */
     public function boot()
     {
         //
     }

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

  4. Finally, install Dusk by running

     $ php artisan dusk:install

Writing first Dusk test

At the beginning, we need to remove the exemplary test or it will return errors:

$ rm tests/Browser/ExampleTest.php

Once ready, let’s add our first test by running the artisan command and adding the name of the class in which we’re going to write the tests:

$ php artisan dusk:make MyFirstDuskTest

The class will be created in the tests/Browse directory. Let’s write a simple test that will open the website with the calculator and run a simple 1 + 3 addition in the tests/Browser/MyFirstDuskTest.php and check the result:

<?php

namespace Tests\Browser;

use Tests\DuskTestCase;
use Illuminate\Foundation\Testing\DatabaseMigrations;

class MyFirstDuskTest extends DuskTestCase
{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function testExample()
    {
        $this->browse(function ($browser) {
            $browser->visit('/')
                    ->type('a', 3)
                    ->type('b', 1)
                    ->press('Execute')
                    ->assertPathIs('/calc')
                    ->assertSee('4');
        });
    }
}

Local testing

First, we need to run the application. We’ll launch it on a predefined port so that we know which address should we use in the test configuration:

$ php artisan serve --port=8080

Now we need to set the website’s address in the .env config file. This address will be used in the tests:

APP_URL=http://localhost:8080

The tests are written and ready to be launched:

$ php artisan dusk

Automating Dusk tests with BuddyWorks

Setting up the pipeline

With everything set up locally, we can use Buddy to automate the whole process. Let’s create a pipeline that will run the tests once a day at a given time (you can change the interval to whatever you need). If you haven’t forked our Laravel tutorial repository before, you can do it now: github.com/buddy-works/laravel-first-steps. We’re going to use it in the example below.

TIP: The tests are already available in the dusktests branch in case you haven’t written them before.

  1. Create a new project, choose GitHub as the provider, and select the forked Laravel repository.

  2. Add a new pipeline, set the trigger mode to Recurrent and change the target branch to dusktests:

Configuring the test action

With the pipeline in place, we can now configure the tests:

  1. Add the PHPUnit action and paste the following commands:

     composer install
 HOST_NAME=$(hostname -I | tr -d ' ')
 sed -i "s/localhost/$HOST_NAME/g" .env
 php artisan serve --port 8080 --host $HOST_NAME &
 script -c "php artisan dusk" -eq

    Script details

    • HOST_NAME=$(hostname -I | tr -d ' ') – fetches and trims the IP of the container
    • sed -i "s/localhost/$HOST_NAME/g" .env – changes the IP in .env to the fetched address
    • php artisan serve --port 8080 --host $HOST_NAME & – runs application with host and port
    • script -c "php artisan dusk" -eq – runs the Dusk tasks; we cannot do that with a script command because command fields in Buddy are not interactive

  2. Switch to the Services tab and attach Selenium Chrome. The last thing to do is updating the config file with the details of the testing server. In Buddy, Selenium tests are available at this address:

     http://selenium-ch:4444/wd/hub

    Go to tests\DuskTestCase.php and set the driver address there:

     protected function driver()
 {
     return RemoteWebDriver::create(
         'http://selenium-ch:4444/wd/hub', DesiredCapabilities::chrome()
     );
 }

Here’s a video summing up the whole configuration process:

Running the tests

The tests have been configured to run on the interval, but you can run them manually at any time. Let’s see if everything works:

Congratulations! You have successfully written and configured browser tests for your PHP/Laravel applications!

Auto-deployment

Just like with regular Laravel unit tests, you can expand your delivery process by adding a deployment action to your type of server for immediate feedback:

  1. Go to the Laravel pipeline and click Manage actions in this pipeline
  2. Add file transfer action below the PHP action
  3. Provide the details to your server
  4. Click Add this action when ready

From now on, if the tests succeed, Buddy will automatically deploy your application to the server: