WatiN, Gallio, and MbUnit ... Web Application Testing

WatiN is a web application testing framework.  It is used to test the UI portion of your web application.  It can be used for validating the functionality of a button, and also to validate your JavaScript ( or jQuery ) code, just to name a couple.  Combining WatiN with Gallio and MbUnit results in a very effective and easy to maintain tests.

When I first started working with WatiN, I had a difficult time finding information and sample code to get started.   And when I combine both Gallio and MbUnit to my test project, it was even harder to get started.  I am writing this in hopes that it will help others get a jump start.

First, you need to download WatiN.  WatiN comes in a ZIP file.  All you need to do is to unzip it to a folder ( for now anyway ).   Gallio and MbUnit comes bundle together and can be found here.  Once download is complete, you will need to install it.  The current version ( at the time of this blog being written ) for WatiN is 2.0.10.928, and for Gallio and MbUnit, it is 3.1.313.

Next, open Visual Studio 2008 and create a new Class Library project.  You may also add a new project to your existing solution.

NOTE: If you have VS 2008 running in Vista / Windows 7, make sure you ran VS 2008 as administrator. Otherwise, you will get errors when you try to debug your tests.  

In my examples, I am going to add a new class library project to an existing solution.  The web site that I am using is a simple web site that contains a single page.  This page contains a text box, a label, and a button.  Here's what the web site looks like.

Now that we have this working, let's create a new class library in this solution.  In this new class library, go ahead and add the following DLLs

1. Gallio.dll
2. MbUnit.dll
3. Watin.Core.dll

The reference folder in your class library should look something like this

Both projects are using .NET framework 2.0.  In WatiNTestClass.cs, your code would look something like this.

using MbUnit.Framework; using WatiN.Core; namespace WatiNTestClassLibrary {     public class WatiNTestClass     {         public static IE ie;         [SetUp]         public static void Setup()        {               ie = new IE("about:blank");        }         [TearDown]         public static void TearDown()        {              ie.Close();              ie.Dispose();        }        [Test]        public static void WatiNTests()       {             ie.GoTo("http://localhost:2728/Default.aspx");             TextField tf = ie.TextField(Find.ByName("TextBox1"));             Button b = ie.Button(Find.ByName("Button1"));             tf.TypeText("Hello world");             b.Click();       }    } }

Now, you are ready to test.  If you wish to debug, set a breakpoint and click on the half green half yellow circle on the left of your test method ( in this case, it is WatiNTests() ).  You will be presented with a list of four options .... Run, Debug, Profile, and Append to Session.  Select Debug.

You are now on your way to write tests for your web applications.  Happy UI testing.

UPDATE: You can also find additional information by opening WatiN.CHM file.  You can find this file from the ZIP file that you have downloaded from the WatiN site.  Thanks Mr. Brown.