There is an arsenal of tools readily available for unit testing web applications. Unit testing both the data access and business logic tiers is a common best practice and a requirement for developing complex web applications. Solutions typically contain hundreds of unit tests exercising every possible use case and edge case covering the data access and business logic tiers but the UI tier is consistently ignored because the tools to create UI unit tests are not robust enough and hard to use.
If you are familiar with VSTS you may be wondering if Web Tests can fit the bill. Although it is possible to exercise the UI using Web Tests they don’t really help you get down to the granularity of being able to assert that clicking a button causes a textbox to reset, and in this crazy world of AJAX and Web 2.0 we need a tool that handles dynamic changes to the DOM without breaking a sweat.
Enter WatiN (pronounced as what-in); a fantastic open source API that leverages the browser to conduct web tests instead of emulating it. WatiN integrates easily with the VSTS framework and tests can be coded using C# or VB.NET. Currently WatiN uses IE7 but a CTP has been released that allows you to test with Firefox as well.
The most impressive feature of WatiN is the level of access you have to the DOM. Web tests are able to find elements by id, index, name, text, CSS class, etc., iterate through collections of elements, and invoke any event.
The following is an example and explanation of how to use WatiN using VSTS. The source code is available at the end of the post.
Environment Setup
-
-
Extract the files and if you are using Vista unblock the assemblies
Creating the Project
The downloadable source consists of a C# Test Project that contains a single Unit Test. Be sure to add a reference to the WatiNCore.dll and also copy the Interop.SHDocVw.dll into your /bin. The code I’ll be showing below will differ from the downloadable source to save some space.
The Test
I’ll show the test first and then explain what’s going on.
Figure 1 – “Hello World” test
The test first creates an instance of IE and instructs it to navigate to live.com on a separate process. By creating the test on a separate process the session will not be stored across IE instances. The next instruction, which WatiN will call only after the entire page has loaded, queries the DOM to find a text field with the specified Id and once found enters the text. Next, the DOM is queried again to find a button with the specified name and the click event is triggered. Finally we assert true if the page contains our search text, and our IE object is disposed.
This test is very simplistic and very similar to the example test shown on the WatiN homepage except I’m searching live.com instead of google.com (Yes I like Kool-Aid!). In my next post I’ll cover some more advanced scenarios and some tips and tricks to help make your own WatiN experience a little easier.
Source code here