How to have WebDriver wait until Sencha AJAX call is complete?

Question

I have a page I am testing with Selenium WebDriver.

The underlying page uses the Sencha JavaScript library. I have an issue where during my test, I enter a value in a field, then there is an AJAX call that validates that field. If it is valid, nothing on the page changes. The field would get highlighted in red if the value was invalid.

The problem is that my script tries to leave the page before this call is complete. I know I could just have it wait an explicit amount of time, but that is rarely a good idea.

Currently, I have these options set for my driver (this is Java. timeout is 120):

int timeout = 120;
driver.manage().timeouts().implicitlyWait(timeout, TimeUnit.SECONDS);
driver.manage().timeouts().setScriptTimeout(timeout, TimeUnit.SECONDS);
driver.manage().timeouts().pageLoadTimeout(timeout, TimeUnit.SECONDS);

I know I can wait for jQuery AJAX calls more or less like this:

JavascriptExecutor executer = (JavascriptExecutor) driver;
Boolean jqueryDone = (Boolean) executer.executeScript("return jQuery.active == 0");

and wrap a Wait around that condition.

Is there an equivalent check I can make against Sencha/ExtJS?

Answer 1

Ah ha! Found it. To wait until an AJAX call is complete when the site uses ExtJS check the following javascript function:

return Ext.Ajax.isLoading();

It will be false when all AJAX calls have finished. So, then my code becomes:

JavascriptExecutor executer = (JavascriptExecutor) driver;
Boolean ajaxRunning = ((Boolean) executer.executeScript("return Ext.Ajax.isLoading();"));

Answer 2

Maybe pretty hacky, but maybe also worth consideration. You said, the only feedback the user gets is the mouse cursor changing to 'busy' state during the ajax request and then changing back to 'normal'.

Maybe that's enough for testing. You can try to get the current pointer value using JavaScript and wait until it turns from auto, to wait (after initiating the request) and back to auto (when done) auto is default, maybe you have something different set by default.

You can retrieve the value with:

window.getComputedStyle(document.body).cursor

Example: http://jsfiddle.net/2fVDP/

Maybe it's not the whole body that gets the cursor style applied. You have to adjust the dom node then.