Element is not clickable because another element obscures it, overlapping elements

Question

I want to click an element on a page, but another div is overlapping half of this element. When I visit the page manually everything works, the element is clickable. The test works when I set the window size in the config.js

browser.manage().window().setSize(1500, 1500)

The problem I have is that the page must be tested with a smaller window size, so I cannot change the window size like this. When I run the tests I get the error message

Element <button id="button"> is not clickable at point because another element <div id="div"> obscures it

Is there any way to click this element when it is obscured by the div?

I guess it's because protractor clicks in the middle of specified element, so probably it clicks on the overlapping element. I think you can specify coordinates of clicking relative 0,0 coordinates to be sure protractor clicks on the required element. — Pavel Shirobok, May 04 '19 at 13:42
Does your ```div```need to be displayed on top of your element? If not, maybe you can go around just by setting a higher ```z-index```. If your div need to be above your element, maybe you can create a 'clickable' pseudoelement and position this pseudoelement above all of them -something like this but with a higher z-index: https://stackoverflow.com/a/10822168/11298742 — ludovico, May 04 '19 at 13:46
If you can hide the div without messing something else up, you can also follow the approach I suggest at https://stackoverflow.com/questions/51767496/protractor-unable-to-access-element-due-to-fixed-top-navigation-bar/51777985#51777985 (there too you'll see the idea in the answers below) — Jeremy Kahan, May 08 '19 at 01:31

score 3 · Answer 1 · answered May 06 '19 at 06:13

3

If nothing else works, you can click it with executeScript:

 browser.executeScript(
      "document.querySelector('[id=\"button\"]').click()"
    );

answered May 06 '19 at 06:13

E SV

133
7

it worked for me, thanks! In python: browser.execute_script( "document.querySelector('[id=\"on-off-toggle\"]').click()" ); – Ester Gonzalez De Langarica Jul 03 '20 at 10:39

score 1 · Answer 2 · answered May 07 '19 at 13:40

You can go with JS script. Define this action in your code

    /**
     *  Clicks on passed element by injecting js click() in the context of window
     *  @param {ElementFinder}      $element    Locator of element
     *  @param {number}             timeout     Time in ms (med. is 1000ms)
     *  @return {promise.Promise}
     */
    jsClick: ($element, timeout = timeouts.ms1000) =>
        browser.wait(
            protractor.ExpectedConditions.presenceOf($element),
            timeout,
            "waitThenClickScript on " + $element.locator()
        ).then(() => browser.executeScript(
            "arguments[0].click();",
            $element.getWebElement()
        ))

It will wait for presence of the elem, and then inject code in browser console to click the elem. So just do

jsClick($elementToClick);

It is also good to use when you don't want to know if something is visible and you want to click an element regardless (without scrolling down the page until it is visible). On the other hand, do not entirely rely on it, since protr click is a part of your UI verification

Element is not clickable because another element obscures it, overlapping elements

2 Answers2