使用 WatiN 自动完成下拉菜单测试 [英] Autocomplete DropDown Menu Testing using WatiN

问题描述

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

I am using WatiN to test an autocomplete drop down.

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

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.

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

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

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

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>

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

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

谷歌搜索 jQuery UI 自动完成测试，我发现了这个 Stack Overflow Q&A:使用黄瓜测试 JQuery 自动完成用户界面

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"

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

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

(需要说明的是，我们的开发代码没有使用 Telerik 控件，这只是一个示例)

(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. 在字段中输入所需值的一部分(例如ABC")
2. 找到一个
   元素，类为ui-autocomplete"，显示样式为block"，等待它出现
   • 在该
     元素中，找到文本为所需值的
     • 元素(例如ABC DEFGHIJ")
     • 在该
     • 元素上触发onmouseover"事件
     • 点击
     • 元素.

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.

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

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.

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

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?

推荐答案

这花了一些时间，但这里有一个可行的示例.

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

要点

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

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

代码

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

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.

这篇关于使用 WatiN 自动完成下拉菜单测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！