如何通過現有元素（而不是xpath）查找子元素（不是所有后代元素）

Question

我試圖找到已經找到的元素的孩子。 我遇到的問題是我似乎只能得到現有元素的所有后代。

例如，給定以下HTML片段（您可能會將其識別為引導程序下拉菜單）。

<div class="dropdown">
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li>
      <a tabindex="-1" href="#">Action</a>
    </li>
    <li>
      <a tabindex="-1" href="#">Another action</a>
    </li>
    <li>
      <a tabindex="-1" href="#">Something else here</a>
    </li>
    <li class="divider"></li>
    <li class="dropdown-submenu">
      <a tabindex="-1" href="#">More options</a>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Second level link</a></li>
        <li><a tabindex="-1" href="#">Second level link</a></li>
        <li><a tabindex="-1" href="#">Second level link</a></li>
        <li><a tabindex="-1" href="#">Second level link</a></li>
        <li><a tabindex="-1" href="#">Second level link</a></li>
      </ul>
    </li>
  </ul>
</div>

我已經在下拉菜單中使用了現有的WebElement

WebElement dropdown = driver.findElementBy(By.cssSelector(".dropdown > .dropdown-menu");

而我正試圖找到最外層菜單中所有孩子的手柄。 最初我在做以下事情

List<WebElement> menuItems = dropdown.findElements(By.cssSelector(" > li > a");

假設它會導致構建最終選擇器

.dropdown > .dropdown-menu > li > a

但是，這引發了一個例外

Caused by: org.openqa.selenium.remote.ErrorHandler$UnknownServerException: An invalid or illegal string was specified

執行以下操作不會拋出異常，但會返回所有后代...而不僅僅是子項。 menuItems的結果是10而不是5。

List<WebElement> menuItems = dropdown.findElements(By.cssSelector("li > a");

所以我想我的最終問題是有一種方法可以使用By.cssSelector來獲取已經找到的節點的直接子節點嗎？

XPATH不是一個允許的解決方案。

Answer 1

如何改變邏輯呢？

您有一個名為dropdown的WebElement ，但它在DOM中定義為class dropdown-menu 。 為什么不將dropdown定義為div.dropdown而不是ul.dropdown-menu ？ 那你的問題就可以解決了。

WebElement dropdown = driver.findElement(By.cssSelector(".dropdown");
List<WebElement> menuItems = dropdown.findElements(By.cssSelector(".dropdown-menu[role='menu'] > li > a");
List<WebElement> subMenuItems = dropdown.findElements(By.cssSelector(".dropdown-submenu li > a");

Answer 2

為什么不把它們結合起來？

List<WebElement> menuItems = driver.findElements(By.cssSelector(".dropdown > .dropdown-menu  > li > a");