Sneak Peak : Laravel Dusk

Introduction

Dusk is a Laravel package that performs end-to-end (E2E) tests on Laravel applications. Providing client-side testing by running tests in a browser, Dusk allows developers to see client-side features tested in real-time, mimicking how a user would use them.

In this article, we will install Laravel Dusk in an application and run some browser tests with it to see how it works and the benefits it provides.

Why do we test an application?

Before deploying an application, we want to ensure the end product meets expected requirements. however, new features that are added to improve the application must also be tested.

Installation

To test an application, initially, we want to create a new Laravel project using this command.

composer create-project laravel/laravel example-test

or

laravel new example-test

and move into the created project folder.

cd example-test

To test an application, you should install Google Chrome and add the laravel/dusk composer dependency to your project:

composer require --dev laravel/dusk

After installing the dusk package you have to run the following command to complete dusk installation. This command will create the tests/Browser directory and will add the test cases into that directory.

php artisan dusk:install

If you don’t want to mess with your main database, you can create a duplication .env for testing; simply create a file named .env.dusk.local in your root directory.

Create and run the test cases using Laravel dusk

php artisan dusk:make BasicTest

Run the above command to create a new test case.

class BasicTest extends DuskTestCase
{
    /**
     * A basic browser test example.
     *
     * @return void
     */
    public function testBasicExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->assertSee('Laravel');
        });
    }
}

To execute BasicTest, run the following command:

php artisan dusk

In this example, the Browser class imports and creates an instance of it. visit opens the homepage(/) of our application, assertSee checks whether the word Laravel appears on our homepage and browse method calls the function that carries out these tasks. A complete list of assertions is here.

Note that Dusk uses headless mode to run automation tests in Google Chrome by default, meaning it works through a CLI rather than a GUI. This means that Dusk runs browser tests, but you don’t see them being executed.

An advantage of using headless mode is that it runs tests faster than using GUI browsers. However, if you want to see your tests being executed in your Chrome browser, you can disable headless mode. Navigate to tests/DuskTestCase.php and comment out the following lines:

'--disable-gpu',
'--headless',

Pages

An application may have different complicated actions with different links. This can make your tests harder to read and understand. Dusk Pages allow you to define expressive actions that may then be performed on a given page via a single method. Pages also allow you to define shortcuts to common selectors for your application or for a single page.

Create a page

php artisan dusk:page Register

Configure the pages

Pages have three methods. Those are url, elements and assert

url: Represents the path of the URL that represents the page.

elements: To define any CSS selectors on our page.

assert: This method may make any assertions necessary to verify that the browser is actually on the given page. 

For example,

<?php

namespace Tests\Browser\Pages;

use Laravel\Dusk\Browser;

class Checkout extends Page
{
    /**
     * Get the URL for the page.
     *
     * @return string
     */
    public function url()
    {
        return '/';
    }

    /**
     * Assert that the browser is on the page.
     *
     * @param  Browser  $browser
     * @return void
     */
    public function assert(Browser $browser)
    {
        $browser->assertPathIs($this->url());
    }

    /**
     * Get the element shortcuts for the page.
     *
     * @return array
     */
    public function elements()
    {
        return [
            '@element' => '#selector',
        ];
    }
}

Conclusion

In this article, we introduced Laravel dusk a Laravel package that provides an alternative for end-to-end(E2E) JavaScript testing. We have covered the configuration options necessary to get started, and the examples above should help you fill in the gaps and give an overview of some of the other configuration options available to you.