Protractor, with isDisplayed() I get NoSuchElementError: No element found using locator

Question

In protractor 2.0, I am checking in a expect() if one element is displayed. I expect a false, but the weird thing is that I get following error:

NoSuchElementError: No element found using locator: By.id("userForm")

My code is:

describe('closeModal', function() {
    it('should close the alert that appears after registration.', function(){
        element(by.id('closeAlertModalButton')).click();
        expect(element(by.id('userForm')).isDisplayed()).toBeFalsy();
    });
});

I understand that I get that error because element is not longer on the page (is what I want to confirm), but shouldn't I get a false and not a error?

Answer 1

isDisplayed() would check if an element is visible or not, but you need to check whether an element is present in DOM or not, use isElementPresent() or isPresent():

expect(browser.isElementPresent(element(by.id('userForm')))).toBe(false);
expect(element(by.id('userForm')).isPresent()).toBe(false);

See also:

• How do I test if an img tag exists?
• Use element by css to check if element exists in Protractor

Answer 2

This error is part of WebDriver behavior. For such cases you should better use isPresent or isElementPresent

Answer 3

If element visible do A if not visible do B, disregard exception if element not found:

element.isDisplayed().then(function(visible){
    if (visible) {
        // do A when element visible
    }else{
        // do B when element not visible 
    }
}, function () {
    //suppress exception if element is not found on page
});

Answer 4

.isDisplayed() assumes the element is present (exists in the DOM)

so if you do

expect($('[ng-show=saving]').isDisplayed()).toBe(true);

but the element is not present, then instead of graceful failed expectation, $('[ng-show=saving]').isDisplayed() will throw an error causing the rest of it block not executed

Solution

If you assume, the element you're checking may not be present for any reason on the page, then go with a safe way below

/**
*  element is Present and is Displayed
*  @param    {ElementFinder}      $element       Locator of element
*  @return   {boolean}
*/
let isDisplayed = function ($element) {
  return (await $element.isPresent()) && (await $element.isDisplayed())
}

and use

expect(await isDisplayed( $('[ng-show=saving]') )).toBe(true);