How to wait for an element is visible in protractor ?

visibilityOf() in protractor ?

• visibilityOf() will verify the element is present on DOM of a page and it should be visible.
• Visibility means that element is displaying and it should has also height and width greater than 0 (zero).
• visibilityOf() is just opposite of invisibilityOf() in protractor.

Please check below code script:

First check the web element in DOM

visibilityOf() 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 first button which is displaying on UI and present in DOM also.

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

Output:

wait for visibility of element in protractor

Please comment below to feedback or ask questions.