8

I'm writing WatiN tests to test an Ajax web application and have come across a timing issue with Ajax requests.

After an Ajax request is triggered by an action on the page, I'd like WatiN to wait until the request is complete before validating that the page was updated correctly.

I have a feeling that the solution will involve eval-ing JavaScript to register handlers for $.ajaxStart and $.ajaxComplete to track whether requests are in progress. I'll dig into that shortly, but wanted to see if anybody else has already solved this. Seems like it would be a common problem with Ajax testing.

3 Answers 3

18

I've created a few WatiN Browser extension methods to solve this problem, but am still interested in other solutions.

The InjectAjaxMonitor method creates a javascript global variable that attaches to the ajaxStart and ajaxComplete events to track the number of requests in progress.

Whenever you need to wait for AJAX requests to complete before moving on, you can then call browserInstance.WaitForAjaxRequest();.


public static class BrowserExtensions
{
    public static void WaitForAjaxRequest( this Browser browser )
    {
        int timeWaitedInMilliseconds = 0;
        var maxWaitTimeInMilliseconds = Settings.WaitForCompleteTimeOut*1000;

        while ( browser.IsAjaxRequestInProgress()
                && timeWaitedInMilliseconds < maxWaitTimeInMilliseconds )
        {
            Thread.Sleep( Settings.SleepTime );
            timeWaitedInMilliseconds += Settings.SleepTime;
        }
    }

    public static bool IsAjaxRequestInProgress( this Browser browser )
    {
        var evalResult = browser.Eval( "watinAjaxMonitor.isRequestInProgress()" );
        return evalResult == "true";
    }

    public static void InjectAjaxMonitor( this Browser browser )
    {
        const string monitorScript =
            @"function AjaxMonitor(){"
            + "var ajaxRequestCount = 0;"

            + "$(document).ajaxSend(function(){"
            + "    ajaxRequestCount++;"
            + "});"

            + "$(document).ajaxComplete(function(){"
            + "    ajaxRequestCount--;"
            + "});"

            + "this.isRequestInProgress = function(){"
            + "    return (ajaxRequestCount > 0);"
            + "};"
            + "}"

            + "var watinAjaxMonitor = new AjaxMonitor();";

        browser.Eval( monitorScript );
    }
}
4
  • 1
    This solution works well unless one or more ajax requests begin before the monitor javascript is injected (at which point the counter is no longer accurate). I don't know how to inject the monitor earlier in the process from WatiN. It may be that the best bet is to conditionally include the monitor right after jquery is included when running tests. Commented Mar 9, 2010 at 22:47
  • I put the global ajax event handlers in my application's masterpage. Also I only keep a semaphone bit instead of a counter: lebobitz.wordpress.com/2011/03/06/… Commented Mar 11, 2011 at 3:16
  • 2
    One problem with your code though - if the website doesn't have jQuery support (as in my case) - you might want to "inject it" first. Just add this code before the "monitor script". const string jquerry = @"var element1 = document.createElement('script');element1.src = 'ajax.googleapis.com/ajax/libs/jquery/1.8.0/…;"; browser.Eval(jquerry);
    – Alex
    Commented Aug 27, 2012 at 15:47
  • in regards to @Alex comment, make sure you append the element too. document.body.appendChild(element1);
    – weeksdev
    Commented Feb 10, 2016 at 14:29
6

This solution doesn't work very well because .ajaxStart is called only for the first Ajax request, while .ajaxComplete is called each time an ajax request is finished. if you run a this simple code in your console :

$.ajax({url:"/"}); $.ajax({url:"/"})

and add some logging in the .ajaxStart and .ajaxComplete handler methods, you can see that .ajaxStart handler will be called only once and .ajaxComplete handler twice. So ajaxRequestCount will become negative and all your design is screwed.

I suggest that you use .ajaxSend instead of .ajaxStart if you want to keep your design.

Another solution would be to use .ajaxStop instead of .ajaxComplete, but by doing so, you don't need the ajaxRequestCount, you only need a boolean that say if there are ajax requests running behind the scene.

Very useful information can be found : http://api.jquery.com/category/ajax/global-ajax-event-handlers/

Hope this helps.

1
  • Good call on the misuse of .ajaxStart. That is a bug in my solution. Using .ajaxStop would be simpler as well. Thanks! Commented Dec 14, 2010 at 19:58
3

I just ran into this issue myself while working on some tests using WatiN. I found that in version 1.1.0.4000 of WatiN (released on May 2nd 2007 (latest version being 2.0 RC2 from December 20th 2009)), it is claimed that better support for handling Ajax in tests were added:

To better support testing of AJAX enabled websites, this release adds some more options to your toolbox.

A new method is added that will wait until some attribute has a certain value. This might be handy in situations where you need to wait until a value of an element gets updated.

Example:

// Wait until some textfield is enabled
textfield.WaitUntil("disable", false.ToSting, 10);
// Wait until some textfield is visible and enabled
textfield.WaitUntil(new Attribute("visibile", new BoolComparer(true)) && new Attribute("disabled", new BoolComparer(false)));

See the link to the release notes for more information.

I haven't looked into it in detail yet, so I cannot tell in which cases it might be useful or not. But thought it could be worth mentioning in case anybody else comes across this question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.