About Me

Thursday, January 20, 2011

WatiN UI testing of autocomplete textbox created with jquery.autocomplete

While writing UI tests for one web project, I were faced with the trouble.
There is a textbox on the page where user can type first letters and the system shows all possible values that can be selected by the user.
On the client side it was created with jquery.autocomplete:


I'm using WatiN library for writing UI tests and the regular approach, that I tried to use was not working.
Below is the code that emulates inserting of character 'a' then waits for autocomplete textbox appears and select first item:

IE _ie = new IE("URL-of-the-page-with-autocompleter");

//Typing letter 'a' and emulates keyboard
_ie.TextField("VendorName").TypeText("a");
_ie.TextField("VendorName").KeyDown();

//Wait while autocomplete making AJAX call
//and open the results
_ie.Div(f => !string.IsNullOrEmpty(f.ClassName) 
    && f.ClassName == "ac_results").WaitUntilExists(6);

//Selecting first item
_ie.Div(f => !string.IsNullOrEmpty(f.ClassName) 
    && f.ClassName == "ac_results")
    .ElementsWithTag("ul")
    .FirstOrDefault()
    .Click();

_ie.WaitForComplete();
The second line of code is important. KeyDown method for the textfield should be called to make autocompleter show search results.

No comments:

Post a Comment