Unable to check for status indicator in protractor

Question

I'm working on protractor for end to end testing and need to check for status indicator to disappear before clicking on a button. Right now I'm unable to do it. I have tried to use invisibilityOf() as well as stalenessOf() but it's not working. It shows error ' is not clickable at point (540,823), Other element would receive the click: <#api-status-indicator>'

Here's my code in PageObject:

public isNotPresent(elem) {
    return browser.wait(protractor.ExpectedConditions.stalenessOf(elem), 5000).then(function () {
        console.log("Status indicator is not present in DOM");
        return true; //success
    },function () {
        console.log("Status indicator is present in DOM");
        return false; //Failure
    });
}

public waitForStatusIndicator(){
    console.log('in method wait for status indicator');
    return this.isNotPresent(element(by.css('#api-status-indicator'))).then((isNotPresent)=>{
        return isNotPresent;
    });
}

Here's where I'm trying to check for status indicator:

PageObject.waitForStatusIndicator().then(function (isNotPresent) {
       if(isNotPresent == true) {
       someButton.click();
       return expect(browser.getCurrentUrl()).not.toBe(browser.baseUrl + "/login");
      }
})

Where am I going wrong?

Answer 1

If the element just appears and was not in the DOM first, you first need to wait until it's present and visible before you check, that it's gone again.

Overall something like this:

public isNoLongerPresent(elem) {
    //NOTE: If any of the expected conditions don't happen, your code times out. 
    //No need for false-check or similar
    var EC = protractor.ExpectedConditions;
    browser.wait(EC.presenceOf(elem), 5000);
    browser.wait(EC.visibilityOf(elem), 5000); //Note, that visibilityOf requires presence
    return browser.wait(EC.stalenessOf(elem), 5000);
}

public waitForStatusIndicator(){
    console.log('in method wait for status indicator');
    return this.isNoLongerPresent(element(by.css('#api-status-indicator')));
}

And your spec: There is again no need for any then(). Protractor executes it synchronous and in case of any false on the way, your code would timeout.

PageObject.waitForStatusIndicator();
someButton.click();
return expect(browser.getCurrentUrl()).not.toBe(browser.baseUrl + "/login");