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

问题

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

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

回答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

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