如何使用 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 命令的文檔。