How to check if an element is not clickable with Protractor?

Question

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.
    })
;

Moorish

Does click() not return a promise? – Jochebed

Yes, it does. I have actually figured it out now after realising that. I'll post an answer covering it. – Moorish

Answer 1

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() {}
            )
        ;
    })
;

Moorish

It should be noted that this solution has a side effect of actually clicking the element. It would be nice if there was a solution that could return the information without the side effect. – Weider

Answer 2

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 coming to help with cases like this: https://github.com/angular/protractor/pull/1703

Lammergeier

there are other cases which could cause an elemnent no to be clickable, like if a modal dialog is opened on top of it, then even if the element is visible and enabled, wouldn't be clickable. – Lynx

Also pointer-events: none; willl make an element unclickable (protractor exception), but elem.isEnabled() will return true – Calysta

Answer 3

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;
     });
}

Drusie

Answer 4

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

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

Worked for me.

Willing

An element can be displayed but covered by another semi-opaque element which would receive the click. – Ensconce

The display property is not related to clickable property. An element can be displayed but at the same time can be disabled. So, this is not the solution. – Swee