How to check/wait element is not visible in protractor ?

invisibilityOf() in protractor ?

• invisibilityOf() will checking that an element is either invisible or not present on the DOM
• invisibilityOf() is just opposite of visibilityOf() in protractor.

Please check below code script:

First check the web element in DOM

invisibilityOf() in protractor

Navigate to https://keeplearners.blogspot.com/2018/03/Angular-elements.html

Here we have two buttons, 1 button is present and other button is not present.

We will verify the second button which is not displaying on UI but present in DOM.

describe('Protractor - waits - invisibilityOf()', function () {
    beforeAll(async function () {
        await browser.get("https://keeplearners.blogspot.com/2018/03/Angular-elements.html");
    });
    it('Code script to use waits - invisibilityOf() in protractor', async function () {
        var EC = protractor.ExpectedConditions;
        var invisibility = element(by.css("input#not-displaying"));
        await browser.wait(EC.invisibilityOf(invisibility, 5000));
        await console.log("Verified that element is not displaying on UI or not present in DOM");
    });
});

Output:
invisibilityOf() in protractor
Please comment below to feedback or ask questions.