39

I just started using Protractor to write tests. I am wondering what the difference is between the isPresent() and isDisplayed() methods.

The API definitions

  1. isPresent

  2. isDisplayed

So... in what cases are they different?

ndequeker
  • 7,932
  • 7
  • 61
  • 93
翁鹏飞
  • 421
  • 1
  • 5
  • 6

5 Answers5

51

isPresent is true if element exists in a page (in DOM), but can be hidden (display: none in css) isDisplayed is true only if isPresent is true and element is visible

sap1ens
  • 2,877
  • 1
  • 27
  • 30
  • 14
    Actually isDisplayed will throw an exception if the element is not present – hankduan Jan 23 '15 at 23:51
  • In my test when an element in not on the page, isPresent resolves to false, but isDisplayed exits silently with a Protractor runner error code 100 warning only. the promise is not resolved, – mojjj Jun 24 '15 at 08:14
15

isDisplayed resolves to whether the element is visible or not, but throws an exception if it is not in the DOM.

isPresent resolves to whether it is there in the DOM or not, regardless of whether it is actually visible or not. It doesn't throw an exception.

The following code can be used to avoid the exception that isDisplayed throws if the element is not found in the DOM :

function isVisible(e) {
  var deferred = protractor.promise.defer();

  if (e) {
    e.isDisplayed().then(

      // isDisplayed Promise resolved
      function(isDisplayed) {
        deferred.fulfill(isDisplayed);
      },

      // Silencing the error thrown by isDisplayed.
      function(error) {
        deferred.fulfill(false);
      }
    );
  }
  else {
    deferred.reject(new Error('No element passed'));
  }    

  return deferred.promise;
}

Even an object with both the visibility and presence can be passed while resolving, for example :

deferred.fulfill({
  visible: isDisplayed,
  present: true
});

However, this won't work well with expect statements.

Nate Anderson
  • 18,334
  • 18
  • 100
  • 135
abhishek89m
  • 261
  • 3
  • 6
5

IsPresent(): Returns TRUE if element exists in DOM(may or may not be hidden) else returns false

IsDisplayed():

  • Returns TRUE if element exists in DOM AND is visible.
  • Returns FALSE if element exists in DOM and is hidden.
  • Throws exception if element does not exist in the DOM
bsk
  • 196
  • 1
  • 7
3

If you get an error when calling isDisplayed() because the element is not on the page, i.e you get NoSuchElementError: No element found using locator, then do this:

Simply wrap .isDisplayed() in your own method and handle the unresolved/rejected promise like below:

function isTrulyDisplayed (elementToCheckVisibilityOf) {
  return elementToCheckVisibilityOf.isDisplayed().then(function (isDisplayedd) {
       return isDisplayedd;
}).then(null, function (error) {
  console.log('A NoSuchElement exception was throw because the element is NOT displayed so we return false');
  return false;
});  };

Hope this helps someone out there !

pelican
  • 5,846
  • 9
  • 43
  • 67
  • 1
    in the `.then()` part you could simply return `isDisplayed`, no need for the if/else. – Alex Szabo Aug 17 '16 at 12:50
  • That too would work. Returning isDisplayedd with 2 'd' at the end in the .then() part, so I agree. Both would work, yours is less verbose and thus better in this case. – pelican Aug 17 '16 at 19:59
  • As far as I know you should be able to scrap the whole `.then(function (isDisplayedd) { return isDisplayedd; })` part because it should pass along the result automatically to the next then function – JacobPariseau Jan 07 '17 at 05:12
1

There is a major difference between isDisplayed() and isPresent().

isDisplayed() - Your element is present on the page but it is displayed.

isPresent() - Your element is present in entire DOM of the page. Probably it can be hidden or not disabled, but present.

You should not use isPresent() when you need to validate on specific element you are searching, rather you can use it to validate some other checks based on that element's presence.

thisisdude
  • 543
  • 1
  • 7
  • 31