How to check whether element is displaying or not in protractor ?

isDisplayed() in protractor ?

>> In protractor, isDisplayed() method is used to check whether element is currently displayed or not on UI.

>> isDisplayed() resolves to whether the element is visible or not, but throws an exception if it is not in the DOM.

>> isDisplayed() will return boolean values (true/false).
>> If value is true then element is displayed and if value is false then element is not displayed.

Please check below code script:

First write xpath with help of DOM

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

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

describe('Protractor - use isDisplayed()', function () {
    it('Code script to how to use isDisplayed()', function () {
        browser.get("https://keeplearners.blogspot.com/2018/03/Angular-elements.html");
        var displayButton = element(by.css("input#displaying"));
        var isdisplay = isElementDisplaying(displayButton);
        isdisplay.then(function (value) {
            console.log("Is First button displaying=" + value);
        });

        var notdisplayButton = element(by.css("input#not-displaying"));
        var isnotdisplay = isElementDisplaying(notdisplayButton);
        isnotdisplay.then(function (value) {
            console.log("Is second button displaying=" + value);
        });
    });

    function isElementDisplaying(element) {
        return element.isDisplayed().then(function (display) {
            console.log("is Element displaying=" + display);
            return display;
        });
    }
});
Output:
It will return whether button(s) is displaying or not.
isDisplayed()
Please comment below to feedback or ask questions.