How does Selenium WebDriver's isDisplayed() method work

Question

I currently have a large number of circumstances where I need to verify that a page (along with all of its elements) are displaying correctly. The isDisplayed() method of WebElement appears to be a logical way to do this, however I would like to understand precisely what this method is doing to determine whether or not an element "is displayed". The javadoc does not shed any light on the inner workings of the method and other information on the web appears to be sparse at best.

If anyone could provide a detailed description of how this method works, I would be very grateful.

Answer 1

I would trust in Selenium to work out if an element is displayed or not. If it doesn't work you can raise a bug and/or fix any issues you see and provide a patch.

This is what the method does (Taken from the current Selenium source code):

/**  * Determines whether an element is what a user would call "shown". This means  * that the element is shown in the viewport of the browser, and only has  * height and width greater than 0px, and that its visibility is not "hidden"  * and its display property is not "none".  * Options and Optgroup elements are treated as special cases: they are  * considered shown iff they have a enclosing select element that is shown.  *  * @param {!Element} elem The element to consider.  * @param {boolean=} opt_ignoreOpacity Whether to ignore the element's opacity  *     when determining whether it is shown; defaults to false.  * @return {boolean} Whether or not the element is visible.  */ bot.dom.isShown = function(elem, opt_ignoreOpacity) {   if (!bot.dom.isElement(elem)) {     throw new Error('Argument to isShown must be of type Element');   }    // Option or optgroup is shown iff enclosing select is shown (ignoring the   // select's opacity).   if (bot.dom.isElement(elem, goog.dom.TagName.OPTION) ||       bot.dom.isElement(elem, goog.dom.TagName.OPTGROUP)) {     var select = /**@type {Element}*/ (goog.dom.getAncestor(elem, function(e) {       return bot.dom.isElement(e, goog.dom.TagName.SELECT);     }));     return !!select && bot.dom.isShown(select, /*ignoreOpacity=*/true);   }    // Image map elements are shown if image that uses it is shown, and   // the area of the element is positive.   var imageMap = bot.dom.maybeFindImageMap_(elem);   if (imageMap) {     return !!imageMap.image &&            imageMap.rect.width > 0 && imageMap.rect.height > 0 &&            bot.dom.isShown(imageMap.image, opt_ignoreOpacity);   }    // Any hidden input is not shown.   if (bot.dom.isElement(elem, goog.dom.TagName.INPUT) &&       elem.type.toLowerCase() == 'hidden') {     return false;   }    // Any NOSCRIPT element is not shown.   if (bot.dom.isElement(elem, goog.dom.TagName.NOSCRIPT)) {     return false;   }    // Any element with hidden visibility is not shown.   if (bot.dom.getEffectiveStyle(elem, 'visibility') == 'hidden') {     return false;   }    // Any element with a display style equal to 'none' or that has an ancestor   // with display style equal to 'none' is not shown.   function displayed(e) {     if (bot.dom.getEffectiveStyle(e, 'display') == 'none') {       return false;     }     var parent = bot.dom.getParentElement(e);     return !parent || displayed(parent);   }   if (!displayed(elem)) {     return false;   }    // Any transparent element is not shown.   if (!opt_ignoreOpacity && bot.dom.getOpacity(elem) == 0) {     return false;   }    // Any element with the hidden attribute or has an ancestor with the hidden   // attribute is not shown   function isHidden(e) {     //IE does not support hidden attribute yet     if (goog.userAgent.IE) {       return true;     }     if (e.hasAttribute) {       if (e.hasAttribute('hidden')){         return false;       }     } else {       return true;     }     var parent = bot.dom.getParentElement(e);     return !parent || isHidden(parent);   }    if (!isHidden(elem)) {     return false;   }    // Any element without positive size dimensions is not shown.   function positiveSize(e) {     var rect = bot.dom.getClientRect(e);     if (rect.height > 0 && rect.width > 0) {       return true;     }     // A vertical or horizontal SVG Path element will report zero width or     // height but is "shown" if it has a positive stroke-width.     if (bot.dom.isElement(e, 'PATH') && (rect.height > 0 || rect.width > 0)) {       var strokeWidth = bot.dom.getEffectiveStyle(e, 'stroke-width');       return !!strokeWidth && (parseInt(strokeWidth, 10) > 0);     }     // Zero-sized elements should still be considered to have positive size     // if they have a child element or text node with positive size, unless     // the element has an 'overflow' style of 'hidden'.     return bot.dom.getEffectiveStyle(e, 'overflow') != 'hidden' &&         goog.array.some(e.childNodes, function(n) {           return n.nodeType == goog.dom.NodeType.TEXT ||                  (bot.dom.isElement(n) && positiveSize(n));         });   }   if (!positiveSize(elem)) {     return false;   }    // Elements that are hidden by overflow are not shown.   if (bot.dom.getOverflowState(elem) == bot.dom.OverflowState.HIDDEN) {     return false;   } 

Not sure it really needs any more explanation, the comments are quite clear. Let me know if you want any more info added.

Answer 2

WebDriver has its own W3C specification.

The section about determining visibility is what you are after.

I would warn that saying something "is displayed" is such a broad term, and thus there are many scenarios to it. Therefore, there may well be situations that WebDriver does not account for.

So it's important, vital in fact, to remember that something being "displayed" or "visible" has many meanings. (In the same way a page being fully loaded, also has many meanings.)

Also remember Selenium is entirely open source. There is nothing stopping you from getting a fresh checkout of the repository and inspecting it locally.