How to verify whether element is clickable in protractor ?

elementToBeClickable() in protractor ?

• elementToBeClickable() will verify whether element (like button,radio button,check box) is clickable or not.
• If element is not clickable in given time then it will throw Time out error.

Please check below code script:

First write xpath with help of DOM

elementToBeClickable()

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

Here we have two buttons, 1 button is in enabled state and other button is in disabled state.

Here we will check for enabled button which is also clickable.

describe('Protractor - waits - elementToBeClickable()', function () {
    beforeAll(async function () {
        await browser.get("https://keeplearners.blogspot.com/2018/03/Angular-elements.html");
    });
    it('Code script to use waits - elementToBeClickable() in protractor', async function () {
        var EC = protractor.ExpectedConditions;
        var enableButton = element(by.css("input#enable"));
        await browser.wait(EC.elementToBeClickable(enableButton), 5000);
        await console.log("Button is clickable");
    });
});

Output:

Here we are giving time out 5000ms to verify whether button is clickable or not.
If button is not clickable, it will display a time out error like below:

describe('Protractor - waits - elementToBeClickable()', function () {
    beforeAll(async function () {
        await browser.get("https://keeplearners.blogspot.com/2018/03/Angular-elements.html");
    });
    it('Code script to use waits - elementToBeClickable() in protractor', async function () {
        var EC = protractor.ExpectedConditions;
        var disableButton = element(by.css("input#disable"));
        await browser.wait(EC.elementToBeClickable(disableButton), 5000);
        await console.log("Button is not clickable");
    });
});

Output:

Here we checking the disable button,as it is not clickable it will throw time out error.

Please comment below to feedback or ask questions.