Databases
StackOverflow2013
Postsdbo
POAutocomplete DropDown Menu Testing using WatiN
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAutocomplete DropDown Menu Testing using WatiN
    text
    copied!<p>I am using WatiN to test an autocomplete drop down.</p> <p>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.</p> <p>I am unable to make a selection/trigger the autocomplete from the list using WatiN. </p> <p>Here is some of the html the developers have used:</p> <pre><code>&lt;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; "&gt; &lt;li class="ui-menu-item" role="menuitem"&gt;&lt;a class="ui-corner-all" tabindex="-1"&gt;ABC DEFGHIJ &lt;/a&gt;&lt;/li&gt; &lt;li class="ui-menu-item" role="menuitem"&gt;&lt;a class="ui-corner-all" tabindex="-1"&gt;ABC KLMNOPQ &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>They are using the jQuery UI autocomplete widget: <a href="http://jqueryui.com/demos/autocomplete/" rel="nofollow noreferrer">http://jqueryui.com/demos/autocomplete/</a></p> <p>Googling for jQuery UI autocomplete testing, I found this Stack Overflow Q&amp;A: <a href="https://stackoverflow.com/questions/6355586/testing-jquery-autocomplete-ui-with-cucumber">Testing JQuery autocomplete ui with cucumber</a></p> <p>containing what seemed to be the crucial information: “You need to first trigger a mouseover, then a click”</p> <p>Then I Googled for WatiN mouseover, and found <a href="http://blogs.telerik.com/testing/posts/08-05-29/how_to_select_radcombobox_item_with_watin.aspx" rel="nofollow noreferrer">http://blogs.telerik.com/testing/posts/08-05-29/how_to_select_radcombobox_item_with_watin.aspx</a> This has a little code sample that includes:</p> <pre><code> Div divStudent3 = ie.Div(Find.ById("idRadComboBox_c2")); divStudent3.FireEvent("onmouseover"); divStudent3.Click(); </code></pre> <p>(to be clear our development code does not use telerik controls this is just an example)</p> <p>At this point I thought I had a plan for how to drive this:</p> <ol> <li>Type part of the desired value into the field (e.g. “ABC”)</li> <li>Find a <code>&lt;ul&gt;</code> element with class “ui-autocomplete” and display style “block”, waiting until it is present</li> <li>Within that <code>&lt;ul&gt;</code> element, find the <code>&lt;li&gt;</code> element whose text is the desired value (e.g. “ABC DEFGHIJ”)</li> <li>Fire the “onmouseover” event on that <code>&lt;li&gt;</code> element</li> <li>Click the <code>&lt;li&gt;</code> element.</li> </ol> <p>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. </p> <p>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.</p> <p>Can anyone help me to understand and solve the two problems I have mentioned? </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload