donderdag 31 januari 2008

Using WatiN to test select lists in an update panel

UPDATE:  This looks like another great way to handle automating selectlists in AJAX scenarios http://pushpontech.blogspot.com/2008/04/ajax-issues-with-watin.html

In our web application we make use of update panels to give the user a nicer UI experience. On one of our web pages a SELECT element contains a list of countries. When the user selects a country from this list, a post back occurs and another SELECT element is populated with states for the selected country. A very basic scenario.

When automating this scenario with WatiN the following test would pass if the select elements are not wrapped in an update panel.

[Test]
public void ShouldOnlySeeStatesFromSelectedCountry()
{
// Open the web page with country and state selection lists
IE ie = new IE("http://localhost/dropdownwithwatintoken/MyDetailsPage.aspx");

// Select a country from the list
ie.SelectList("countries").Option("Netherlands").Select();

// Do the asserts
Assert.That(ie.SelectList("states").Options.Length, Is.EqualTo(12));
Assert.That(ie.SelectList("states").Option("Utrecht").Exists);
}


But after the countries and states lists were wrapped in an update panel, this test started to fail. WatiN doesn't recognize an AJAX call so it will not wait until it is finished. So what happens: After the select is made an async postback is initiated. Then the next line in the test is executed but this is before the response from the server is received and rendered. So no values are in the states list and the test will fail.



Although each element in WatiN has a WaitUntil(attributeconstraint) method, for this test we couldn't figure out what to wait for in the UI to know for sure the async postback was finished (received and rendered). So we decided to add a Thread.Sleep(someSeconds) for the time being. Although this worked, the test was waiting longer than necessary. If there only was an attribute on the SELECT element that would change after the async postback.... Using the WaitUntil method, we could wait for the change of the attribute value and then proceed.



The solution was to create a new custom web control that inherits from DropDownList and overrides the AddAttributesToRender method.



public class DropDownWithWatiNToken : System.Web.UI.WebControls.DropDownList
{
protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
{
base.AddAttributesToRender (writer);
if (AutoPostBack)
{
writer.AddAttribute("watintoken", DateTime.Now.Ticks.ToString());
}
}
}


Each time the HTML for this control gets rendered an attribute "watintoken" will be added with the current date and time represented in ticks. So now we have the needed attribute to check for!



To use this we need to replace our asp:DropDownList usages in our web page(s). To do so you should register this custom control in your aspx web page in which you are going to use the DropDownWithWatiNToken control.



<%@ Register TagPrefix="watin" Namespace="CustomWebControls" Assembly="DropDownWithWatiNToken" %>


Then replace asp:DropDownList with watin:DropDownWithWatiNToken. It should look something like this:



<watin:DropDownWithWatiNToken ID="countries" Runat="server" AutoPostBack="True" />


Now that we have changed the controls on the web page, we can use the "watintoken" attribute in our test and wait until it is changed. After the attribute value has changed, we can proceed the test.



[Test]
public void ShouldOnlySeeStatesFromSelectedCountry()
{
// Open the web page with country and state selection lists
IE ie = new IE("http://localhost/dropdownwithwatintoken/MyDetailsPage.aspx");

// Remember the value of the watintoken attribute
string watintoken = ie.SelectList("countries").GetAttributeValue("watintoken");
// Select a country from the list
ie.SelectList("countries").Option("Netherlands").Select();
// Wait until the value of the watintoken attribute is changed
ie.SelectList("countries").WaitUntil(!Find.By("watintoken",watintoken));

// Do the asserts
Assert.That(ie.SelectList("states").Options.Length, Is.EqualTo(12));
Assert.That(ie.SelectList("states").Option("Utrecht").Exists);
}


And all tests are green again!



Tags van Technorati:

3 reacties:

Teknologika zei

Welcome to the land of blogging Jeroen. I expect that this will become required reading for all WatiN users.

Regards,

Bruce McLeod

Thomas zei

Jeroen, great that you create a blog about WatiN, it will probably be extensively read ;)
PS!
You could also set a button's (or something) caption to "Clicked" or something and then use e.g.;
ie.Button(Find.ById("changeWindowBorderWidth")).WaitUntil("value", "Clicked");

That's what we are using :)

.t

pushp zei

Hi Jeroen,

I too had the same problem as mentioned here but the solution I used was slightly different. I just querried the PageRequestManager to know if the async postback is complete. The solution was simple and it worked. Do check my solution here: http://pushpontech.blogspot.com/2008/04/ajax-issues-with-watin.html