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
}

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
}

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
        });
    }
}

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
        });
    }
}

Hint

Chain the clickLink and assertSee methods after the previous assertions.

Practice

1. What is the primary purpose of Laravel Dusk in web development?

easy

A. To optimize website images for faster loading

B. To automate browser testing by simulating user actions

C. To generate API documentation

D. To create database migrations automatically

Solution

1. Step 1: Understand Laravel Dusk's role

   Laravel Dusk is designed to automate browser testing by controlling a real browser to simulate user actions like clicking and typing.

2. Step 2: Compare options with Dusk's purpose

   Options A, B, and C relate to optimization, database, and documentation, which are unrelated to browser testing.

3. Final Answer:

   To automate browser testing by simulating user actions -> Option B

4. Quick Check:

   Browser automation = To automate browser testing by simulating user actions [OK]

Hint: Remember: Dusk controls browsers to test user actions [OK]

Common Mistakes:

• Confusing Dusk with database tools
• Thinking Dusk generates documentation
• Assuming Dusk optimizes assets

2. Which of the following is the correct way to start a browser test with Laravel Dusk?

easy

A. $browser->navigate('/home')->expectText('Welcome');

B. $browser->open('/home')->checkText('Welcome');

C. $browser->goTo('/home')->verifyText('Welcome');

D. $browser->visit('/home')->assertSee('Welcome');

Solution

1. Step 1: Recall Laravel Dusk syntax for visiting pages

   The correct method to visit a page is visit(), and to check text is assertSee().

2. Step 2: Identify correct method names

   Options B, C, and D use incorrect method names like open(), goTo(), and navigate(), which do not exist in Dusk.

3. Final Answer:

   $browser->visit('/home')->assertSee('Welcome'); -> Option D

4. Quick Check:

   Use visit() and assertSee() in Dusk [OK]

Hint: Use visit() to open page and assertSee() to check text [OK]

Common Mistakes:

• Using non-existent methods like open() or goTo()
• Confusing assertSee() with verifyText()
• Mixing up method chaining order

3. Given the following Dusk test code, what will be the result?

$browser->visit('/login')
        ->type('email', '[e-mail]')
        ->type('password', 'secret')
        ->press('Login')
        ->assertPathIs('/dashboard');

medium

A. The test will pass if login redirects to /dashboard

B. The test will fail because type() cannot fill inputs

C. The test will throw a syntax error

D. The test will pass even if the path is not /dashboard

Solution

1. Step 1: Analyze the test steps

   The test visits the login page, fills email and password fields, presses the Login button, then checks if the browser path is /dashboard.

2. Step 2: Understand Dusk behavior

   The type() method fills inputs correctly, and assertPathIs() verifies the current URL path. If login redirects to /dashboard, the test passes.

3. Final Answer:

   The test will pass if login redirects to /dashboard -> Option A

4. Quick Check:

   Correct input and path check = The test will pass if login redirects to /dashboard [OK]

Hint: type() fills inputs; assertPathIs() checks URL path [OK]

Common Mistakes:

• Thinking type() cannot fill inputs
• Assuming assertPathIs() ignores path
• Confusing syntax errors with runtime failures

4. Identify the error in this Dusk test code snippet:

$browser->visit('/profile')
        ->type('name', 'John Doe')
        ->click('Save')
        ->assertSee('Profile updated');

medium

A. The method click() should be press() to click buttons

B. The type() method cannot fill text inputs

C. assertSee() cannot check text on the page

D. visit() method requires a full URL, not a path

Solution

1. Step 1: Review Dusk methods for clicking buttons

   In Laravel Dusk, to click a button by its text, the correct method is press(), not click().

2. Step 2: Validate other methods

   type() fills inputs, assertSee() checks text, and visit() accepts paths, so these are correct.

3. Final Answer:

   The method click() should be press() to click buttons -> Option A

4. Quick Check:

   Use press() for buttons, not click() [OK]

Hint: Use press() to click buttons, not click() [OK]

Common Mistakes:

• Using click() instead of press() for buttons
• Thinking type() can't fill inputs
• Believing visit() needs full URL

5. You want to test a form that has a dropdown with options 'Red', 'Green', and 'Blue'. Which Dusk method correctly selects 'Green' before submitting the form?

hard

A. $browser->pick('color', 'Green')->press('Submit');

B. $browser->choose('color', 'Green')->press('Submit');

C. $browser->select('color', 'Green')->press('Submit');

D. $browser->set('color', 'Green')->press('Submit');

Solution

1. Step 1: Recall the method to select dropdown options in Dusk

   The correct method to select an option from a dropdown is select().

2. Step 2: Verify other options are invalid

   Methods like choose(), pick(), and set() do not exist or are incorrect for dropdown selection in Dusk.

3. Final Answer:

   $browser->select('color', 'Green')->press('Submit'); -> Option C

4. Quick Check:

   Use select() for dropdowns in Dusk [OK]

Hint: Use select() to pick dropdown options before pressing buttons [OK]

Common Mistakes:

• Using choose() or pick() instead of select()
• Trying to set dropdown value with set()
• Forgetting to press the submit button