CODEWITHSUNDEEP
javascripttestingprotractor
sininen
sininen

Reputation: 553

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

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?

Upvotes: 2

Views: 1420

Answers (2)

Sergey Pleshakov
Sergey Pleshakov

Reputation: 8948

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

Upvotes: 1

E SV
E SV

Reputation: 133

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

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

Upvotes: 3

Related Questions