CODEWITHSUNDEEP
javascripttravis-cilaravel-dusk
monahajt
monahajt

Reputation: 61

Dusk error (element is not clickable at point (x, y). Other Element would receive the click. [FIX]

I have an error in my Laravel Dusk browser (i.e. integrated) test that often occurs on Travis CI and cannot easily reproduce locally:

Element is not clickable at point (x, y) Other element would receive the click."

This is sometimes caused by checkbox labels or by the element being off-screen and needing to be scrolled to, but this wasn't the case in my issue.

In my case, I have a custom dropdown made of divs. When I try and click .dropdown__item that's wrapped in a div .dropdown, the .dropdown wrapper div receives the click instead.

How can I fix this issue?

Upvotes: 4

Views: 495

Answers (3)

RobinGL
RobinGL

Reputation: 1

Stuff like --disable-smooth-scrolling or some sort of "scrollTo"-Functions didn't helped me in my case.

My Problem was that the label catched the click from dusk, i assume dusk tries to click right in the middle of each input field.

So i did it using: ->script("document.getElementById('ID_OF_ELEMENT').click();");

BUT...

https://stackoverflow.com/a/51801024/7844810

"You can't use chaining after script() because it returns an array instead of $this"

So make sure you split the instance of $browser like:

$browser->[...]
    ->script('Do Your JS magic')
$browser->click('...') // Keep going with a new intance

Upvotes: 0

Hashim Aziz
Hashim Aziz

Reputation: 6062

This was a long-standing problem for me while using scrollIntoView() to scroll an element button into view to be clicked, but adding the --disable-smooth-scrolling option to DuskTestCase.php seems to have fixed it permanently:

$options = (new ChromeOptions)->addArguments(collect([
    "--window-size=1920,1080",
    "--ignore-certificate-errors",
    "--disable-smooth-scrolling" // add this
])->unless($this->hasHeadlessDisabled(), function ($items) {
    return $items->merge([
        "--disable-gpu",
        "--headless",
    ]);
})->all());

Upvotes: 0

Hashim Aziz
Hashim Aziz

Reputation: 6062

Since it's been almost a year without the OP moving their fix into an answer and since I've twice almost clicked away from this question without realising the solution is in the question itself, I decided to move it into an answer.

The fix for this issue is to stop propagation on the dropdown__item. In Vue 2 that is simply @click.stop="methodName", but in vanilla JS it would be event.stopPropagation().

Upvotes: 0

Related Questions