Browser testing with Dusk in Laravel - Step-by-Step Execution

Concept Flow - Browser testing with Dusk

Start Test

↓

Launch Browser

↓

Navigate to URL

↓

Perform Actions

↓

Check Assertions

↓

Close Browser

↓

End Test

This flow shows how a Dusk test starts by opening a browser, navigating, performing actions, checking results, and then closing the browser.

Execution Sample

Laravel

public function testLogin()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/login')
                ->type('email', '[e-mail]')
                ->type('password', 'secret')
                ->press('Login')
                ->assertPathIs('/home');
    });
}

This test opens the login page, fills in email and password, clicks login, and checks if redirected to home.

Execution Table

Step	Action	Browser State	Result	Notes
1	Launch browser	Browser opened, blank page	Success	Browser window opens ready for commands
2	Visit '/login'	Page loads login form	Success	Login page is displayed
3	Type 'email' field	Email input filled with '[e-mail]'	Success	Email typed into form
4	Type 'password' field	Password input filled with 'secret'	Success	Password typed into form
5	Press 'Login' button	Form submitted	Success	Login form submitted
6	Assert path is '/home'	Current URL is '/home'	Pass	User redirected to home page
7	Close browser	Browser closed	Success	Test ends, browser closes

💡 Test ends after browser closes following successful assertion or failure

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
email input	empty	[e-mail]	[e-mail]	[e-mail]	[e-mail]
password input	empty	empty	secret	secret	secret
current URL	about:blank	/login	/login	/home	/home
browser state	closed	open	open	open	closed

Key Moments - 3 Insights

Why does the test fail if the assertion 'assertPathIs' does not match?

Because the test expects the browser URL to be '/home' after login. If it is different, the assertion fails, stopping the test as shown in step 6 of the execution_table.

What happens if the 'press' method is called before filling the inputs?

The form submits empty fields, likely causing a failed login and assertion failure at step 6, as the URL won't change to '/home'.

Does the browser stay open after the test finishes?

No, the browser closes at the last step (step 7), ensuring no leftover browser windows remain after tests.

Visual Quiz - 3 Questions

Look at the execution_table, what is the browser state after step 4?

A Browser open with email and password typed

B Browser closed

C Browser open but no inputs typed

D Browser crashed

💡 Hint

Check the 'Browser State' column at step 4 in the execution_table

At which step does the test check if the user is redirected to '/home'?

A Step 5

B Step 6

C Step 3

D Step 7

💡 Hint

Look for the 'Assert path is' action in the execution_table

If the 'type' method for password is skipped, what likely happens?

A Test passes normally

B Browser closes early

C Test fails at assertion step

D Login button is disabled

💡 Hint

Refer to key_moments about missing input causing assertion failure

Concept Snapshot

Browser testing with Dusk:
- Use $this->browse() with a closure
- Chain browser actions: visit(), type(), press()
- Use assertions like assertPathIs() to check results
- Browser opens, runs commands, then closes
- Tests simulate real user actions in a browser

Full Transcript

Browser testing with Laravel Dusk involves opening a browser window, navigating to a web page, performing user actions like typing and clicking, then checking if the expected page or element appears. The test starts by launching the browser, visiting the login page, typing the email and password, pressing the login button, and asserting the URL changes to '/home'. If the assertion passes, the browser closes and the test ends successfully. If any step fails, the test stops and reports failure. Variables like input fields and current URL change as the test runs. This process helps ensure the website works correctly from a user's perspective.

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