CODEWITHSUNDEEP
selenium
Thunderforge
Thunderforge

Reputation: 20575

Check if a WebElement (covered due to CSS) is visible to the user

In the following code, I have two <div> tags that display different colored columns, one red, one green:

<html>
    <body>
        <style>
        html, body {
            height: 100%;
        }

        #red {
            width:50%;
            background: #f00;
            height: 100%;
        }
        #green {
            width: 250px;
            background: #0f0;
            height: 100%;
        }
        </style>
        <div id="red">
        </div>
        <div id="green">
        </div>
    </body>
</html>

When it is displayed, the red div tag completely covers the green div tag due to the percentage width of the red area being greater than the pixel width of the green. (You can see this on JFiddle)

The problem I'm having is that in Selenium, I can't find a way to programmatically verify whether or not the green div is visible to the user. Trying greenDivWebElement.isDisplayed() returns true with the above code, despite the fact that the user cannot see it.

I did discover that doing greenDivWebElement.click() does reveal that the green div is not visible as the following error is thrown:

org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (133, 361). Other element would receive the click: <div id="red">...</div>

However, this solution won't work for me in the real world because the sort of things I want to check the visibility of do something when clicked and while I want to make sure that they are visible to the user, I don't want for them to be clicked.

So how can I check if a WebElement is visible to the user if it is covered due to CSS?

Upvotes: 1

Views: 1383

Answers (1)

shri046
shri046

Reputation: 1198

I ran into a similar requirement recently. I do not have the complete solution implemented yet but at a high level these are the steps I am taking. To verify element A is not overlapped by any other element

  1. Get the element in question, bind the click() event of the element to a function that does nothing.
  2. Click on 9 points of the element - center; top: left, center, right; middle: left, right; bottom: left, center, right. Selenium clicks on an element at the center point by default. The other points can be calculated by DOM positioning of the element and then moving to the respective points.
  3. Wrap the call block in step 2 in a try/catch to check for Element not clickable... exception.
  4. If an exception is thrown, element is overlapped by another at one of the click points.

The challenge here is definitely the bind/unbind of the click event. For my particular case it is straight forward using JQuery to achieve the binding.

One other way I initially thought of handling the click problem is to disable Javascript in the driver before running the test. But of course this approach will only work if there is no JS trickery involved in rendering page elements.

Part two of the challenge is the granularity of the click points. 8 points along the edges usually works but if there is overlap outside of the click points then the number of click points has to be bumped up.

Upvotes: 4

Related Questions