watin - 使用 WatiN 自动完成下拉菜单测试

Question

我正在使用 WatiN 来测试自动完成下拉菜单。

当用户输入 3 个字符后在字段中键入时，将触发 jquery 自动完成并显示无序列表。用户必须从列表中进行选择。

我无法使用 WatiN 从列表中进行选择/触发自动完成。

以下是开发人员使用的一些 html:

<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>

他们正在使用 jQuery UI 自动完成小部件:http://jqueryui.com/demos/autocomplete/

谷歌搜索 jQuery UI 自动完成测试，我发现了这个 Stack Overflow Q&A: Testing JQuery autocomplete ui with cucumber

包含似乎是关键信息的内容:“您需要先触发鼠标悬停，然后点击”

然后我用谷歌搜索 WatiN mouseover，找到了 http://blogs.telerik.com/testing/posts/08-05-29/how_to_select_radcombobox_item_with_watin.aspx这有一个小代码示例，其中包括:

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

(要明确我们的开发代码不使用 telerik 控件这只是一个示例)

在这一点上，我想我已经有了一个如何插入它的计划:

1. 在字段中输入所需值的一部分(例如“ABC”)
2. 找到 <ul>具有类“ui-autocomplete”和显示样式“block”的元素，等待它出现
3. 在那里面<ul>元素，找到 <li>文本为所需值的元素(例如“ABC DEFGHIJ”)
4. 在 <li> 上触发“onmouseover”事件元素
5. 点击 <li>元素。

我发现了两个问题:首先，WatiN 在输入字段中的输入在触发自动完成菜单出现方面非常糟糕，其次，点击菜单项不会导致自动完成的发生。

我发现向输入字段发送向下箭头键事件会促使菜单出现，但不会导致顶部菜单项突出显示(而如果您手动输入并点击向下箭头)。正确激活菜单项(包括将其 ID 设置为 ui-active-menuitem)可能是此处缺少的链接。

谁能帮我理解和解决我提到的两个问题？

Answer 1

这花了一点时间，但这是一个有效的例子。

要点

• 调用 JQuery 对象搜索 方法。这得到下拉列表以显示。
• 然后鼠标悬停您想要的项目。
• 然后单击您想要的项目。

为了让它正确选择项目，我需要按特定顺序执行上述所有三项操作。

代码

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();

以上工作使用 Watin 2.1。它不适用于 WatiN 2.0 RC。我没有检查实际的 2.0 版本。 2.0 RC 没有 List 和 ListItem 对象。仅在 IE8 上测试。