Laravel Dusk Tutorial: Browser Testing Made Easy

Introduction

Testing your application in the browser is one of the best ways to ensure that your entire application works as intended, not just individual pieces. Historically, setting up browser testing has been complicated, but Laravel Dusk simplifies the process. Dusk is a first-party package provided by the Laravel team that offers a user-friendly way to interact with a browser, usually headless but not necessarily. It does not require a Selenium server or any complicated setup and uses Facebook's Remote WebDriver, making it lightweight compared to traditional browser testing setups.

Setting Up Laravel Dusk

Step 1: Install Laravel Dusk

First, ensure you have a standard Laravel application set up. Then, require Laravel Dusk:

composer require --dev laravel/dusk

Passing the --dev flag ensures that Dusk is only included in the development environment, which is important for security reasons.

Step 2: Install Dusk

Run the following Artisan command to install Dusk:

php artisan dusk:install

This command sets up the necessary configuration for Dusk and downloads the ChromeDriver binaries for your system.

Step 3: Check the ChromeDriver

Dusk automatically downloads the appropriate ChromeDriver for your system. You can check the vendor/laravel/dusk/bin directory to see the downloaded ChromeDriver.

Step 4: Configure .env File

By default, Dusk runs in headless mode. To disable headless mode for debugging purposes, you can add the following line to your .env file:

DUSK_HEADLESS_DISABLED=true

Writing Your First Dusk Test

Step 1: Create a New Dusk Test

Generate a new Dusk test using the Artisan command:

php artisan dusk:make RegistrationTest

This command creates a new test file in the tests/Browser directory.

Step 2: Write the Test

Open the generated test file and modify it to automate the registration process. Here’s an example:

<?php

namespace Tests\Browser;

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

class RegistrationTest extends DuskTestCase
{
    /**
     * A basic browser test example.
     *
     * @return void
     */
    public function testRegistration()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/register')
                    ->type('name', 'Test User')
                    ->type('email', '[e-mail]')
                    ->type('password', 'password')
                    ->type('password_confirmation', 'password')
                    ->press('Register')
                    ->assertPathIs('/home');
        });
    }
}

Step 3: Run the Test

Run the test using the following Artisan command:

php artisan dusk

or

php artisan dusk --filter= [name of test ]

This command will open a browser, perform the registration steps, and verify that the user is redirected to the /home page upon successful registration.

Advanced Dusk Features

Interacting with Elements

Dusk provides several methods to interact with elements on the page:

Type into an input field:

$browser->type('name', 'Test User');

Click a button:

$browser->press('Register');

Select an option from a dropdown:

$browser->select('country', 'US');

Check a checkbox:

$browser->check('terms');

Assertions

Dusk allows you to make various assertions to verify the state of the application:

Assert URL path:

$browser->assertPathIs('/home');

Assert see text:

$browser->assertSee('Welcome');

Assert input value:

$browser->assertInputValue('email', '[e-mail]');

Handling Modals

Dusk can handle JavaScript modals and alerts:

Accept a JavaScript alert:

$browser->acceptDialog();

Dismiss a JavaScript alert:

$browser->dismissDialog();

Taking Screenshots

Dusk can take screenshots of the browser at any point during the test:

$browser->screenshot('registration-page');

Using Dusk Selectors

Dusk selectors provide a robust way to target elements:

Add a dusk attribute to your HTML elements:

<input dusk="email" type="email" name="email">

Target the element in your Dusk test:

$browser->type('@email', '[e-mail]');

Conclusion

Laravel Dusk simplifies browser testing by providing a clean and expressive API to interact with your application. It automates the setup process, making it easier to ensure that your entire application works as expected. With features like element interaction, assertions, modal handling, screenshots, and Dusk selectors, you can write comprehensive browser tests to validate your application's functionality.