Java Selenium - ExpectedCopnditions Presence Passes but Visibility Fails

Question

I don't get it.. I have been searching for answers for 2 days now and I cannot find a single solution around this issue.

The code looks like this (within try catch block):

Presence = new WebDriverWait(Driver, custTimeout);
Presence.until(ExpectedConditions.presenceOfElementLocated(By.xpath(ElementXpath)));

Separate try catch block:

Visisble = new WebDriverWait(Driver, custTimeout);
Visisble.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(ElementXpath)));

This also shows as FALSE:

foundElement.isDisplayed();

AND this fails:

Clickable = new WebDriverWait(Driver, custTimeout);
Clickable.until(ExpectedConditions.elementToBeClickable(By.xpath(ElementXpath)));

Now, how/why does PRESENCE pass and VISIBILITY fails when the element IS visible on screen and CAN be clicked if I do this:

ElementToClick.get(0).click();

So basically, the element IS visible and the element IS interactable but yet the "check if visible" is failing with exception.

Seeing that the check for "visibility" basically looks for the height and width of the element, I decided to check this manually too by:

ElementToClick.getAttribute("height");
ElementToClick.getAttribute("width");

Both values are 0 (but I can see the element on the screen).

Edit:

So how can I go about identifying the element to be visible or not if these standard methods don't work?

Current Element Properties:

Checked these posts already:

Expected condition failed: waiting for visibility of element located by By.xpath

Selenium webdriver problem with: Expected condition failed: waiting for visibility of element located by(..)

https://sqa.stackexchange.com/questions/24459/selenium-webdriver-tests-sometimes-doesnt-find-elements

Selenium: How selenium identifies elements visible or not? Is is possible that it is loaded in DOM but not rendered on UI?

isDisplayed() vs isVisible() in Selenium

Answer 1

presenceOfElementLocated()

presenceOfElementLocated() is the expectation for checking that an element is present on the DOM of a page. This does not necessarily mean that the element is visible.

public static ExpectedCondition<WebElement> presenceOfElementLocated​(By locator)

Parameters:
locator - used to find the element
Returns:
the WebElement once it is located

---

visibilityOfElementLocated()

visibilityOfElementLocated() is the expectation for checking that an element is present on the DOM of a page and visible. Visibility means that the element is not only displayed but also has a height and width that is greater than 0.

public static ExpectedCondition<WebElement> visibilityOfElementLocated​(By locator)

Parameters:
locator - used to find the element
Returns:
the WebElement once it is located and visible

---

Element displayedness

This implementation of isDisplayed() is inline with the specification with in the WebDriver Level 2 W3C Working Draft which mentions that:

The recommended approach which will give a simplified approximation of an element's visibility, but please note that it relies only on tree-traversal, and only covers a subset of visibility checks.

The visibility of an element is guided by what is perceptually visible to the human eye. In this context, an element’s displayedness does not relate to the visibility or display style properties.

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.

This function is typically exposed to GET requests with a URI Template of:

/session/{session id}/element/{element id}/displayed.

---

Conclusion

An element perceptually visible to the human eye may can be rendered invisible by:

• Setting the CSS visibility property to hidden
• Setting the display property to none

for the element itself or one if its ancestors.