Inside VSTS

Testing AJAX Applications with VSTS 2008

Jeff walks you through the new method of validating AJAX code in Visual Studio Team System 2008 (no Fiddler required!).

• By Jeff Levinson
• 10/18/2007

In version one of Team System, if you tried to record a Web test on a site that had AJAX sections, the calls to the server were not recorded. To record them you had to use Fiddler and import the resulting script into Visual Studio. Many people didn't know about this solution; those that did realized it was problematic at best.

For this article I've created a simple Web page which has a Script Manager and an Update Panel. In the Update Panel there is a textbox which accepts a value, a submit button and a label which displays "Welcome " plus the value entered in the textbox. This is processed on the server via a postback in the button click event (see Figure 1 for a screen shot).

[Click on image for larger view.]

Figure 1. Example AJAX App

When the test is recorded, four different URLs are listed: the original default.aspx page call, two ScriptResource.axd calls (the browser calling for the javascript to be loaded on the client), and a last call to default.aspx that is made when you click the submit button. So far, so good -- but we haven't validated that the page worked the way it was supposed to work. So how do you validate data that comes back from an update panel (or any XMLHttpRequest)? It turns out this is a bit more difficult to do.

If you look at the results of the test, specifically for response from the submit button, you will see the text in Listing 1. This is obviously not the most helpful information for validating that the text you wanted displayed was displayed. You cannot use a form field validation because the data that comes back is not in the form of a valid HTML document. In fact, there is only one way to validate an AJAX response with the built in validation rules: Use the FindText validation rule and search for the value you entered. Or you could write your own…

Create a new Class Library project and add a reference to Microsoft.VisualStudio. QualityTools.WebTestFramework. The code for this validation rule is shown in Listing 2. Without going into too much detail about the class, you should focus on the regular expression: "(?<field>id=\"" + _control + "\".*>)(?<value>.*)<"

While this isn't a tutorial on regular expressions, it's important to understand what's happening here in case you need to make changes (I will caveat this by saying that this has worked with all of my tests so far, but there is always a possibility you will come across a situation I haven't!). The "(?<field>" part of the regular expression says to find (or capture in regex parlance) text which starts with "id=" + the name of the control you enter, and any characters which come after until a right arrow (">") is found in a group called field. The next part "(?<value>.*)<" says to capture any text which comes after the right arrow and end at the next left arrow ("<"). The text captured (excluding the left arrow) is stored in another group called value.

The code simply tries to match this expression to the response. You could even change this to actually look for the value as part of the regular expression and, if no matches occur, just set the IsValid to false. To do this you could change the regular expression to "(?<field>id=\"" + _control + "\".*>" + _value + "<" and re-write the Validate method as shown in Listing 3.

To implement the validation rule, simply add a reference to the assembly to the project which contains your Web tests and it will show up in the list of validation rules.

This simple validation rule plus the ability of Visual Studio Team System 2008 to record AJAX requests and responses should enable you to quickly and easily validate the results of your AJAX tests.