How expected condition 'isClickable' works in Protractor

Question

I am trying to click a button as defined below:

<button _ngcontent-xjt-c6="" class="ef-ui-btn-inline-sm ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" icon="pi pi-chevron-right" id="select-file-button" pbutton="" type="button" ng-reflect-icon="pi pi-chevron-right">
  <span aria-hidden="true" class="ui-button-icon-left ui-clickable pi pi-chevron-right"></span>
  <span class="ui-button-text ui-clickable">ui-btn</span>
</button>

If I try just click, everything works fine. The button gets clicked:

element.click();

I am getting an element not clickable exception when using the code below though:

let condition = await EC.elementToBeClickable(element);
console.log(condition)
await browser.wait(condition, 5000, "Not available for click within 5sec");
await element.click();

Could someone explain why the expected condition is not able to tell that the element is clickable?

Answer 1

Can you try one of these and let us know. Since you are unable to click on the element.

1. use - browser.executeScript()
2. or use actions command , move to the button and then click (I know this sounds weird, but please try once).

Some reference URL:

1. https://www.protractortest.org/#/api?view=webdriver.WebDriver.prototype.executeScript

2. http://www.webdriverjs.com/javascript-executor-protractor/

Answer 2

please try the following code:

const EC = protractor.ExpectedConditions;
let condition = await browser.wait(EC.elementToBeClickable(element), 5000, "Not available for click within 5sec");
console.log(condition)
await element.click();

here console.log(condition); will print either TRUE or FALSE, but if your conditions fail then it will print "Not available for click within 5 sec"