DEV Community

Chabba Saad
Chabba Saad

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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', 'test@example.com')
                    ->type('password', 'password')
                    ->type('password_confirmation', 'password')
                    ->press('Register')
                    ->assertPathIs('/home');
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Run the Test

Run the test using the following Artisan command:

php artisan dusk
Enter fullscreen mode Exit fullscreen mode

or

php artisan dusk --filter= [name of test ]
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

Click a button:

$browser->press('Register');
Enter fullscreen mode Exit fullscreen mode

Select an option from a dropdown:

$browser->select('country', 'US');
Enter fullscreen mode Exit fullscreen mode

Check a checkbox:

$browser->check('terms');
Enter fullscreen mode Exit fullscreen mode

Assertions

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

Assert URL path:

$browser->assertPathIs('/home');
Enter fullscreen mode Exit fullscreen mode

Assert see text:

$browser->assertSee('Welcome');
Enter fullscreen mode Exit fullscreen mode

Assert input value:

$browser->assertInputValue('email', 'test@example.com');
Enter fullscreen mode Exit fullscreen mode

Handling Modals

Dusk can handle JavaScript modals and alerts:

Accept a JavaScript alert:

$browser->acceptDialog();
Enter fullscreen mode Exit fullscreen mode

Dismiss a JavaScript alert:

$browser->dismissDialog();
Enter fullscreen mode Exit fullscreen mode

Taking Screenshots

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

$browser->screenshot('registration-page');
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Target the element in your Dusk test:

$browser->type('@email', 'test@example.com');
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)