Unlock the Power of Laravel Dusk: Simplifying End-to-End Testing

The Need for JavaScript-Specific Testing

While PHPUnit is an excellent package for unit testing in PHP, it falls short when it comes to testing JavaScript functionalities. Selenium is a popular option for JavaScript testing, but it can be challenging to set up and learn.

What is Laravel Dusk?

Dusk is a Laravel package that performs end-to-end tests on Laravel applications by running tests in a browser. It mimics how a user would interact with your application, allowing you to see client-side features tested in real-time. Built on ChromeDriver and the PHP WebDriver, Dusk provides browser automation for applications while eliminating the complex steps required by ChromeDriver and PHP WebDriver individually.

Benefits of Using Dusk

With Dusk, you can automate repetitive tasks within your application, ensuring that newly added features don’t break pre-existing ones. Dusk’s support for JavaScript and AJAX provides the functionality that the Symfony BrowserKit component can’t support, and it’s easier to use than Selenium.

Installing and Setting Up Dusk

To get started with Dusk, create a new Laravel project and add Dusk to it using Composer:

composer require --dev laravel/dusk

Register the service provider in app/Providers/AppServiceProvider.php using an if statement that only makes it available for development:

if ($this->app->isLocal()) {
    $this->app->register(\Laravel\Dusk\DuskServiceProvider::class);
}

Complete the Dusk installation by running the necessary commands, which will create a Browsers folder in your tests directory:

php artisan vendor:publish --provider="Laravel\Dusk\DuskServiceProvider"
php artisan dusk:install

Creating and Running Tests with Dusk

Let’s explore the example test that comes with the Dusk installation, ExampleTest.php. Run php artisan serve in another command window, and then execute ExampleTest.php using the command provided:

php artisan dusk

The Browser class imports and creates an instance of it, containing many useful methods to carry out various actions in the web browser:

use Tests\DuskTestCase;
use Laravel\Dusk\Browser;

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

Testing Laravel’s Authentication System with Dusk

Using Laravel Jetstream’s authentication scaffolding, add Jetstream to your application and create a new Dusk test to test the register and login features. Create a test that registers a new user, navigates to the dashboard, logs out, and logs back in:

use Tests\DuskTestCase;
use Laravel\Dusk\Browser;

class AuthenticationTest extends DuskTestCase
{
    /**
     * Test registration and login features.
     *
     * @return void
     */
    public function testRegisterAndLogin()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/register')
                    ->type('name', 'John Doe')
                    ->type('email', '[email protected]')
                    ->type('password', 'password')
                    ->type('password_confirmation', 'password')
                    ->press('Register')
                    ->assertPathIs('/home')
                    ->clickLink('Logout')
                    ->assertPathIs('/login')
                    ->type('email', '[email protected]')
                    ->type('password', 'password')
                    ->press('Login')
                    ->assertPathIs('/home');
        });
    }
}

You can then execute the test and see the results.

Debugging with Dusk

If a test fails, a screenshot of the failed test is saved to the screenshots folder. You can also disable headless mode to see your tests being executed in your Chrome browser:

$browser->driver->setHeadless(false);