verify that element disappear in protractor

Question

For wait purposes I use such kind of wait function:

    browser.wait(function()
    {
        return browser.isElementPresent(by.repeater('recentName in recentNames').row(0));
    }, 10000);

How I can wait for element to disappear from the page? I have project which have lots of modal windows and because elements are always presented on the page I have difficulties and test failures from time to time, because I used wrong elements to wait. For example I have such element which disappear when modal window closes after clicking Enter:

<div class="modal-backdrop  in"></div>

Answer 1

Protractor's ExpectedConditions is the recommended way to do this now. You can use it in conjuction with browser.wait to create the wait condition for various states, among them invisibilityOf (if being hidden) or stalenessOf (if being removed from the DOM) an element.

browser.wait( EC.invisibilityOf( $('#selector') ), 5000 );

Answer 2

You can use a custom waitAbsent() helper function that actively waits for an element to disappear either by becoming invisible or by not being present.

That helper waits up to specTimeoutMs ignoring useless webdriver errors like StaleElementError.

Usage: add require('./waitAbsent.js'); in your onPrepare block or file.

Example to wait for the modal to disappear:

expect($('.modal-backdrop.in').waitAbsent()).toBeTruthy();

Answer 3

If the element is present on the page already, you can get down and dirty with callbacks :D , taking advantage of the fact that browser.wait() polls the page until the function passed to it evaluates to true.

browser.wait(function()
    {
        return browser.isElementPresent(by.repeater('recentName in recentNames').row(0)) //if element is already present, this line will evaluate to true
               .then(function(presenceOfElement) {return !presenceOfElement}); // this modifies the previous line so that it evaluates to false until the element is no longer present. 
    }, 10000);