Browser testing with Dusk in Laravel - Mini Project: Build & Apply

Browser testing with Dusk

📖 Scenario: You are building a simple Laravel web application with a homepage that has a welcome message and a button to visit the about page.You want to write browser tests using Laravel Dusk to check that the homepage loads correctly and the navigation works.

🎯 Goal: Create a Laravel Dusk browser test that opens the homepage, checks the welcome message, clicks the about page link, and verifies the about page content.

📋 What You'll Learn

Create a Dusk test class named HomePageTest

Set up the test to visit the homepage URL /

Check that the homepage contains the text Welcome to Laravel

Click the link with text About Us

Verify the about page contains the text About Laravel

💡 Why This Matters

🌍 Real World

Browser testing with Laravel Dusk helps ensure your web pages load correctly and user interactions work as expected before deploying your app.

💼 Career

Many Laravel developer jobs require writing automated browser tests to maintain high-quality, bug-free web applications.

1

Create the Dusk test class

Create a Dusk test class named HomePageTest inside the tests/Browser directory that extends Laravel\Dusk\TestCase.

Laravel

<?php

namespace Tests\Browser;

use Laravel\Dusk\TestCase;

class HomePageTest extends TestCase
{
    // Your code here
}

Need a hint?

Use the php artisan dusk:make HomePageTest command or create the file manually with the correct namespace and class declaration.

2

Add the test method to visit homepage

Inside the HomePageTest class, add a public method named test_homepage_shows_welcome that uses $this->browse with a closure receiving a Browser instance named $browser.

Laravel

<?php

namespace Tests\Browser;

use Laravel\Dusk\TestCase;

class HomePageTest extends TestCase
{
    // Add the test method here
}

Need a hint?

Define a public method starting with test_ and call $this->browse passing a closure with Browser $browser.

3

Visit homepage and check welcome text

Inside the closure in test_homepage_shows_welcome, use $browser->visit('/') to open the homepage, then use assertSee('Welcome to Laravel') to check the welcome message.

Laravel

browse(function (Browser $browser) {
            // Visit homepage and check welcome text
            // Your code here
        });
    }
}

Need a hint?

Chain the visit and assertSee methods on the $browser instance.

4

Click About Us link and verify about page

Extend the browser chain by adding clickLink('About Us') to click the about page link, then add assertSee('About Laravel') to verify the about page content.

Laravel

browse(function (Browser $browser) {
            $browser->visit('/')
                    ->assertSee('Welcome to Laravel');
            // Click About Us link and check about page
            // Your code here
        });
    }
}

Need a hint?

Chain the clickLink and assertSee methods after the previous assertions.