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
Many Visual Studio Team System 2008 improvements are focused on testers: Most of
the improvements are in the Tester and Developer editions, and focus around code metrics,
Web testing, load testing and performance profiling. This article focuses on
one of the new features of Web testing: the ability to test AJAX Web sites.
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
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
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.
Jeff Levinson is the Application Lifecycle Management practice lead for Northwest Cadence specializing in process and methodology. He is the co-author of "Pro Visual Studio Team System with Database Professionals" (Apress 2007), the author of "Building Client/Server Applications with VB.NET" (Apress 2003) and has written numerous articles. He is an MCAD, MCSD, MCDBA, MCT and is a Team System MVP. He has a Masters in Software Engineering from Carnegie Mellon University and is a former Solutions Design and Integration Architect for The Boeing Company. You can reach him at Jeff.Levinson@nwcadence.com.