Laravel Dusk – Intuitive and Easy Browser Testing for All!

End to end testing for JavaScript applications, particularly single-page-apps, has always been a challenge. To that end, Laravel released its 5.4 version recently with a new testing library: Dusk.

With the release of Dusk, Laravel hopes to give its users a common API for browser testing. It ships with the default ChromeDriver, and if we need support for other browsers, we can use Selenium. It will still have this common testing API to cater to our needs.

The tutorial will assume you're starting a new Laravel 5.4 app.

Installation

composer require laravel/dusk

This will install the most recent stable version of the package via Composer.

Next, we need to register DuskServiceProvider within our application. We can do it in a couple of ways:

Approach 1

We can include it in the providers array of our config/app.php file.

...

App\Providers\RouteServiceProvider::class,
Laravel\Dusk\DuskServiceProvider::class,
...

The problem with this approach is that DuskServiceProvider will be registered in our application for all the environments. We don't need Dusk to be available and registered in our production environment. We can avoid this with the second approach.

Approach 2

Register DuskServiceProvider in the AppServiceProvider class for specific environments:

namespace App\Providers;

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

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

Next, to complete the installation process:

php artisan dusk:install

Dusk will provide a basic scaffolding of classes and directories. If we open the tests directory, we can see a new Browser directory with the necessary scaffolding for Dusk tests.

Our First Test

First, we will scaffold an authentication workflow using Laravel's pre-built authentication mechanism.

php artisan make:auth

Let us now create our first Dusk test:

php artisan dusk:make LoginTest

The above command will create a LoginTest class in our Browser directory.

class LoginTest extends DuskTestCase
{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function test_I_can_login_successfully()
    {
        $this->browse(function ($browser) {
            $browser->visit('/login')
                    ->type('email', 'viraj@virajkhatavkar.com')
                    ->type('password', 'secret')
                    ->press('Login')
                    ->assertSee('You are logged in!');
        });
    }
}

In the above test case, we check whether a user can successfully log into the system and see a home page with a welcome message.

Note: To make this test succeed, we need to have an actual user in the database. For this demonstration, we have already configured a user in the database with the above credentials.

Continue reading %Laravel Dusk – Intuitive and Easy Browser Testing for All!%

by Viraj Khatavkar via SitePoint