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 an element until it becomes invisible. Since I could not find anything specific about it. I went ahead and came up with a solution.

var ptor = protractor.getInstance();
    ptor.wait(function() {

        return element(by.css('#my-css-here')).isDisplayed().then(function(isVisible){
            console.log('is visible :' + isVisible);
            return !isVisible;
        });

    }, 12000).then(function(){
        //do whatever you want 
});

hopefully it helps. any suggestion is welcome.

Thanks,

score 16 · Answer 1 · answered Dec 28 '14 at 15:29

16

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));

answered Dec 28 '14 at 15:29

Al Joslin

765
10
14

However, I ran into another issue, I will post another question which is related to this. – vichsu Feb 10 '15 at 00:02
here is that post. http://stackoverflow.com/questions/28422011/protractor-how-to-wait-for-when-an-element-is-removed-from-dom – vichsu Feb 10 '15 at 00:23
3

I can't find any documentation at all for `protractor.until`. What is it? What does it do? – qntm Feb 10 '16 at 11:23
`protractor.until` is undefined for me. – DarthVanger Aug 04 '16 at 18:56
4

from the protractor api, you can do: `var EC=protractor.ExpectedConditions; browser.wait(EC.not(EC.presenceOf(el));` – Machtyn Aug 30 '16 at 18:57
@qntm `protractor.until` is a reference to the `until` module in the `selenium-webdriver` package. It is used in the first example in their README file: https://www.npmjs.com/package/selenium-webdriver – eppsilon Mar 09 '17 at 01:38

score 8 · Answer 2 · answered Feb 07 '17 at 22:16

8

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

answered Feb 07 '17 at 22:16

Daniel Bressan

81
1
2

This will throw an error on EC.presenceOf(el) so it will not get the "not" – Ray Dec 18 '18 at 21:37

score 1 · Answer 3 · answered Sep 04 '20 at 14:59

1

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

answered Sep 04 '20 at 14:59

Mishel Tanvir Habib

1,112
11
16

score 0 · Answer 4 · answered Feb 19 '18 at 08:20

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);
 });
});

Protractor : wait for element to become invisible/hidden

4 Answers4

Linked