Question

I am using WatiN to test an autocomplete drop down.

When a user types in the field after 3 characters have been entered jquery autocomplete is triggered and an un-ordered list is shown. It is mandatory for the user to select from the list.

I am unable to make a selection/trigger the autocomplete from the list using WatiN.

Here is some of the html the developers have used:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; display: block; width: 275px; top: 301px; left: 262px; ">
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">ABC DEFGHIJ </a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">ABC KLMNOPQ </a></li>
</ul>

They are using the jQuery UI autocomplete widget: http://jqueryui.com/demos/autocomplete/

Googling for jQuery UI autocomplete testing, I found this Stack Overflow Q&A:
Testing JQuery autocomplete ui with cucumber

containing what seemed to be the crucial information: “You need to first trigger a mouseover, then a click”

Then I Googled for WatiN mouseover, and found http://blogs.telerik.com/testing/posts/08-05-29/how_to_select_radcombobox_item_with_watin.aspx
This has a little code sample that includes:

    Div divStudent3 = ie.Div(Find.ById("idRadComboBox_c2"));   
    divStudent3.FireEvent("onmouseover");   
    divStudent3.Click();  

(to be clear our development code does not use telerik controls this is just an example)

At this point I thought I had a plan for how to drive this:

1. Type part of the desired value into the field (e.g. “ABC”)
2. Find a <ul> element with class “ui-autocomplete” and display style “block”, waiting until it is present
3. Within that <ul> element, find the <li> element whose text is the desired value (e.g. “ABC DEFGHIJ”)
4. Fire the “onmouseover” event on that <li> element
5. Click the <li> element.

I found two problems: firstly, that WatiN’s typing into the input field was very bad at triggering the appearance of the autocomplete menu,
and secondly that clicking on the menu item isn’t causing the autocomplete to occur.

I found that sending a downarrow key event to the input field encouraged the menu to appear, but didn’t cause the top menu item to highlight
(whereas if you type in manually and hit down arrow it does). Getting the menu item properly activated
(including getting its ID set to ui-active-menuitem) may be the missing link here.

Can anyone help me to understand and solve the two problems I have mentioned?

Answer 1

It took a bit, but here is a working example.

Key points

• Call the JQuery object search method. This gets the dropdown list
  to show.
• then fire onmouseover the item you want.
• Then click the item you want.

To get it to select the item correctly, I’ve needed to do all three above in that specific order.

Code

string searchValue = "c";
string selectItem = "COBOL";

ie.GoTo("http://jqueryui.com/demos/autocomplete/default.html");

ie.TextField("tags").TypeText(searchValue);
ie.Eval(@"$('#tags').autocomplete('search')");
ie.List(Find.ByClass("ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all")).ListItem(Find.ByText(selectItem)).Links[0].FireEvent("onmouseover");
ie.List(Find.ByClass("ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all")).ListItem(Find.ByText(selectItem)).Links[0].Click();

The above works using Watin 2.1. It won’t work on WatiN 2.0 RC. I didn’t check the actual 2.0 release. 2.0 RC doesn’t have the List and ListItem objects. Tested only on IE8.