Released WatiN 2.0 Final

Last week I have release WatiN 2.0 Final (2.0.50.1179). You can download the zip file from Sourceforge:

http://sourceforge.net/projects/watin/files/WatiN%202.x/2.0%20Final/WatiN-2.0.50.1179.zip/download

or install it using NuGet (need to have the Package Manager console for Visual Studio 2010 installed, get it at nuget.org). To add it to your project is as simple as:

PM> Install-Package WatiN

The release notes can be found on the new website http://watin.org (which is still in flux but getting there)

http://watin.org/documentation/release-2-0-50-11579/

Enjoy Testing with WatiN!

jQTouch detail style

I’m working on a mobile application for the iPhone and I am using jQTouch to make the UI look like an iPhone app. jQTouch seriously helps you to quickly create a nice looking UI  but sometimes you need to write your own css to create the layout you want.

I needed a detail page with data shown like the contact details do on the iPhone. Since none of the jQTouch themes had some class that I could use, I sat down and finally came up with this little piece of css:

Now all you need to do is apply the detail class to your li element and place the name and the value inside two divs like so

And the result will look like

Technorati Tags: jQTouch

TDD Workshop

#shamelessplug

Last month I gave a very successful TDD workshop. If you are interested in a TDD workshop, know about C# or Java and happen to be in the Netherlands, have a look at our schedule here (in Dutch) and read the blog about our workshop (also in Dutch).

I’m also in the process of creating a 2 day WatiN training. I’ll blog about this as soon as more info is available.

Browser.AttachTo<T> and IAttachTo

In WatiN RC1 the functionality to attach to a browser instance has had a complete redo. This had two reasons:

1. Being able to attach to a browser in a browser agnostic way.
2. Being able to return your custom browser type.

Download the example code here

From the old way to a browser agnostic way

If you don’t intend to run your tests with different browsers, you still need to make a small change in your code when upgrading to WatiN RC1.

needs to be changed into

which is the same as

and the same as

As you can see in the last example, you can pass in a type which should inherit WatiN.Core.Browser. The following example shows you how to utilize this method in situations where you get a browser instance injected into your test code. In the example the link that is clicked on will open up a new browser instance and we want to verify the text in this newly opened browser instance.

Thanks to this new AttachTo(type, findBy) method there is no knowledge at all of the used browser type inside my test code.

Returning a custom Browser type from AttachTo()

Many of us who use WatiN will probably use their own custom super duper version of WatiN.Core.IE. Providing new or different behavior then the default IE implementation does. See here for example  (and yes this part of the post was also a little bit sparked by their need to write their own AttachTo methods).

Here is my great MyIE class which overrides the ToString method and returns the Title and Url of the shown page (it’ll surf just as an example).

And now I want to be able write

When I run this piece of code, WatiN will throw this exception:

WatiN.Core.Exceptions.WatiNException: 
No AttachToHelper registered for type WatiN.Examples.Tests.MyIE.

That does sound like Ican register an AttachToHelper for a browser Type, doesn’t it. The Browser class provides a method RegisterAttachToHelper doing just that.

So we need to create our own AttachToMyIEHelper class. Since MyIE is inheriting IE, AttachToMyIEHelper will inherit AttachToIEHelper. And then it is just a matter of overriding the CreateBrowserInstance method, return a new instance of MyIE and we are done. Here is the implementation:

And this code shows you how to register the new AttachToMyIEHelper and use it in your tests.

Enjoy testing with WatiN.

Technorati Tags: WatiN

Combine WatiN and White to test Silverlight

Googling the web for stuff written about WatiN, I came across this very interesting article to combine forces between WatiN and White.

http://leobartnik.net/blog/2010/01/silverlight-uiautomation-testing-using.html

It also sparked this idea:

var  silverlightControl = browser.Control<SilverlightControl>(Find.ByFirst());

silverlightControl.Button(Find.ById(“someButton”)).Click;

Interesting.

Technorati Tags: WatiN

Released WatiN 2.0 RC 1

A short shout out to announce the release of WatiN 2.0 Release Candidate 1.

Many fixes and new features since the last beta 1 release way back in March. I’m still compiling the list of changes so check back on this page later this week. But if you follow my blog you are well informed already. If you haven’t been using beta 1, start reading the release note of that release here.

And of course  you want to download the new release.

Enjoy testing with WatiN!

Technorati Tags: WatiN

Wrapping complex logic in a Control

Update 18 December 2009: Added missing file to code download

WatiN is all about simplifying the way you can interact with a web browser and the elements on a page. Simple elements are just wrapped (like divs, links and alike) but for more complex elements WatiN offers you functionality which hides complex interactions with the browser. For instance TextField.TypeText will not only set the value of an input field but will also fire all the appropriate events, basically simulating a real user typing in text.

But what if you want to automate/model some action that involves complex logic and/or multiple elements. Yes indeed I am referring to all those ASP and third party controls out there. In this post I will show you how to create your own control which you can use as if it is an element on the page and natively supported by WatiN.

You can download the code for this post here (which also contains a build of WatiN 2.0 RC1)

The control to automate: JQuery-UI Datepicker

I’m going to show you how to create a basic control for the jQuery UI Datepicker. But that’s simple you might think, just use TypeText of the TextField class, the WatiN wrapper for input elements of type text. True, but then I need to think about formating the date correctly every time I automate a datepicker. And there might be other things I would like to check on the datepicker (see  jQuery-UI Datepicker for all the options that can be set and read on this widget). So I’m going to use the javascript API of the datepicker to automate the control.

Wondering how to use this control in your test code?

Looks familiar (and simple) doesn’t it.

The implementation of DatePicker

To create the control I need a root WatiN.Core.Element subtype which will be the base/root Element for my DatePicker control. Since a html input of type text serves as the root element for the jQuery UI datepicker widget, it makes sense that DatePicker will use TextField as its root Element.

Since I decided I’m going to use the datepicker’s javascript API, the control needs to execute scripts inside the browser. Fortunately WatiN offers this functionality through the RunScript() and Eval() methods, both exposed by the DomContainer class. Control<T>, the base class for every control, exposes the property Element which returns the root Element of the control, in this case TextField. From there we can get to the DomContainer to execute javascript using Eval().

Next thing to do is to create the javascript to set the date using the API of the jQuery datepicker. This is what the script needs to look like to set the date to 10 December 2009 (indeed the month is 11, a javascript thingy):

window.jQuery(element).datepicker(‘setDate’, new Date(2009, 11, 10));

To make sure that the javascript references the correct html element in the DOM, I will make use of the new method  GetJavascriptElementReference(), available on every (subtype of) Element (in WatiN 2.0 RC1). And of course the Date should be created  correctly.

I’m also using window.jQuery() instead of window.$() to make sure this script will also work when $() is not a shortcut for the jQuery() function (but instead is used by some other javascript library like Prototype).

I will combine all this in the setter part of the Date property of the DatePicker control:

For the getter part there is one catch, transforming the returned javascript date in to a DateTime instance. Fortunately DateTime.Parse parses a UTC date format without any problem, so I let the javascript return the date in such a format.

 

Now that we can set and get the date of the jQuery UI Datepicker widget we can start using it in our tests. And it offers a create place to add more functionality.

To conclude

I hope this post will help you start creating controls for your own or third party controls. There is much more that you can do so check out the download with this post to see:

• How to restrict the use of this control to input elements which are a datepicker.
• How to handle Date = null and reading a null date.
• How to read options set on a datepicker widget instance.

There is also a WatiN-Contrib project started on Google code. So if you like to share your third party WatiN control library, let us know.

Enjoy testing with WatiN!

Technorati Tags: WatiN