I recently started playing around with WatiN (Web Application Testing in .Net) and WatiN Test Recorder.  While these are cool tools that can greatly improve the testing process, I found that there isn’t a lot of information out there to help get started.  I have put together a brief tutorial on some of the basics.  I hope it helps.  I’m including code samples in this post, plus you can download the entire VS Solution and a short video below.

WatiN, pronounced “What-in”, is a library that allows you to create tests for web applications.  It is based in WatiR which was created for Ruby.  Basically, you can test your web pages just like any other classes.  In my case, I’ll use NUnit to control the actual tests but they are written with WatiN.  The tests run in the browser via a class named “IE”.  That immediately points out one of the downsides to WatiN — it only works with Internet Explorer.  But the tests run in a real browser so it is very accurate.

Here’s a quick code sample:
            IE ie = new IE(“http://localhost/somewebsite/default.aspx”);
            ie.Link(Find.ById(“LinkButton1″)).Click();

If you run that in a test, the browser will actually open, navigate to the default page, find the LinkButton and click it.  Seems pretty simple right?  It isn’t too complicated but you’ll have to get used to the WatiN classes and methods.  The fact is, the tests are a pain to write.  That’s where WatiN Test Recorder comes in.  All you have to do is start the recorder and the tool will begin to record your actions in the browser (there is a browser built into WatiN Test Recorder) and translate your actions into code.  If you click LinkButton1, the recorder outputs “ie.Link(Find.ById(“LinkButton1″)).Click();” for you!  This is a big help but it is not exactly perfect.  I have found that it doesn’t get the code right and some tweaking is needed.  I’m starting to get the hang of it so the changes to the code are getting easier. 

Sample Code and Downloads:

Download my VS 2005 solution:  WatiNDemo.zip  167KB
Download my Video of WatiN Test Recorder in action:  WatiNTestRecorderDemo.avi (Right click and “save target as”)  2.22MB

I created a simple data entry web application with 2 pages that pretends to register users to a web site for outdoor enthusiasts.  The first page lists the registered users, the second page is a form to register:

I want to make sure my data entry page works, so I fire up WatiN Test Recorder.  The video (see the link above) shows what happens in the recorder as I step through the page  and enter the data into the web form.  Here is the code that the recorder generated for me, with line numbers added here for reference:

          1   IE ie = new IE(“http://localhost:49573/RegisteredList.aspx”);

          2   ie.Link(Find.ById(“LinkButton1″)).Click();

          3   ie.TextField(Find.ById(“txtFirst”)).Click();

          4   ie.TextField(Find.ById(“txtLast”)).Click();

          5   ie.TextField(Find.ById(“txtLast”)).TypeText(“andy”);

          6   ie.TextField(Find.ById(“txtEmail”)).TypeText(“schwam”);

          7   ie.TextField(Find.ById(“txtEmail”)).Click();

          8   ie.TextField(Find.ById(“txtEmail”)).TypeText(“andy@email.com”);

          9   ie.RadioButton(Find.ByName(“rdoSendInfo_0″) && Find.ByValue(“yes”)).Checked = true;

          10  ie.TableCell(Find.ByCustom(“innertext”, ” Choose New Jersey Pennsylvania”)).Click();

          11  ie.SelectList(Find.ById(“ddlState”)).SelectByValue(“Pennsylvania”);

          12  ie.SelectList(Find.ById(“ddlCounty”)).Click();

          13  ie.SelectList(Find.ById(“lstHobbies”)).Click();

          14  ie.SelectList(Find.ById(“lstHobbies”)).Click();

          15  ie.SelectList(Find.ById(“lstHobbies”)).Click();

          16  ie.SelectList(Find.ById(“lstHobbies”)).Click();

          17  ie.Button(Find.ById(“btnSubmit”)).Click();

          18  ie.Link(Find.ByUrl(“javascript:__doPostBack(‘GridView1′,’Select$0′)”)).Click();

          19  ie.Link(Find.ById(“LinkButton1″)).Click();

Fixing the Generated Code:

• 
  
  Line 1 and 2 are good:  Open Internet Explorer and navigate to my page.
  
  
• 
  
  Line 3, 4, 7, and 10 are not really needed but it won’t cause any trouble.  The clicks seem to be irrelevant.
  
  
• Line 5 and 6 are just wrong.  I put the text “andy” in the textbox named txtFirst, and “schwam” in txtLast.  I can easily fix them:  
  
  
  
  • ie.TextField(Find.ById(“txtFirst”)).TypeText(“andy”);
    
  • ie.TextField(Find.ById(“txtLast”)).TypeText(“schwam”);
  
  
• Line 9 throws this exception if you let it run: “WatiN.Core.Exceptions.ElementNotFoundException: Could not find a ‘INPUT (radio)’ tag containing attribute name with value ‘rdoSendInfo_0′”.  It should be Find.ById, not Find.ByName.  This works instead:
  
  
  
  • ie.RadioButton(Find.ById(“rdoSendInfo_0″)).Checked = true;
  
  
• Line 11 is good
  
• Line 12.  Notice no county is selected. Try this:
  
  
  
  • ie.SelectList(Find.ById(“ddlCounty”)).SelectByValue(“Delaware”);
  
  
• Lines 13, 14, 15, and 16 are just clicks but nothing is selected.  Try this:
  
  
  
  • ie.SelectList(Find.ById(“lstHobbies”)).SelectByValue(“Hiking”);
    
  • ie.SelectList(Find.ById(“lstHobbies”)).SelectByValue(“Camping”);
    
  • ie.SelectList(Find.ById(“lstHobbies”)).SelectByValue(“Mountain Biking”);
    
  • ie.SelectList(Find.ById(“lstHobbies”)).SelectByValue(“Kayaking”);
  
  
• Line 18 is correct but worth mentioning.  This selects the first row in the grid which causes the application to display the users detail in the grid.

That doesn’t seem to good for a first shot!  But even with all of the mistakes, I’d rather start with the generated code then nothing at all, especially if this was a longer, more complicated test.  Plus, I admit there are features of the recorder that I am not familiar with so maybe it would work better if I actually knew what I was doing! 

AJAX Issues:

Technically, the changes I made are correct but it still won’t work right.  I am using ASP.Net Ajax to call back to the server when the state (ddlState) changes.  I’m populate a list of counties (ddlCounty) on the server.  When you run the test it goes so fast that it tries to select the county before the drop down list is loaded!  I found some documentation about a WaitUntil() method but I couldn’t get it to work.  So I did it the old fashioned way and put the thread to sleep:

            ie.SelectList(Find.ById(“ddlState”)).SelectByValue(“Pennsylvania”);

            System.Threading.Thread.Sleep(100);

            ie.SelectList(Find.ById(“ddlCounty”)).SelectByValue(“Delaware”);

Validation:

After the submit button is clicked, the application returns to the list of users.  Since I am writing a test, I should validate the results.  I’ll add in a few asserts:

            Assert.AreEqual(“Andy”, ie.TextField(Find.ById(“txtFirst”)).Text);

            Assert.AreEqual(“Schwam”, ie.TextField(Find.ById(“txtLast”)).Text);

            Assert.AreEqual(“me@email.com”, ie.TextField(Find.ById(“txtEmail”)).Text);

The Final Test Class:

The solution contains a class library with a class Tests . Using NUnit, I can execute the test easily.

using WatiN.Core;

using NUnit.Framework;

namespace Tests

{

    [TestFixture]

    public class Tests

    {

        [Test]

        public void FirstTest()

        {

            IE ie = new IE(“http://localhost/WatinDemoSite/RegisteredList.aspx”);

            ie.Refresh();

            ie.Link(Find.ById(“LinkButton1″)).Click();

            ie.TextField(Find.ById(“txtFirst”)).TypeText(“Andy”);

            ie.TextField(Find.ById(“txtLast”)).TypeText(“Schwam”);

            ie.TextField(Find.ById(“txtEmail”)).TypeText(“me@email.com”);

            ie.RadioButton(Find.ById(“rdoSendInfo_0″)).Checked = true;

            ie.SelectList(Find.ById(“ddlState”)).SelectByValue(“Pennsylvania”);

            System.Threading.Thread.Sleep(100);

            ie.SelectList(Find.ById(“ddlCounty”)).SelectByValue(“Delaware”);

            ie.SelectList(Find.ById(“lstHobbies”)).SelectByValue(“Hiking”);

            ie.SelectList(Find.ById(“lstHobbies”)).SelectByValue(“Camping”);

            ie.SelectList(Find.ById(“lstHobbies”)).SelectByValue(“Mountain Biking”);

            ie.SelectList(Find.ById(“lstHobbies”)).SelectByValue(“Kayaking”);

            ie.Button(Find.ById(“btnSubmit”)).Click();
            //VALIDATION
            ie.Link(Find.ByUrl(“javascript:__doPostBack(‘GridView1′,’Select$0′)”)).Click();
            Assert.AreEqual(“Andy”, ie.TextField(Find.ById(“txtFirst”)).Text);

            Assert.AreEqual(“Schwam”, ie.TextField(Find.ById(“txtLast”)).Text);

            Assert.AreEqual(“me@email.com”, ie.TextField(Find.ById(“txtEmail”)).Text);
        }

    }

}

Running The Tests:

I use ReSharper from JetBrains which makes my life easier in so many ways.  One of which is that it includes a tool to run unit tests.  The tests within the Visual Studio solution included in this post work great when run through ReSharper.  But I found that when I ran the tests with NUnit GUI directly I got an exception:

Tests.Tests.FirstTest : System.Threading.ThreadStateException : The CurrentThread needs to have it’s ApartmentState set to ApartmentState.STA to be able to automate Internet Explorer.

There are some posts out there about resolving this issue but I have a better solution.  Either install ReSharper or install UnitRun, a free tool that runs tests (also from JetBrains).  While I haven’t tested UnitRun, I expect it will work the same as the ReSharper solution.