How does isDisplayed() in protractor/webDriver work? - selenium-webdriver

Question

All of a sudden in our testing for our organization, the use of isDisplayed() just stopped being consistent.
Now it could be something that our Devs changed. But my question is what is isDisplayed() doing under the hood? What does it look for exactly? How does it work?

Answer 1

isDisplayed looks for the if the element is displyed in the browser screen. The display property tests whether any part of the element drawn is inside viewport. This is determined by the algorithm. In selenium it implemented as following.
/**
* Test whether this element is currently displayed.
*
* #return {!Promise<boolean>} A promise that will be
* resolved with whether this element is currently visible on the page.
*/
isDisplayed() {
return this.execute_(
new command.Command(command.Name.IS_ELEMENT_DISPLAYED));
}
IS_ELEMENT_DISPLAYED is itself an ENUM defined in the webdriver.CommandName.
The command is passed (IS_ELEMENT_DISPLAYED) uses the JsonWireProtocol to get the displayed property using the following get method:
session/:sessionId/element/:id/displayed
GET /session/:sessionId/element/:id/displayed
Determine if an element is currently displayed.
URL Parameters:
:sessionId - ID of the session to route the command to.
:id - ID of the element to route the command to.
Returns:
{boolean} Whether the element is displayed.
Potential Errors:
NoSuchWindow - If the currently selected window has been closed.
StaleElementReference - If the element referenced by :id is no longer attached to the page's DOM.
From the W3C and JsonWireProtocol which is implemented by selenium. I have quoted it down. [https://w3c.github.io/webdriver/#element-displayedness]
"The approach recommended to implementors to ascertain an element's
visibility was originally developed by the Selenium project, and is
based on crude approximations about an element's nature and
relationship in the tree. An element is in general to be considered
visible if any part of it is drawn on the canvas within the boundaries
of the viewport.
The element displayed algorithm is a boolean state where true
signifies that the element is displayed and false signifies that the
element is not displayed. To compute the state on element, invoke the
Call(bot.dom.isShown, null, element). If doing so does not produce an
error, return the return value from this function call. Otherwise
return an error with error code unknown error."
Simple words as I learned:
If the element is not present in the DOM tree, call isDisplayed() will report NoSuchElementException, this is why protractor has isPresent() API.
If the element size is zero, selenium will treat it as not dispalyed even
set dispaly: block CSS on the element
element or its parent/ancestors' CSS value of display set to none (display: none), the element is not displayed.