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', 'test@example.com')
->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', 'test@example.com');
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', 'test@example.com');
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)