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
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.
window.jQuery(element).datepicker(‘setDate’, new Date(2009, 11, 10));
I will combine all this in the setter part of the Date property of the DatePicker control:
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.
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!