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

Question

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

这是代码：

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

Answer 1

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

我创建了这个JSFiddle来测试解决方案。 单击的元素将变为红色。

选项 1：使用 CSS 定位器。

| 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 选择器。

选项 2：使用 XPath 定位器。

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

有关更多想法，请查看 Selenium IDE 关于定位元素和可用的Selenese 命令的文档。