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