使用 WatiN 进行自动完成下拉菜单测试

发布于 2024-12-04 22:25:35 字数 2189 浏览 1 评论 0原文

我正在使用 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 问答：使用 Cucumber 测试 JQuery 自动完成 ui

包含似乎是关键信息：“您需要首先触发鼠标悬停，然后单击“

然后我在 Google 上搜索 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”的
在该 < 中/code> 元素，找到元素，其文本为所需值（例如“ABC DEFGHIJ”）
在该
元素上触发“onmouseover”事件
单击
元素。

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

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

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

原文

I am using WatiN to test an autocomplete drop down.

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.

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

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>

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

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”

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

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

Type part of the desired value into the field (e.g. “ABC”)
Find a <ul> element with class “ui-autocomplete” and display style “block”, waiting until it is present
Within that <ul> element, find the <li> element whose text is the desired value (e.g. “ABC DEFGHIJ”)
Fire the “onmouseover” event on that <li> element
Click the <li> element.

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.

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

屋檐 2024-12-11 22:25:35

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

要点

调用 JQuery 对象 search 方法。这样就得到了下拉列表
来展示。
然后将鼠标悬停在您想要的项目上。
然后单击您想要的项目。

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

代码

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

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

Key points

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.

Code

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

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.

回复收藏 0 原文

无边思念无边月 2024-12-11 22:25:35

我在正在测试的应用程序中也遇到了类似的问题。当我使用 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 是要键入的值。

I have also run into a similar problem in an application that I am testing. When I type in the textfield using TypeText, the characters get typed twice.

What we did is as follows.

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

where datavalue is a reference to the textfield and value is the value that is to be keyed in.

回复收藏 0 原文

~没有更多了~