9

I'd like to check whether the user can see an element in the current web browser view without scrolling.

What I've found can check whether the element is somewhere on the page.

Another hint suggested to check the elements position but then I would need to get the dimensions of the visible window of the browser plus its x/y offset to 0/0.

I would be grateful if someone could point me to a solution that does not need JavaScript code.

Arran
  • 24,648
  • 6
  • 68
  • 78
user1882216
  • 137
  • 2
  • 2
  • 5
  • 3
    Unfortunately, no way without JavaScript. Why don't you want that, anyway? Does anything from [here](http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript) help? – Petr Janeček Dec 07 '12 at 00:19
  • @Slanec For example, I have a bug where due to some poor CSS, a button that needs to be clicked is positioned, for example at 110% width of viewport, and overflow is set to hidden. So the button is NEVER going to be clickbale, not with scrolling or resizing or anything. This only happens in IE11 by the way. So now I want a test case to verify the button is visible to add to the regression for the product. Unfortunately, isDisplayed() is true for the element. – dmansfield Feb 02 '15 at 21:43
  • I am checking the visibility of an element by using Css, Z-index. Whether can i check the visibility of element, in the back layer of another element. – bcrajkumar Sep 02 '15 at 11:47

1 Answers1

2

How do you define 'visible to the user'? How do you propose to check it? If it has a height? If it isn't hidden by CSS? What if it's parent element is hidden by CSS?

The most reliable way will be to use Selenium's built in .Displayed property (if you are using C#, Java has something similiar), and combine it with jQuery's 'visible' selector: http://api.jquery.com/visible-selector/. Example below, in C#.

var element = Driver.FindElement(By.Id("test"));
bool isVisible = element.Displayed;
var javascriptCapableDriver = (IJavascriptExecutor)Driver;
bool jQueryBelivesElementIsVisible = javascriptCapableDriver.ExecuteScript("return $('#myElement').is(:visible);");
bool elementIsVisible = isVisible && jQueryBelievesElementIsVisible;

This will get the majority of cases.

It isn't possible without client side code, or in the preparation that someone else finds a way that it can be done in a server side language, I highly doubt it will be pretty, readable or reliable.

jQuery has the offset() method:

http://api.jquery.com/offset/

This, however, won't work when taking into account borders, margins, that kind of stuff.

Arran
  • 24,648
  • 6
  • 68
  • 78
  • 2
    I would define **visible** as the element is in view port and not hidden by other elements in front of it. – Cani Aug 11 '17 at 13:08
  • 1
    @Cani This really ought to be doable, the `click()` method raises an exception under exactly those circumstances (with the message "Element <> is not clickable at point (546, 18). Other element would receive the click: <>"). I just can't figure out how to do it without actually triggering a click if it is visible... – Izkata Feb 06 '18 at 20:39