Browser testing with Dusk in Laravel - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Dusk test do?

Consider this Laravel Dusk test code snippet:

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

What is the main behavior this test checks?

Laravel

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

A It checks that a user can log in successfully and is redirected to the home page.

B It verifies that the login page loads without errors but does not submit the form.

C It tests that the login form shows validation errors when fields are empty.

D It confirms that the user is logged out and redirected to the login page.

💡 Hint

Look at the sequence of actions: visit, type, press, then assert the path.

The test visits the login page, fills in email and password, presses the login button, and then checks if the browser is redirected to '/home'. This confirms successful login and redirection.

📝 Syntax

intermediate

Identify the syntax error in this Dusk test code

Look at this Dusk test snippet:

$this->browse(function (Browser $browser) {
    $browser->visit('/dashboard')
            ->click('button#save')
            ->assertSee('Saved successfully')
});

What is the syntax error here?

Laravel

$this->browse(function (Browser $browser) {
    $browser->visit('/dashboard')
            ->click('button#save')
            ->assertSee('Saved successfully')
});

A The function keyword is missing before the closure.

B Missing semicolon after the last method call chain.

C Incorrect method name 'click' should be 'press'.

D The 'assertSee' method requires a second argument.

💡 Hint

Check the end of the method chain inside the closure.

In PHP, each statement must end with a semicolon. The method chain ends without a semicolon, causing a syntax error.

❓ state_output

advanced

What is the value of $count after this Dusk test runs?

Given this Dusk test code:

public function testAddItem() {
    $count = 0;
    $this->browse(function (Browser $browser) use (&$count) {
        $browser->visit('/items')
                ->click('@add-item')
                ->waitForText('Item added')
                ->assertSee('Item added');
        $count++;
    });
    return $count;
}

What is the value returned by testAddItem()?

Laravel

public function testAddItem() {
    $count = 0;
    $this->browse(function (Browser $browser) use (&$count) {
        $browser->visit('/items')
                ->click('@add-item')
                ->waitForText('Item added')
                ->assertSee('Item added');
        $count++;
    });
    return $count;
}

A null

B 0

C Throws an error because $count is not accessible

D 1

💡 Hint

Notice the use of 'use (&$count)' and where $count++ happens.

The variable $count is passed by reference into the closure. Inside the closure, $count is incremented by 1. After the closure runs, $count is 1 and returned.

🔧 Debug

advanced

Why does this Dusk test fail with a timeout error?

This Dusk test fails with a timeout:

$this->browse(function (Browser $browser) {
    $browser->visit('/profile')
            ->click('@save-button')
            ->waitForText('Profile updated', 2)
            ->assertSee('Profile updated');
});

What is the most likely reason for the timeout?

Laravel

$this->browse(function (Browser $browser) {
    $browser->visit('/profile')
            ->click('@save-button')
            ->waitForText('Profile updated', 2)
            ->assertSee('Profile updated');
});

A The text 'Profile updated' does not appear within 2 seconds after clicking save.

B The selector '@save-button' is invalid and causes the click to fail silently.

C The visit method is missing a trailing slash causing a 404 error.

D The assertSee method is called before the page finishes loading.

💡 Hint

Check the waitForText timeout duration and the expected text presence.

The waitForText method waits up to 2 seconds for the text 'Profile updated'. If the text appears after 2 seconds, the test times out and fails.

🧠 Conceptual

expert

Which option best describes the role of the Browser class in Laravel Dusk?

In Laravel Dusk, what is the primary purpose of the Browser class?

A It compiles and bundles JavaScript assets for the Laravel application.

B It handles server-side rendering of views before sending them to the browser.

C It provides methods to simulate user interactions with the browser like clicking, typing, and navigating pages.

D It manages database transactions during browser tests to rollback changes automatically.

💡 Hint

Think about what actions a user performs in a browser and how tests simulate them.

The Browser class in Dusk simulates real user actions like visiting URLs, clicking buttons, typing text, and checking page content.

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