How to wait in protractor till the element is enabled

Question

Protractor is failing when trying to click a button. Initially the button will be in disabled status (after sometime it will be enabled) and protractor thinks that the button is ready and clicking on the button and failing.

So i want the protractor script to wait till the button is enabled. I have tried below, but it didn't work. Can someone please post the complete code to wait for the element to be enabled?

expect(browser.wait(function(){return browser.driver.isElementPresent(by.id('paynow-info-btn'))}, 10000));

Solution

There is a very much suitable Expected Condition - elementToBeClickable - it would wait for an element to be both visible and enabled:

var elm = element(by.id('paynow-info-btn'));
var EC = protractor.ExpectedConditions;

browser.wait(EC.elementToBeClickable(elm), 5000);
elm.click();

Comments

[prav kum]

Working perfect now. Thanks for the answer.

[bob.mazzo]

question for me today is: how can I ultimately determine whether elem is clickable or not prior to elm.click() ? I'm reading here, but it's not clear protractortest.org/#/…

[alecxe]

@bob.mazzo interesting, do you refer to that "elementToBeClickable" is not exactly determining "clickability" but rather enabledness and visibility?..

[bob.mazzo]

@alecxe, yes my issue with it. How do I use EC.elementToBeClickable's return value to say "yes, my test passed. This button is clickable !" Perhaps I should open a new post...

[alecxe]

@bob.mazzo well, you can actually leave the browser.wait() as is - it would throw a timeout error if the element is not visible and enabled. Or, you can have 2 expectations: one that uses isEnabled() and the other - that uses isDisplayed()..expect them to be true..

[bob.mazzo]

@alecxe - I see what you mean. The isEnabled() method should do the trick for me. +1 once again, my friend. Thank you.

[alecxe]

@bob.mazzo sure, no problem. Thanks for interesting questions!

[Corbfon]

@alecxe I use this pattern many times in my test suite. Occasionally, Protractor thinks the button is clickable and clicks it, but it appears to botch the click. I see the button get focus, but it does not even take the styles that the button should after being clicked. Ever had anything like this happen? Is it possible that the browser.wait isn't resolving before the button is being clicked?

[Nugen.exe]

@Corbfon browser.wait(EC.elementToBeClickable(elm), 5000).then(() => {elm.click();};

[Corbfon]

@Nugenrules thanks for the reply. We've since begun simply checking that the button exists before clicking it and that seems to work, but I've got another test case to write and will try that at the next available opportunity!

[wolfsbane]

I'm using protractor for a non-angular page. The expected conditions don't seem to work with non angular pages. Instead, I'm using protractor.until.elementIsNotVisible to check when an element is not visible. Is there a protractor.until.elementIsNotClickable available in protractor?