How to check if an element is connected using Protractor?

Question

It is trivial to check if an element can be clicked using Protractor, but I got stuck scratching my head trying to figure out how to check if an element is clickable.

I tried to wrap the click function in try / catch, so that if an error occurs while trying to click it, you need to catch it and pass the test; however this does not work.

Here is my code for the method that performs 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. }) ; 

Answer 1

I found a solution that works for this. Since click() returns a promise, you can simply .then disable it and throw away the successful click handler and override the catch handler to do nothing, which forces the test to pass if the item is not clickable.

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

Answer 2

Perhaps this does not apply in your case, but the best way to check if the element is clickable is to check if it is visible and included: elem.isDisplayed() and elem.isEnabled() . Thus, you do not accidentally press buttons when you should not.

Fyi, a library will appear that will help in such cases: https://github.com/angular/protractor/pull/1703

Answer 3

There are actually two ways to verify this.

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 it is determined that it is clickable, it will return an error.

2) Using protractor isEnabled , isDisplayed and isPresent

So, as far as I understand, you can create isNotClickable , which will return false only if the 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; }); } 

Answer 4

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

Not available for clicks: element.isDisplayed (). toBe (false)

Worked for me.