如何使用 Selenium IDE 为自动完成 ul 单击指定的 li?

2022-01-14 00:00:00 automated-tests html-lists html qa selenium-ide

我正在使用 Selenium IDE 进行一些测试，并尝试使用它从自动完成中选择指定的选项.我的问题是，自动完成功能内置在 <ul> 中，并且两个 <li> 可能是相同的.如何点击指定的li?如何对 Selenium 说单击第一个 li"或单击带有文本apples"的 li?我尝试了一些我找到的方法，但都是对于其他类型的 Selenium，在 Selenium IDE 中没有一个有用.

I'm using Selenium IDE for some test and trying to use it to select an specified option from an autocomplete. My problem is, the autocomplete is built in a <ul> and the two <li> possibles are identical. How to click a specified li? How to say to Selenium "click the first li" or "click the li with the text "apples"? I'm tried some ways that I found, but all are for other types of Selenium, and none are useful in Selenium IDE.

在此先感谢，并为我的英语不好感到抱歉！

Thanks in advance and sorry for my bad english!

代码如下:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1003; top: 360.683px; left: 549.5px; display: block; width: 401px;">
  <li class="ac_item ui-menu-item" role="menuitem">
    <a class="clearfix ui-corner-all" tabindex="-1">
      <span class="c1">
        <b>Apple</b>
        <br>
        <span class="small secondary">Apples</span>
        </span>
      </span>
    </a>
  </li>
  <li class="ac_item ui-menu-item" role="menuitem">
    <a class="clearfix ui-corner-all" tabindex="-1">
      <span class="c1">
        <b>Orange</b>
        <br>
        <span class="small secondary">Oranges</span>
        </span>
    </span>
    </a>
  </li>
</ul>

推荐答案

Selenium API 为您提供了多种方法来完成此任务.由于您没有传统的下拉菜单，因此无法使用 select 命令.这里有两个解决方案，点击自动完成中的第二个元素.

The Selenium API gives you a number of ways to accomplish this. Since you don't have a traditional dropdown, you can't use the select command. Here are two solutions that click the second element in the autocomplete.

我创建了这个 JSFiddle 来测试解决方案.被点击的元素会变成红色.

I created this JSFiddle to test the solutions. The clicked element will turn red.

选项 1:使用 CSS 定位器.

Option 1: Use a CSS locator.

| Command               | Target                                               |
| open                  | http://jsfiddle.net/ansonhoyt/GYJW9/embedded/result/ |
| waitForElementPresent | css=ul.ui-autocomplete                               |
| click                 | css=ul.ui-autocomplete li.ui-menu-item:nth-child(2)  |

注意:运行速度很快，而且大多数人对 CSS 感到满意，但此示例要求目标浏览器支持 CSS3 nth-child 选择器.

Note: Runs fast, and most people are comfortable with CSS, but this example requires that the targeted browser support the CSS3 nth-child selector.

选项 2:使用 XPath 定位器.

Option 2: Use an XPath locator.

| Command               | Target                                               |
| open                  | http://jsfiddle.net/ansonhoyt/GYJW9/embedded/result/ |
| waitForElementPresent | css=ul.ui-autocomplete                               |
| click                 | //ul[contains(@class,'ui-autocomplete')]/li[2]       |

注意:XPath 对大多数人来说不太熟悉，与 CSS 定位器相比可能非常慢，尤其是在 IE 中.

Note: XPath are less familiar for most people and can be very slow compared to CSS locators, especially in IE.

有关更多想法，请查看 定位元素上的 Selenium IDE 文档以及可用的 Selenese 命令.

For more ideas, check out the documentation for Selenium IDE on locating elements and on the available Selenese commands.

相关文章