Selenium Get First, Last and Nth Child Element using CSS selector

In selenium testing locating elements based on the child is pretty convenient. The CSS selectors provide various ways to find child elements from parent elements.

This elements tracking in based on a child can be done by 3 ways in Selenium using CSS Selector:

1. Selenium Get First Child Element

Locates the first child/element under the parent tag.

Syntax

locator:first-child 

Example 

By.cssSelector("ul.menu-content>li:first-child");

2. Get last child element in Selenium

Locates the last child/element under the parent body.

Syntax

locator:last-child

Example

By.cssSelector("ul.menu-content>li:last-child");

3. Selenium CSS Selector nth-child

Locates the child/element based on the number we provide that is the position where the element is present under the parent tag.

Syntax

locator:nth-child(n)

Here, n starts from 1.

Example

By.cssSelector("ul.menu-content>li:nth-child(2)");

Demo

Enough talk let us dive into the real-time use of these selectors!

For example purpose, we will be automating http://www.automationpractice.com

These will be the things we are gonna implement in our test:

1. Visit the page.
2. Click on the women tab using first child.
3. Click on the T-shirt tab using last child.
4. Click on the Dresses tab using nth child.

For this, we will be using the CSS selector child tracking method.

Let us first Track down the elements of the women tab, T-shirt tab, and Dresses tab using the child CSS selector method.

Now here ul.menu-content selector covers the entire body of the three tabs under which they are present.

So in this case it is the parent.

Under this ul tag, there are 3 li tags which are the respective tags of women, dresses, and T-shirts.

So using these we will create selectors based on the first, last and nth-child.

• For Women: ul.menu-content>li:first-child
• For Dresses: ul.menu-content>li:nth-child(2)
• For Tshirt: ul.menu-content>li:last-child

Example: Find First, Last and Nth Element in Selenium

public class AppTest 
{
    WebDriver driver;
	
    @BeforeClass
    public void befClass()
    {
        System.setProperty("webdriver.chrome.driver",System.getProperty("user.dir") + "//drivers//chromedriver");
        driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
        driver.get("http://www.automationpractice.com");
    }
	
    @Test
    public void LoginTest()
    {
        WebElement firstChild = driver.findElement(By.cssSelector("ul.menu-content>li:first-child"));
        firstChild.click();
        WebElement lastChild = driver.findElement(By.cssSelector("ul.menu-content>li:last-child"));
        lastChild.click();
        WebElement nthChild = driver.findElement(By.cssSelector("ul.menu-content>li:nth-child(2)"));
        nthChild.click();
    }
}

Above code will executed on website automationpractice.com. Here

• First child: This will find the first element in the menu, which is Women and click on it.
• Last child: This will find the last element under the menu, that is, T-Shirts and click on it.
• Nth Child: This will find the  nth element which is second menu item on site with link text Dresses and click on it.