Protractor : wait for element to become invisible/hidden

Question

I saw other protractor related post mentioning about how to wait for an element to become visible. However, recently, I ran into an opposite use case. I wanted to wait for a

Answer 1

From @Machtyn This should be the correct answer: var EC=protractor.ExpectedConditions; browser.wait(EC.not(EC.presenceOf(el)), someTimeoutInMilli);

Answer 2

None of the solution working for me. Please take a look at below code:

var protractor = require('protractor');

describe('Testing', function () {
it('Should show the settings button', function () {
    var EC = protractor.ExpectedConditions;
    var settings = $('.settings');
    var isSettingVisible = EC.visibilityOf(settings);

    browser.get('http://localhost:8080/#/edomonitor');
        console.log("--------------------welcome 1-------------------");

    protractor.browser.wait(isSettingVisible, 10000, "Searching for settings").then(() => {
       console.log("waiting complete");
    }, (error) => {
       console.log(error);
    })
    expect(2).toEqual(2);
 });
});

Answer 3

Protractor now has invisibilityOf function built in.

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to be no longer visible on the dom.
browser.wait(EC.invisibilityOf($('#abc')), 5000);

Read more for details

Answer 4

Using the elementexplorer (https://github.com/angular/protractor/blob/master/docs/debugging.md) I looked at the protractor object and found an answer that is working wonderfully for me:

var el = element(by.id('visibleElementId'));
browser.driver.wait(protractor.until.elementIsNotVisible(el));