Selenium specifically targets and interacts with the immediate child elements of a WebElement

Question

Is there a way to select only the direct children of a WebElement using cssSelector?

webElement.findElements(By.cssSelector("> li");

I want to specifically target the immediate children of an element.

Although I am familiar with the css selector "parent > children" which works fine, my scenario is different.

Consider the following HTML structure:

<ul class="x">
    <li>
        <ul>
            <li>
            </li>
        </ul>
    </li>

    <li>
    </li>
</ul>

List<WebElement> webElements = driver.findElements(By.cssSelector("ul.x > li"));

This code snippet retrieves only the direct sub-children of the ul tag, resulting in a List size of 2. However, I encounter a different scenario:

WebElement webElement = driver.findElement(By.cssSelector("ul.x"));
webElement.findElements(By.cssSelector("li");

The issue here is that this code fetches all 'li' elements instead of just the direct children. This time, the List size is 3.

I attempted the following:

webElement.findElements(By.cssSelector("> li");

but unfortunately, it resulted in an error:

org.openqa.selenium.InvalidSelectorException: invalid selector: An invalid or illegal selector was specified

Answer 1

Answer №1

To locate elements, use xpath:

WebElement element = driver.findElement(By.cssSelector("ul.x"));
element.findElements(By.xpath("./li");

Answer 2

To locate elements, use xpath:

WebElement element = driver.findElement(By.cssSelector("ul.x"));
element.findElements(By.xpath("./li");