How to use webdriver to determine if element is hidden by parent style

Question

I am writing Webdriver automation for an app that uses the following construction:

<html>
  <body>
    <div style="display:block">
      <div class="textDiv">One</div>
    </div>
    <div style="display:none">
      <div class="textDiv">Two</div>
    </div>
    <div style="display:none">
      <div class="textDiv">Three</div>
    </div>
  </body>
</html>

I need a way to find the textDiv which is visible. I have tried the following:

isDisplayed(). This is not sufficient, because the textDiv element which has a parent with display:block may be off the screen.
getCssValue('visibility'). This is not working, as all textDivs return a visibility of 'visible'.
getCssValue('display'). This is not working, as all textDivs return a display of 'block'.
getAttribute('style'). This is not working, as all textDivs return a style of 'null'.

Basically, is there another way within Webdriver to determine whether an element is or is not displayed because of a style applied to a parent element?

Please note that this is a simplified example, and that the div whose display is set to none may not be the immediate parent of the element.

Add a tag for the programming language you are using and post your code. `.isDisplayed()` is what you want. If you want additional info on whether the element is on screen or not, you can use the coords of the element vs the size of the viewport, etc. See [this](https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript) — JeffC, Oct 02 '18 at 23:08
This sounds like an [X-Y problem](http://xyproblem.info/). Instead of asking for help with your solution to the problem, edit your question and ask about the actual problem. What are you trying to do? — undetected Selenium, Oct 04 '18 at 14:55

Phil · Accepted Answer · 2018-10-04T17:45:12.883

In response to the comment from New contributor, what I was trying to do was use determine if a page element was hidden from view due to styling applied to its parent element. Further, since this was within the context of Webdriver test automation, I wanted to do it using Webdriver functionality, or failing that, using standard Javascript methods.

The solution I have found was as follows. The Webdriver command getRect() returns the x and y position of a page element, as well as its width and height. If the element is currently off the screen, but would be displayed if the correct area of the page were in view, positive integers for all these values will be returned. If the element is hidden by a parent's style, all of these will have a value of 0. If the element is hidden by its own style, the width and height will be positive integers, but x and y will still be 0.

So it looks like the solution for this problem is to call getRect() on the textDiv elements, and operate on the one which has all nonzero values returned by getRect().

How to use webdriver to determine if element is hidden by parent style

1 Answers1