CODEWITHSUNDEEP
phplaravel-5.5laravel-dusklaravel-dusk2
hashmi
hashmi

Reputation: 661

Laravel Dusk: Element is not clickable at point (x, y). Other Element would receive the click

I am trying to check the checkbox with laravel Dusk which contains other clickable links like Terms of Service and Privacy Policy Screenshot of the checkbox

When I try to check this checkbox on my test I get the following error

Element is not clickable at point (466, 438). Other element would receive the click: <label class="mt-checkbox mt-checkbox-outline">...</label>

This is what I am trying to do

public function testRegister()
{
    $template = factory(User::class)->make();

    $this->browse(function (Browser $browser) use ($template) {
        $browser
            ->visit(new Register)
            ->type('name', $template->name->full)
            ->type('phone', $template->phone)
            ->type('email', strtoupper($template->email))
            ->type('password', 'dummy-pass')
            ->check('agree')
            ->press('Create Account')
            ->assertRouteIs('dashboard')
            ->assertAuthenticated();
    });

    $this->assertDatabaseHas('users', [
        'email' => $template->email,
    ]);
}

I have tried to maximize and scroll the browser using 

$browser->maximize();
$browser->driver->executeScript('window.scrollTo(0, 400);');

Apart from using check method I tried to use click method with button selector as well like

$browser->click('input#button-selector');

I am not finding the way to solve this issue. Is there any way to fix this issue? Am I missing something?

Upvotes: 3

Views: 4205

Answers (2)

Ostap Brehin
Ostap Brehin

Reputation: 3962

In my situation, it didn't work because I had two modal windows with the same elements.

Upvotes: 0

hashmi
hashmi

Reputation: 661

I got it fixed by using the outer label selector instead of checkbox name. For example for my issue this is what i have done with my test case.

public function testRegister()
{
    $template = factory(User::class)->make();

    $this->browse(function (Browser $browser) use ($template) {
        $browser
            ->visit(new Register)
            ->type('name', $template->name->full)
            ->type('phone', $template->phone)
            ->type('email', strtoupper($template->email))
            ->type('password', 'dummy-pass')
            ->check('@agree')
            ->press('Create Account')
            ->assertRouteIs('dashboard')
            ->assertAuthenticated();
    });

    $this->assertDatabaseHas('users', [
        'email' => $template->email,
    ]);
}

And in my Register page, i have agree selector registered in elements method as following

public function elements()
{
    return [
        '@agree' => 'label.mt-checkbox',
    ];
}

It did solved my issue by using the outer label selector of checkbox. I hope this will help some one in future.

Upvotes: 4

Related Questions