Writing functionnal UI tests with WatiN and Expect

One kind of functionnal tests that you could do with Expect is UI testing. Expect come with an extension for WatiN that you could use to write web UI specs/test.

This post will use MsTest to run the specs but you could use NUnit as well.

First download and install Expect framework. Once you are done, launch Visual Studio and create a new Test project. Add references to Expect.Core.dll, Expect.Watin.dll, and WatiN.Core.dll (it should reside in “program file\Expect” or “program file (x86)\Expect”.

Right click on the project and add a new application configuration file.

Put the following into the configuration file :

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <configSections>
    <section name="expect" type="Expect.Core.ExpectConfigurationSection, Expect.Core"/>
    <section name="expect.watin" type="Expect.WatiN.ExpectWatiNSection, Expect.WatiN"/>
  </configSections>
  <expect>
    <!-- this section define behaviour for code generation -->
    <!-- set unitTestProvider="NUnit" to generate tests for nunit -->
    <codegen unitTestProvider="MsTest" containerbaseclass="Expect.WatiN.WatiNSpecificationContainer" />
  </expect>
  <expect.watin rooturl="http://www.google.com" browser="IE" />
</configuration>

With Expect, when you write your text specification, it generates a class that wraps unit tests that corresponds to your specification. This configuration tells Expect to use a different base class for the generated unit tests. The WatiN base class contains base logic for initializing WatiN.

To have executable specifications, we will have to bridge the text specification to the code or application we want to test with fixtures. With WatiN, you write page classes that wrap the actions you will have to make on your application’s pages. The Expect extension provide a base class for pages that is also a fixture base class.

Right click on your test project and click on “Add > New Item”. Select “Expect specification” and name it “Google search”.
Delete the content of the file and write the following:

When I am on Google home page
if I search for |Expect framework|
I must have a link to |http://expect.codeplex.com|

Right click on the first line and select “Expect > Fixture -> Create actor fixture class”. Replace the inheritance from “ActorFixture” to “ExpectPage”. The “ExpectPage class” is both a base class for fixtures and WatiN page.

Add the following properties to the class:

[FindBy(Name = "q")]
public TextField SearchCriteria;

[FindBy(Name = "btnG")]
public Button SearchButton;

Those properties are pure WatiN’s page elements that wrap properties to UI elements.

Replace the content of the method “IfISearchFor” with :

SearchCriteria.TypeText(param_for_ExpectFramework);
SearchButton.Click();

I think there is no need to comment this code ;-)

And to the method “IMustHaveALinkTo”, replace the content with :

Thread.Sleep(400);
var elt = Context.Browser().Span("search");
elt.WaitUntilExists();
Assert.IsTrue(elt.Links.Any(l => l.Url.StartsWith(param_for_Httpexpectcodeplexcom)));

This code search for the link in the page.

Now if you look at the Test view in Visual Studio, you must be able to run the specification.
If you want to play a little, you could also put a breakpoint in the “.expect” file on the line “I must have a link to…” and run the test in Debug mode. You will discover the pleasure of debugging specifications ! You could also play with the parameters.
If you have a little fun in the “.expect” file you will see that you have intellisense on the elements, the fixture class if you write a new fixture (just add a blank line), or the actions available in your fixture.

Just in case, this is the complete class :

using System.Linq;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using WatiN.Core;
using Expect.Core;
using System.Threading;

namespace Expect.WatiN.Sample.Pages
{
    [FixtureHint("When I am on Google home page")]
    public class WhenIAmOnGoogleHomePage : ExpectPage
    {
        [FindBy(Name = "q")]
        public TextField SearchCriteria;

        [FindBy(Name = "btnG")]
        public Button SearchButton;

        [FixtureHint("if I search for |*|")]
        public void IfISearchFor(string searchtoken)
        {
            SearchCriteria.TypeText(searchtoken);
            SearchButton.Click();
        }

        [FixtureHint("I must have a link to |*|")]
        public void IMustHaveALinkTo(string targeturl)
        {
            Thread.Sleep(400);
            var elt = Context.Browser().Span("search");
            elt.WaitUntilExists();
            Assert.IsTrue(elt.Links.Any(l => l.Url.StartsWith(targeturl)));
        }
    }
}

You could download the sample on codeplex, along with other Expect samples.
With Expect, you could generate a Word document from your text specifications, it will be a good subject for the next post !
In the meantime, you could go to the samples and documentation to have a look…

kick it on DotNetKicks.com
Shout it

About these ads
This entry was posted in Expect, WatiN. Bookmark the permalink.

One Response to Writing functionnal UI tests with WatiN and Expect

  1. Pingback: Cheatsheet: 2010 09.01 ~ 09.15 - gOODiDEA.NET

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s