Design of Selenium tests for ASP.NET: Testing AJAX. Part 2. Wait for JQuery

While testing sites with AJAX it is always hard to catch a moment when asynchronous request is finished. I already described function which can wait for text in label. But this approach fails when it comes to more complex behavior. For example:

On the picture above use case to add users is shown. When user clicks on add button, the system sends data to server and updates grid with users.

HomeMediator.prototype.AddUser = function(name, password)
{
  var me = this;

  this.services.AddUser(name, password,
      function (msg) {
          if(msg.d.Success)
          {
              me.BindUsers();
          }
          else
          {
              me.addUserWidget.SetError(msg.d.Message);            
          }
      });
};

HomeMediator.prototype.BindUsers = function()
{
  var me = this;

  this.services.GetAllUsers(function (users) {
        me.userListWidget.Render(users.d);
  });  
};

Function which executes asynchronous request on server is implemented using JQuery “ajax” function and luckily it has global variable “active” which is set to true until request is done. It is possible to use this variable to force tests to wait AJAX before verification.

 public void ClickAndWaitForJQuery(Action action)
      {
          action();
          WaitForJQuery();
      }

 public void WaitForJQuery()
      {
          _selenium.WaitForCondition("selenium.browserbot.getCurrentWindow().jQuery.active == 0;", Timeout);
      }

Example of usage in tests:

 public HomePageFlow ClickOnAddUser()
      {
          Navigator.ClickAndWaitForJQuery(_home.ClickAddUser);

          return this;
      }

All sources are available in design-of-selenium-tests-for-asp-netsample solution.