It's trivial to test if an element is clickable with Protractor, but I'm stuck scratching my head trying to figure out how to check if an element is not clickable.

I've attempted to wrap the click function in a try/catch so that when an error is thrown when trying to click it should catch it and let the test pass; however, this does not work.

Here is my code for the method that does the check:

return this.shouldSeeDisabledFunds()
    .then(function() {
        var clickable = true;

        try {
            fundsElem.first().click();
        } catch (e) {
            clickable = false;
            console.log(clickable);
        } finally {
            console.log(clickable);
        }

        console.log(clickable);

        // All the way through, clickable is still true, and the console log in the
        // catch is not called. I believe this is because click is asynchronous.
    })
;

It's trivial to test if an element is clickable with Protractor, but I'm stuck scratching my head trying to figure out how to check if an element is not clickable.

I've attempted to wrap the click function in a try/catch so that when an error is thrown when trying to click it should catch it and let the test pass; however, this does not work.

Here is my code for the method that does the check:

return this.shouldSeeDisabledFunds()
    .then(function() {
        var clickable = true;

        try {
            fundsElem.first().click();
        } catch (e) {
            clickable = false;
            console.log(clickable);
        } finally {
            console.log(clickable);
        }

        console.log(clickable);

        // All the way through, clickable is still true, and the console log in the
        // catch is not called. I believe this is because click is asynchronous.
    })
;

• javascript
• node.js
• protractor
• functional-testing

• 1 Does click() not return a promise? – Ben Fortune Commented Jan 9, 2015 at 12:35
• Yes, it does. I have actually figured it out now after realising that. I'll post an answer covering it. – Seer Commented Jan 9, 2015 at 12:36

4 Answers 4

I have found a solution that works for this. As click() returns a promise you can simply .then off of it and throw in the successful click handler and override the catch handler to do nothing which makes the test pass if the element is not clickable.

return this.shouldSeeDisabledFunds()
    .then(function() {
        fundsElem.first().click()
            .then(
                function() {
                    throw "Can click Funds element that should be disabled";
                },
                function() {}
            )
        ;
    })
;

Maybe not applicable in your case, but a better way to check if an element is clickable is checking if it is both visible and enabled: elem.isDisplayed() and elem.isEnabled(). This way you don't accidentally click on buttons when you're not supposed to.

Fyi, there will be a library ing to help with cases like this: https://github./angular/protractor/pull/1703

There are actually two methods to check it.

1) Using ExpectedConditions

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to not be clickable.
browser.wait(EC.not(EC.elementToBeClickable($('#abc'))), 5000);

If found to be clickable, it will return error.

2) Using protractor's isEnabled, isDisplayed and isPresent

So as far as my understanding goes, you can create isNotClickable, which will return false only if element is present, displayed or enabled and true otherwise:

function isNotClickable(element) {
    return element.isPresent().then((isPresent) => {
        if (isPresent) {
            return element.isDisplayed().then((isDisplayed) => {
                if (isDisplayed) {
                    return !element.isEnabled();
                }
                return true;
            });
         }
         return true;
     });
}

To verify Clickable : element.isDisplayed().toBe(true)

Not Clickable : element.isDisplayed().toBe(false)

Worked for me.