Protractor invisibilityOf flakiness, throwing NoSuchElementError

[hgted]

I am testing a non angular app where I have a login helper function in my tests similar to the following:

function login() {
        return waitUntilVisible($('#txtUsername'))
            .then(function () {
                $('#txtUsername').sendKeys('tom');
            })
            .then(function () {
                $('#txtPassword').sendKeys('*');
            })
            .then(function () {
                $('#btnLogin').click();
            })
            .then(function () {
                // this is the flaky line
                return browser.wait(protractor.ExpectedConditions.invisibilityOf($('#txtUsername')), 20000, 'Element never disappeared');
            });
    }

Where browser.wait(protractor.ExpectedConditions.invisibilityOf($('#txtUsername')), 20000, 'Element never disappeared') waits for a bootstrap modal containing the login form to close. However, this line is proving to be very flaky, occasionally failing with:

NoSuchElementError: No element found using locator: By.cssSelector("#txtUsername")

Or even:

StaleElementReferenceError: stale element reference: element is not attached to the page document

My first though was that the modal was closing before the line was called, however, the docs for invisibilityOf suggest it should handle the element not being present, stating it as:

An expectation for checking that an element is either invisible or not present on the DOM.

How can I make this line robust?

[hgted]

Switching from invisibilityOf tostalenessOf has done the trick.

[FaustXVI]

I have the same issue with an angular app.
Looking at the code (https://github.com/angular/protractor/blob/3.0.0/lib/expectedConditions.js#L332), invisibilityOf is defined as :

   return this.not(this.visibilityOf(elementFinder));

Which seems to be a good idea but visibilityOf is defined as :

  return this.and(
    this.presenceOf(elementFinder),
    elementFinder.isDisplayed.bind(elementFinder));

So, if the element is no more prensent, invisibilityOf fails because visibilityOf can't found the element.

I think visibilityOf should be defined as :

  return this.or(
    this.stalenessOf(elementFinder),
    this.not(elementFinder.isDisplayed.bind(elementFinder)));

But I'm afraid elementFinder.isDisplayed won't work for the same reason. I'll try to get some time to fix that and make a PR but I can't promise anything…