使用 WatiN 自动完成下拉菜单测试答案

【问题标题】：Autocomplete DropDown Menu Testing using WatiN使用 WatiN 自动完成下拉菜单测试
【发布时间】：2011-09-15 16:29:40
【问题描述】：

我正在使用 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 控件，这只是一个示例）

此时我想我已经制定了如何驾驶它的计划：

在字段中输入所需值的一部分（例如“ABC”）
找到一个类为“ui-autocomplete”并显示样式为“block”的<ul>元素，等待它出现
在该 <ul> 元素中，找到文本为所需值的 <li> 元素（例如“ABC DEFGHIJ”）
在 <li> 元素上触发“onmouseover”事件
点击<li>元素。

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

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

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

【问题讨论】：

标签： watin

【解决方案1】：

花了一点时间，但这是一个工作示例。

要点

调用JQuery 对象的search 方法。这将获取下拉列表显示。
然后触发 onmouseover 你想要的项目。
然后点击你想要的项目。

为了让它正确选择项目，我需要按特定顺序完成以上所有三个操作。

代码

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 上测试。

【讨论】：

这解决了问题。谢谢你。它在选择它时没有显示列表中项目的突出显示（我将进一步研究），但它确实正确选择了项目:)
除此之外，这里还有更多信息：forum.jquery.com/topic/…。还发现，如果您通过 jquery 在 TextField 上进行模糊处理，这也可以（尽管它实际上不会显示列表，所以这可能不是所需要的）
帮我解决了问题。谢谢

【解决方案2】：

我在我正在测试的应用程序中也遇到了类似的问题。当我使用 TypeText 在文本字段中输入时，字符会被输入两次。

我们做了如下。

string mySubStr = value.Substring(0, value.Length - 3);
datavalue.Value = mySubStr;
datavalue.AppendText(value.Substring(value.Length - 3, 3));
Thread.Sleep(500);
datavalue.KeyDown((char)System.Windows.Forms.Keys.Down);
datavalue.KeyDown((char)System.Windows.Forms.Keys.Enter);

其中 datavalue 是对文本字段的引用，而 value 是要键入的值。

【讨论】：