Browser based web testing with WatiN, Gallio, and MbUnit

This post is about three remarkable open source testing tools.  WatiN, a .NET based web application testing framework can be used to drive the Internet Explorer, Firefox, and even Chrome web browsers.  Gallio and MbUnit are a test runner and a unit testing framework.  Combining these 3 tools together results in effective, stable, and easy to maintain tests for your web application.  I had a bit of a hard time getting started using these tools together due to missing or old documentation on the web, but once I got the recipe down, this is now my test framework of choice over Selenium.
 
To get started, create a new visual studio project (class library) or add a new class to any existing project.  Then, add the following references to your project:
MbUnit.dll
Gallio.dll
Watin.Core.dll
System.Drawing
System.XML
 
Next you will need to add the following using statements to your class file:

using WatiN.Core;
using MbUnit.Framework;
using Gallio.Framework;
using System.IO;
using System.Drawing;
using System.Text.RegularExpressions;

 
 
Next you will need a class that implement's Watin's ILogWriter interface.  This class will be used to submit WatiN's log messages to the Gallio test results:

public class GallioLogWatinWriter : WatiN.Core.Interfaces.ILogWriter
{
    public void LogAction(string message)
    {
        TestLog.WriteLine(message);
    }

    public void LogDebug(string message)
    {
        TestLog.WriteLine(message);
    }
}

 
Now, add a static variable to reference the browser and a SetUp method to the class.   Note how the Setup method is marked with the SetUp attribute.  Also, note that I use the name window for the browser object.  This is to make it easier to add code created with the WatiN recorder to tests.

public static IE window;

[SetUp]
public static void Setup()
{
    window = new IE("about:blank");
    WatiN.Core.Logging.Logger.LogWriter = new GallioLogWatinWriter();
}

 
Next comes the tear down method

[TearDown]
public static void TearDown()
{
    window.Close();
    window.Dispose();
}

 
And finally, add a test method.  Note that this method is marked with the Test attribute.  You can have as many test methods in a class as you like.  Also note how this method contains code to capture a screenshot of the browser upon test failure (very useful for reporting bugs).

[Test]
public static void TestBlogLink()
{
    window.GoTo("http://www.theroamingcoder.com");
   
    //Click the blog link
    Link lnk_blog = window.Link(Find.ByText("Blog"));
    lnk_blog.Click();

    //Ensure that at least one post is present by looking for the submitted element
    Span span_created = window.Span(Find.ByText(new Regex("Submitted by .* on .*")));
    Assert.IsTrue(span_created.Exists);

    //Capture and log a screenshot on failure
    //NOTE this feature is broken in WatiN 2.0 beta1 (screenshots are all black),
    // but is supposed to be fixed in WatiN 2.0 beta2
    if (TestContext.CurrentContext.Outcome == Gallio.Model.TestOutcome.Failed)
    {
        string filename = Path.GetTempFileName();
        filename = Path.GetTempPath() + Path.GetFileNameWithoutExtension(filename) + ".bmp";
        window.CaptureWebPageToFile(filename);
        TestLog.EmbedImage("Test Screenshot", System.Drawing.Image.FromFile(filename));
    }
}

 
See the attachments section of this post for the full code.
 
Now it is time to run the tests.  Locate and run the file Gallio.Icarus.exe in your copy of Gallio.
 
After gallio is loaded, right click on the assemblies tree item in the bottom left pane and choose "Add assemblies...".  Locate and add the .dll (or .exe) that was generated from building the project with your test code.
 
Finally, click the run button and watch the tests run.  WatiN has a cool feature that highights the elements it is interacting with as it drives the browser.
 

 
This basic structure makes for a great web application testing framework.
 
Check out part 2 in this series of posts.