Tracking viewstate using a webtest playback add-in

One of the coolest features I think we’ve added in Visual Studio 2010 is the ability to add your own tabs into the webtest playback view.  Extending the user interface in this way allows you to do data analysis and have it pop up right in front of you in whatever format you want.  No more exporting to excel or whatever your favorite analysis tool is, just compile everything you one in one place and voila!

That being said, I have been told that it can be difficult to grok at first glance.  So, I wanted to post a sort of ‘how to’ in order to get one of these working.  A colleague of mine suggested that I could use this forum to demonstrate how to keep track of something that affects the performance of many users’ websites.  Namely, Viewstate.   So, below is a step by step instruction on how to create a webtest playback tab which keeps track of the viewstate size for each request.

Step 1: Create the add-in project

Visual Studio Add-ins have their own special type of project, you can find it under “Other project types / Extensibility”.   I’ve named mine “ViewstateAddin”.

Step 2: Walk through the create add-in wizard

When the wizard launches, you’ll be add a “welcome” screen.  Click next to move to page 1.

Page 1 asks you which language you’d like to program your add-in with.  I chose C#, but VB or C++ are supported as well if you prefer.

Page 2 will ask you where your add-in needs to be hosted.  Since webtest playback is not available within VS 2010 Macros, you can uncheck that box and simply leave the main VS 2010 product selected.

Page 3 asks you for the name and description of your add-in.  These will be visible to your users in the manage add-ins dialog, so don’t skimp here.  I’ve added mine as shown.

Pages 4 and 5 will ask you for a general idea of what your add-in will do.  For example – when you want the add-in to load into memory and whether you will be popping any modal UI from your code.  I suggest leaving all of the boxes unchecked (on both pages) if this is your first time creating an add-in.

Page 6 is just a summary page of everything you’ve selected thus far.  If everything looks as you expect, click finish to create your bare bones add-in.

Step 3: Creating the user control and adding required references

The user interface you design will be housed within a single user control.  Inside that control you can do as you please, but first you must create the user control container.  This is accomplished under the project menu by selecting “Add User Control”

You can name the user control anything you want.  I’ve named mine “ViewstateControl.cs”.  This will add a blank user control to the project which will be used extensively in the next few steps.  For now, you can leave it blank.

Before moving on, you will also want to add 2 references to your project:

First - Microsoft.VisualStudio.QualityTools.WebTestFramework.dll (This one can be found on the .NET tab of the add reference dialog.)

Second – Microsoft.VisualStudio.QualityTools.LoadTestPackage.dll (This one you will need to use the browse tab in the add reference dialog and look in %ProgramFiles%\Microsoft Visual Studio 10.0\Common7\IDE\PrivateAssemblies)

Caution: Make sure you’re using Version 10.0 of these assemblies or your add-in will not work.

Step 4: Adding the connection code

The process of getting a playback add-in to work for you is a two step one.  First, you need to tell the playback window that your control exists.  Then you need to register for event notifications.  First, let’s go over telling the playback window that you want to have your user control displayed.

This is done from within the Connect class.  If it’s not already open, open the Connect.cs file from solution explorer.  Inside the Connect class, you will need 2 things.  First, an object containing a list of your user controls. (One add-in can provide support for any number of user controls.  Each user control will get its own tab.)  Second, you will need a handle to the LoadTestPackage Extensibility object. (Don’t worry, it’s harder to say than it is to use.)

Each of these objects needs to be global to the Connect class and declared as follows:

The next method is one you’ll need to add to the Connect class.  It will be called when your add-in is loaded for the first time to attach to any existing playback windows as well as each time a new playback window is created.  It is responsible for making sure the playback window is displaying a tab with your control on it.  If you’re having trouble getting a tab to display, this is one of two likely places to look for a problem.

If you’re having trouble getting all of the above objects to resolve, make sure you have the following using statements in the file:

• - Microsoft.VisualStudio.TestTools.LoadTesting
• - System.Collections.Generic
• - System.Windows.Forms

As you can see above, there is no constructor for ViewStateControl that takes a WebTestResultDetails argument.  Don’t worry about that just yet.  It’s expected since we haven’t written any code for the control.

Now that you’ve created the method which will be called when your control needs to load, you need to make sure it gets called.  There are 2 times when your control will need to load.

• - When your add-in is loaded and there are existing webtest playback windows open.
• - When a new webtest playback window opens.

For the first case, we just need to call the WindowCreated method from the OnConnection method.  You do this by first creating a handle to the Loadtest package extensibility object and then calling WindowCreated for each open window.  For the second case, you need to subscribe to the WindowCreated event from the extensibility object and call WindowCreated from within the event handler. 

Your OnConnection method and event handler should now look like this:

That’s all that is required to get your new tab to display within webtest playback.  If you were to fix up the call to the nonexistent constructor above, you could compile and give it a shot.  Sadly though, you’d see nothing but a blank tab.  So let’s keep going and finish the add-in.

Step 5: Registering for events

Now that the add-in will display, you can get to the meat of the add-in, registering for and handling events.  The following events are available for your add-in to hook.

• WindowCreated   [Called when a new playback window is created]
• WindowClosed     [Called when a playback window is closed]
• SelectionChanged   [Called when a new request is selected in the playback window]
• TestCompleted    [Called when the webtest has completed]

You have already seen how to subscribe to the WindowCreated event in Step 4 above.  The other events are subscribed to similarly and in the same place.  In fact, for this demo you will need to subscribe to each of them.  Here’s what the OnConnection method should look like after you’ve subscribed to the events.

For now, you’ll need to create stubs of each of these event handlers so that the code will compile.  We’ll get back to writing these handlers in step 7.

Step 6:  Writing the UI

Now that you’ve created the add-in, it’s time to add the meat of what you want to see.  I am by no means a UI expert, but I’ll give you enough to get started here.  I dropped a listview and a label onto my user control.  The listview I gave 3 columns – row number, viewstate size, and the URL.   The label will contain the viewstate size of the currently selected request in the UI.  It looks like this:

For the code behind the UI, I created 3 main methods.  The first is a utility method to pull out the viewstate from the response body of a request.

Next, a method to iterate through the list of requests and update the listview…

And finally, a method which will update the label with the viewstate size of the currently selected request.

Step 7: Putting it all together

At this point, all of the code is written except the event handlers.  We just need to add calls from the event handlers to the UI update handlers and clean up memory.

The TestCompleted event is a good event to use when getting summary data.  I’ve used it to call the UpdateSummaryDetails method as shown below.

For changing data when different requests are selected in playback, you’ll want to use the SelectionChanged event.  I have used this event to call the UpdateSelectionDetails method written in step 6.

And lastly – there is a WindowClosed event which will allow you to remove your tab from playback and release any resources you may have tied up.

Step 8: Turning it on

At this point, you’ve finished creating the add-in and it’s ready to go.  Just compile it and launch a new instance of Visual Studio.  Once you’ve launched the new instance, you can look under the tools menu for “Add-in manager”.  you should see your add-in listed and be able to turn it on.  If you want your add-in always loaded, make sure to choose the enable on startup option.

Next, just run a webtest and see the results!