Difference between isDisplayed() and isPresent() in protractor ?

Different between isDisplayed() and isPresent() in protractor ?

isDisplayed(): 

• It will verify whether element is displaying on UI or not.
• It will check the visibility of element on UI and it throws an exception if element is not in DOM.

isPresent(): 

• It will verify whether element is present in DOM or not
• It will not check the visibility of element on UI and it doesn't throw an exception.

Please check below code script:

First write xpath with help of DOM

Difference between isPresent() and isDisplayed()

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

Here we have 1 hidden button which is not displaying on UI but present in DOM.

describe('Protractor - difference between isDisplayed() & isPresent()', function () {
    it('Code script for difference between isDisplayed() & isPresent()', function () {
        browser.get("https://keeplearners.blogspot.com/2018/03/Angular-elements.html");
        var hiddenButton = element(by.css("input#not-displaying"));

        var ispresent = isElementPresent(hiddenButton);
        ispresent.then(function (value) {
            console.log("using isPresent()=" + value);
        });

        var isdisplay = isElementDisplay(hiddenButton);
        isdisplay.then(function (value) {
            console.log("using isDisplayed()=" + value);
        });
    });

    function isElementPresent(element) {
        return element.isPresent().then(function (present) {
            console.log("is Element present=" + present);
            return present;
        });
    }

    function isElementDisplay(element) {
        return element.isDisplayed().then(function (display) {
            console.log("is Element displayed=" + display);
            return display;
        });
    }
});

Output:

difference between isDisplayed() & isPresent()

As element is not displaying on UI,

isDisplayed() will return false,

isPresent() will return true as element matcher found in DOM.

Please comment below to feedback or ask questions.