Laravel Dusk NoSuchElementException / Unable to locate element

8
votes

I'm trying to run some basic Laravel Dusk Tests but always running into problems with the Facebook WebDriver:

I already updated chrome to the latest version and manually updated the Chrome WebDriver with Hombrew:

Any suggestions?

Cheers, Stan

Error:

Tests\Browser\Tests\Auth\SignUpTest::a_user_can_sign_up
Facebook\WebDriver\Exception\NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"body textarea[name='input[name="name"]']"}
  (Session info: headless chrome=64.0.3282.119)
  (Driver info: chromedriver=2.33.506106 (8a06c39c4582fbfbab6966dbb1c38a9173bfb1a2),platform=Mac OS X 10.12.6 x86_64)

MySignUpTest:

public function a_user_can_sign_up()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit(new SignUpPage)
                ->signUp('Erika Musterfrau', '[email protected]', 'password', 'password')
                ->assertPathIs('/dashboard')
                ->assertSeeIn('.navbar', 'Erika Musterfrau');
        });
    }

MySignUpPage:

 public function assert(Browser $browser)
    {
        $browser->assertPathIs('/register');
    }

    public function signUp(Browser $browser, $name = null, $email = null, $password = null, $passwordConfirmation = null)
    {
        $browser->type('@name', $name)
            ->type('@email', $email)
            ->type('@password', $password)
            ->type('@password_confirmation', $passwordConfirmation)
            ->press('Register');
    }

    /**
     * Get the element shortcuts for the page.
     *
     * @return array
     */
    public function elements()
    {
        return [
            '@name' => 'input[name="name"]',
            '@email' => 'input[name="email"]',
            '@password' => 'input[name="password"]',
            '@password_confirmation' => 'input[name="password_confirmation"]',
        ];
    }

OneOfMyRegisterInputViews:

<div class="form-group row">
                            <div class="col-lg-8 offset-2">
                                <input placeholder="name"
                                        type="text"
                                        class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                                        name="name"
                                        value="{{ old('name') }}"
                                        required
                                >
                                @if ($errors->has('name'))
                                    <div class="invalid-feedback">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </div>
                                @endif
                            </div>
                        </div>
2
phplaravelgoogle-chromelaravel-dusk

2 Answers

3
votes

For those who still have a problem: check APP_URL variable in your Laravel's .env file. URL on which the application is running must match with the APP_URL parameter

1
votes

I hope you have solved this problem by this time. According to the Laravel Dusk documentation

although the method accepts one if necessary, we are not required to pass a CSS selector into the type method. If a CSS selector is not provided, Dusk will search for an input field with the given name attribute. Finally, Dusk will attempt to find a textarea with the given name attribute.

Looking at your error, it seems like you are passing the wrong selector. Try using name of the input fields as below

$browser->type('name', $name)
        ->type('email', $email)
        ->type('password', $password)
        ->type('password_confirmation', $passwordConfirmation)
        ->press('Register');