The popularity of Web applications that use AJAX (Asynchronous JavaScript And XML) technology has increased steadily over the past several months. When correctly written, AJAX can yield big improvements in performance and user experience compared with non-AJAX Web applications. However, because AJAX Web applications work asynchronously, traditional test automation techniques (which are synchronous) generally don't work.

 

A traditional, non-AJAX approach posts an HTTP request to the Web server, passing request information in a Form object or a query string. Without AJAX technology, the map application works but has two drawbacks. First, because the HTTP request-response mechanism is synchronous, while the request is being processed by the Web server, the user loses most ability to interact with the Web application until the response is returned to the client. Second, in most cases the HTTP request causes an entire response page to be created, so when the response is received by IE, the entire page is repainted. This leads to an annoying page flicker effect if the request-response is relatively quick, or even to a page blank-out effect if the action is slower. AJAX solves both these problems. AJAX works by sending an XMLHTTP request instead of an HTTP request. XMLHTTP requests are asynchronous. So while the XMLHTTP request is being processed behind the scenes, the user can continue interacting with the Web application. And when the XMLHTTP response is received, the IE DOM can be used to repaint only the area of the Web page which holds the new data, rather than having to repaint the entire page.

 

Most traditional test automation techniques just don't work with AJAX Web applications. The most fundamental way to test a Web application's functionality is to programmatically send an HTTP request which corresponds to the request generated by some user input to the Web server, fetch the HTTP response, and examine the response to determine a pass-fail result. This approach doesn’t work for AJAX applications because they use special XMLHTTP requests. Another traditional approach is to use JavaScript to manipulate the IE DOM to send a request to the Web server, wait until the onload event fires signaling the response has been received by the client and has been loaded, then use JavaScript and the IE DOM to examine the new state of the Web page to determine a pass-fail result. The problem with this approach is that because AJAX works asynchronously you can't use the onload event to tell when the response has been received by the client. But you can modify this approach to create lightweight test automation for AJAX applications. Instead of using the onload event to signal when a response has been received, you can write code which watches the application for some expected change in application state and then transfers control to a callback function. I describe the process in detail in the February 2007 issue of MSDN Magazine which will appear online at http://msdn.microsoft.com/msdnmag/issues/07/02/TestRun/default.aspx in a few weeks.