Difference between Element Present vs Element Visible?


What is the difference between Is-- Element Present vs Is-- Element Visible? What would be the benefits of using one vs the other?


Implementation-wise, isPresent does check for whether the searched element is existing in the DOM. That means if you open up the dev tools you should be able to find the element somewhere in the DOM tree. isVisible on the other hand, as the name suggests, makes use of the webdriver isDisplayed command which makes sure the element is actually visible to the user. According to the W3C spec for element-displayedness this is summed up well with

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.

That means essentially it’s a mix of approaches to determine the visibility instead of a simple css visibility/display check.

Now with regards to the benefits, it depends on the use case you have. In general as a best practice you’d wait for something being visible because that replicates a manual test. You can’t interact with something you can’t see right? That would reflect the black-box testing approach since the user has no immediate understanding of how your App is supposed to work other than what he sees. They normally don’t consume a page with the DevTools opened :slight_smile:

Sometimes though, you have conditions you’re expecting to be present in order to ensure a stable test. E.g a hidden form field needs to be present and having a specific value (which was a typical approach for legacy php and asp websites). That is something you’d call white-box, or in this specific case grey-box testing, as you’re writing your tests with full/partial understanding of how the internals of the app behave below the surface.

I hope this explanation helped a bit


Thank you @vsoftic! This clears my questions up.

closed #4