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

Question

I am trying to find the children of an already found element. The problem I am having is that I can seem to only get all descendants of an existing element.

For example, given the following HTML snippet (you may recognize this as a bootstrap dropdown menu).

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

I already have the existing WebElement to the dropdown menu

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

And I am trying to get a handle to all the child li's of the outer most menu. Originally I was doing the following

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

assuming it would result in a final selector being built

.dropdown > .dropdown-menu > li > a

However, this throws an exception

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

Doing the following doesn't throw an exception but returns all descendants ... not just the children. The cound of menuItems is 10 instead of 5.

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

So I guess my ultimate question is there a way to use By.cssSelector to get just the direct children of an already found node?

XPATH is not an allowable solution.

Answer 1

What about change the logic a bit?

You have a WebElement called dropdown , but it is defined as class dropdown-menu in the DOM. Why not define dropdown as div.dropdown instead of ul.dropdown-menu ? Then your issue can be solved.

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