Getting Started with Laravel Dusk in Laravel 12

When it comes to testing JavaScript-heavy applications, Laravel Dusk stands out as a powerful and user-friendly tool. This guide will walk you through setting up and using Laravel Dusk with Laravel 12 to ensure your web applications are robust and bug-free.

Introduction to Laravel Dusk

Laravel Dusk provides an expressive, easy-to-use browser automation and testing API. With Dusk, you can test your web applications with a real browser, simulating user interactions and ensuring your front-end code behaves as expected.

Step-by-Step Guide

Step 1: Install Laravel Dusk

First, you’ll need to add the Dusk package to your Laravel project. Open your terminal and run the following command:

bash

composer require --dev laravel/dusk

Step 2: Install Dusk

Next, you need to install Dusk by running the following Artisan command:

bash

php artisan dusk:install

This command will publish the Dusk service provider and create a BrowserTestCase.php file for your tests.

Step 3: Update .env File

Ensure your .env file has the correct APP_URL. This is typically the URL where your application is served:

plaintext

APP_URL=http://your-app.test

Step 4: Running Dusk Tests

To run your Dusk tests, use the following Artisan command:

bash

php artisan dusk

Dusk will automatically start a ChromeDriver server and run your tests in a real browser.

Step 5: Writing Your First Test

Let’s create a simple Dusk test to verify the login functionality. Run the following command to create a new Dusk test:

bash

php artisan dusk:make LoginTest

Open the generated tests/Browser/LoginTest.php file and add your test methods. For example:

php

<?php

namespace Tests\Browser;

use Laravel\Dusk\Browser;
use Tests\DuskTestCase;
use Illuminate\Foundation\Testing\DatabaseMigrations;

class LoginTest extends DuskTestCase
{
    use DatabaseMigrations;

    /**
     * A basic browser test example.
     *
     * @return void
     */
    public function testUserCanLogin()
    {
        $user = factory(User::class)->create([
            'email' => 'test@example.com',
            'password' => bcrypt('secret'),
        ]);

        $this->browse(function (Browser $browser) use ($user) {
            $browser->visit('/login')
                    ->type('email', $user->email)
                    ->type('password', 'secret')
                    ->press('Login')
                    ->assertPathIs('/home');
        });
    }
}

Step 6: Advanced Testing

For more advanced testing scenarios, such as interacting with JavaScript elements or handling authentication, refer to the Laravel Dusk documentation for comprehensive guides and examples.

Conclusion

Laravel Dusk simplifies browser testing, allowing you to ensure your application’s front-end works seamlessly. By following this guide, you can set up Dusk in your Laravel 12 project and start writing effective browser tests. Happy testing!