dusk: Element is not clickable at (x, y)

I have a form which spans beyond the viewport and as a result the following test seems not able to find the button and reports the error;

Facebook\WebDriver\Exception\UnknownServerException: unknown error: Element is not clickable at point (605, 869)
  (Session info: chrome=56.0.2924.87)
  (Driver info: chromedriver=2.27.440174 (e97a722caafc2d3a8b807ee115bfb307f7d2cfd9),platform=Mac OS X 10.12.3 x86_64)

Test below;

$this->browse(function ($admin) {
            $admin->loginAs(User::find(1))
                ->visit('/admin')
                ->assertSee('Dashboard')
                ->clickLink('Quick Links')
                ->clickLink('Competitions')
                ->assertSee('Competitions')
                ->waitFor('.dropdown-toogle')
                ->click('.dropdown-toogle')
                ->assertSee('Copy')
                ->clickLink('Copy')
                ->type('name', 'Copy Competition 1')
                ->check('active')
                ->press('Save')
                ->assertSee('Copy Competition 1');
        });

I am really not sure why it can’t see the button other than not showing within the viewport and will require a normal user to scroll down to get to the button. Not sure how to proceed beyond this point.

Thanks!

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 32 (8 by maintainers)

Links to this issue

Dusk suddenly can't click elements that require scrolling - Fix Inside

Most upvoted comments

Chromedriver v2.32 has fixed this issue (at least for me).

Running this code in v2.31

$browser->click('.foo');

Will throw:

Facebook\WebDriver\Exception\UnknownServerException: unknown error: Element is not clickable at point (832, 778)
  (Session info: headless chrome=61.0.3163.100)
  (Driver info: chromedriver=2.31.488774 (7e15618d1bf16df8bf0ecf2914ed1964a387ba0b),platform=Mac OS X 10.12.6 x86_64)

As a workaround for v2.31, I created a macro:

Browser::macro('scrollToElement', function ($element = null) {
    $this->script("$('html, body').animate({ scrollTop: $('$element').offset().top }, 0);");

    return $this;
});

So, the code will be:

$browser->scrollToElement('#bar')
        ->click('.foo');

+14

amree on Sep 25, 2017

A quick hack that work for me : Resize the height of the browser.

$browser->resize(1920, 3000)
               ->click('.Radio-gender')
               ->click('.Radio-type')
               ->click('.Radio-size')
               ...

+11

ghost on May 7, 2018

@troccoli Try this:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Laravel\Dusk\Browser;

class TestProvider extends ServiceProvider
{
    /**
     * Bootstrap the application services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }

    /**
     * Register the application services.
     *
     * @return void
     */
    public function register()
    {
        Browser::macro('scrollToElement', function ($element = null) {
            $this->script("$('html, body').animate({ scrollTop: $('$element').offset().top }, 0);");

            return $this;
        });
    }
}

// config/app.php

return [
    // ...
    'providers' => [
        // ...
        App\Providers\TestProvider::class

amree on Oct 4, 2017

See related issue since Chrome version 61 noted in Issue #366

$browser->click($selector) also stopped working if the element requires scrolling, as of Chrome 61.

See first change listed for 2.32 https://sites.google.com/a/chromium.org/chromedriver/downloads

cat5inthecradle on Sep 13, 2017

Try to pause before the immediate click. Something like $response->pause(500)->press('Save');

deleugpn on Mar 23, 2017

I have similar problem but solved. It is related with css. I gave margin property for my button. Dusk try to click on the margin area. So, it returned “Element is not clickable at point”. So, I try to remove margin from my button and then it goes smoothly. I found this hint in - https://sites.google.com/a/chromium.org/chromedriver/help/clicking-issues

If you don’t want to touch the design, you should try to scroll the browser to see the btn completely-

$this->browse(function (Browser $browser) {
            $browser->visit('/login')
                    ->type('email', 'user@user.com')
                    ->type('password', '1234')
                    ->driver->executeScript('window.scrollTo(0, 400);');
                    // can't chain methods after this
            $browser
                    ->press('LOG IN')
                    ->pause(500)
                    ->assertSee('Select a location and time to see the cars');
        });

Try & Goodluck

nyeineisandarsoe on Sep 7, 2017