How to test jQuery enabled Apps using JSON with Visual Studio

Note: This artcile is a repost of one written by Andreas Grabner — all credit goes to him for his excellent artcile

Visual Studio Team System offers a nice Web- and Load-Testing Feature that allows you to easily create tests to verify your web application’s functionality as well as verifying how it performs under load. Web Applications that make use of AJAX Frameworks likejQuery execute additonal web requests to request information from the Web Server without causing the browser to reload the complete page. JSON is one of the formats that is used to exchange information between the Web Server and the AJAX Framework running in the browser.

Challenges with AJAX in Web- and Load-Testing

Asynchronous calls executed by AJAX frameworks can be very hard to deal with for web- and loadtesting tools? Why? Because those requests can most often not easily be correlated to a Page Request done by the browser and therefore its not easy to create a nice script that shows the sequential logic of all user interactions.
The next problem with AJAX requests is that its hard to verify if the simulated request produced the correct result and whether the result of one request needs to feed a subsequent request. An example for this would be a login call that returns a user id. This user id needs to be used for subsequent calls. If the testing tool doesn’t understand JSON and is not able to automatically detect the dependency between those calls its up to the test engineer to add parsing statements for the first call and use the parsed value in subsequent calls.

How to test JSON with Visual Studio?

I’ve downloaded the following ASP.NET MVC Sample App (KIGG) that uses jQuery and JSON. My task was to create a web script with Visual Studio that creates new user accounts. In order to do that a user needs to sign on to the page with username, password and email. The user account can then be activated by following an activation link that is sent via email.

Necessary steps for the Test Script

  • Execute the request to sign up a new user by providing username, password and email
  • Get the information about the activation link
  • Execute the request to activate the user account

The default procedure for the activation uses an email that is sent out. As I didn’t want to bother with email during my web testing I extended the JSON message that is returned when signing up a new account to include the information about the activation link. Having that information as part of the response allows me to finish all the steps.

How to deal with JSON messages?

Here is the JSON message that is responded by the user signup request:

{"isSuccessful":true,"userId":"9JU51KDxp0-3Llw1BU2h7w","errorMessage":null}

 

The userId is the value that I am interested in. This is the value I need to use to call the Activate page. Another interesting value is the isSuccessful property. This allows me to add additional logic to my web script. I can verify if the sign-up request was successful. In order to do all this I need to extend Visual Studio Web Testing by writing my own Extraction andValidation Rule. Visual Studio offers an interface to provide custom implementations for value parsing and validation. Here is my implementation for the ExtractorRule using a helper class that parses the JSon string:

 

public override void Extract(object sender, Microsoft.VisualStudio.TestTools.WebTesting.ExtractionEventArgs e) {
  NameValueCollection jsonProperties = JSonHelper.ParseJSonString(e.Response.BodyString);
  string propertyValue = jsonProperties.Get(JSonPropertyName);
  if (propertyValue != null) {
    e.WebTest.Context.Add(ContextParameterName, propertyValue);
    e.Success = true;
  } else
    e.Success = false;
}

 

In a similar way I implemented the ValidationRule. Using it all in my web test allows me to specify the Extractor and Validation Rule in my web test.


 

Conclusion

With Visual Studios extensibility mechanisms its easy to build support for those emerging technologies like jQuery and JSON. Let me know if you need the library that implements the two extension Rules.