Question

While I am using PHPUnit to isolate and test the application code, our QA team has been testing the UI with Selenium. I have heard that the tests are taking over 10 hours to complete, which I think is way too long. My question then really concerns how to wait for AJAX calls when processing a page.

For instance, we have a page that has numerous input, which will call AJAX calls to talk to our services for data to display. We have multiple inputs that then filter subsequent select boxes as they are changed.

Divisions are all loaded, as are districts (which belong to division) then stores (which belong to districts)

Division 1
    +- District 10
        +-  Store 100
        +-  Store 101
        +-  Store 102
    +- District 11
        +-  Store 200
        +-  Store 201
        +-  Store 202
Division 2
    +- District 20
        +-  Store 300
        +-  Store 301
        +-  Store 302
    +- District 21
        +-  Store 150
        +-  Store 151
        +-  Store 2002
...

Now the select boxes are all initially loaded, so the end user may select in any of them. However, once a select box has a
selection made, the AJAX calls reload the other select boxes based on the parent’s selection. IE: Select Division 2, then
the District lists are filtered for just District 20 and 21 (using calls to a service) and the store lists are also filter
to just the stores for those districts.

If you skip selecting Division, but select a district, then the store list is refiltered to just the stores for that district,
again using our services in the back end.

My question is how to know when the AJAX call has returned from our service, and the select box has been changed? Our QA team is waiting, and then looping through the select box to check all the returned values are correct. Is there a way for them to know when the select box is done reloading, so they could then check the contents?

Obviously, I want to move most of these checks into the PHPUnit tests with Mock objects to validate our services work, but our QA team still wants to validate that the actual rendered results match.

Any suggestions would be appreciated.

Answer 1

pinpointing the question “How to wait till Ajax calls are completed “

There are 2 different approaches in this scenario and will list down with pros and cons.

Approach : 1
Add a piece of code with a Global variable which indicates how many Ajax calls are pending, hence can access that same Variable in selenium texts as well.

$.activeAjaxRequestCount = 0;

$().ajaxSend(function() {
  $.activeAjaxRequestCount++;
  // register lazily to make sure it's the last handler of 
  // ajaxError event and get executed after all production handlers
  if(!$._ajaxErrorHandlerAdded) {
    $().ajaxError(function() {
      $.activeAjaxRequestCount--;
    });
    $._ajaxErrorHandlerAdded = true;
  }
})
.ajaxSuccess(function() {
  $.activeAjaxRequestCount--;
});


/* C# code in selenium tests */

// run this js code somehow before selenium test
// to turn off animation of jQuery
Selenium.executeScript("$.fx.off = true");

private void WaitComplete(Action action, int timeout)
{
  // do default selenium action
  action();
  // wait for active ajax request count becomes zero, 
  // none ajax selenium action will return immediately
  selenium.WaitForCondition("selenium.browserbot.getCurrentWindow();
                             window.jQuery.activeAjaxRequestCount===0;", 
                             timeout.ToString());
}

Pros: Completely client side

Cons: Hard to pinpoint which ajax call completed out of Multiple ajax calls fired from a single page. Hence in this approach…you need to wait until all ajax call are completed, though data might be loaded already on page.

Reference : https://gist.github.com/111525

Approach 2:

In this Approach, we wait for the ajax call to be successful and it shows/displays data. Presenting in Selenium way: We wait the execution of tests till a particular HTML entity/Data appears on the Page.

var Waiting = new WebDriverWait(X, TimeSpan.FromSeconds(5));
var Data_Loaded = Waiting.Until(driver => driver.FindElement(By.Id("Divisionxyz")));

Pros: Simple when multiple ajax calls are fired for fetching data over a single page.

Cons: When Dynamic elements/Objects are loaded, this won’t work.

Hope this helps…All the best buddy 🙂