HomeSelenium

Selenium Locators – Using nth-child in CSS Selectors

Selenium Locators – Using nth-child in CSS Selectors

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

In the previous article, I have practically demonstrated the usage of the last-child in CSS Selectors.

In this article, I am going to practically demonstrate using the nth-child in CSS Selectors.

Let’s get started.

Selenium Locators – Using nth-child in CSS Selectors

Follow the below steps to practice using nth-child in CSS Selectors:

1) Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Chrome Browser, where ChroPath is already installed (Refer ChroPath installation in Chrome Browser here and usage in Chrome Browser here ) as shown below:

I have taken a very basic Web Application for demonstration as shown in the below screenshot to make your learning easy:

Absolute XPath - Opening Basic Application

2) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:

Absolute XPath - Open ChroPath

3) Select ‘CSS Sel..’ option from the ‘Selectors’ dropdown as shown below:

Relative CSS Selectors - CSS Sel

4) Expand all the tags on the left side (i.e. <head> and <body> tags) as shown below:

Relative CSS Selectors - expand tags

5) Let’s locate the second child under the html tag using nth-child in the CSS Selectors as shown below:

html> *:nth-child(2)

Note: * symbol in the above CSS Selector stands for any tag

Let’s execute the above Relative CSS Selector in the ChroPath and observe that the second child tag under the html tag got located as shown below:

CSS Selectors - nth child 2 html

6) Let’s locate the first child under the html tag using nth-child in the CSS Selectors as shown below:

html> *:nth-child(1)

Note: * symbol in the above CSS Selector stands for any tag

Let’s execute the above Relative CSS Selector in the ChroPath and observe that the first child tag under the html tag got located as shown below:

CSS Selectors - nth child 1 html

7) Let’s locate the first child under the body tag using nth-child in the CSS Selectors as shown below:

body > *:nth-child(1)

Note: * symbol in the above CSS Selector stands for any tag

Let’s execute the above Relative CSS Selector in the ChroPath and observe that the first child tag under the body tag got located as shown below:

CSS Selectors - nth child 1 body

8) Let’s locate the second child under the body tag using nth-child in the CSS Selectors as shown below:

body > *:nth-child(2)

Note: * symbol in the above CSS Selector stands for any tag

Let’s execute the above Relative CSS Selector in the ChroPath and observe that the second child tag under the body tag got located as shown below:

CSS Selectors - nth child 2 body

9) Let’s locate the second p child tag under the body tag using nth-child in the CSS Selectors as shown below:

body > p:nth-child(2)

Let’s execute the above Relative CSS Selector in the ChroPath and observe that the second child tag under the body tag got located as shown below:

CSS Selectors - nth p child 2 body

10) Let’s locate the second p tag on the page using nth-child in the CSS Selectors as shown below:

p:nth-child(2)

Let’s execute the above Relative CSS Selector in the ChroPath and observe that the second p tag on the page got located as shown below:

CSS Selectors - nth p child 2

11)  Let’s locate the second p tag on the page having the id attribute value as ‘para2’ using nth-child in the CSS Selectors as shown below:

p[id=’para2′]:nth-child(2)

Let’s execute the above Relative CSS Selector in the ChroPath and observe that the second p tag having the id attribute value as ‘para2’ got located on the page as shown below:

CSS Selectors - nth p id child 2

12) Let’s locate the second p tag on the page having html tag as ancestor tag using nth-child in the CSS Selectors as shown below:

html p:nth-child(2)

Let’s execute the above Relative CSS Selector in the ChroPath and observe that the second p tag who’s ancestor is html tag got located on the page as shown below:

CSS Selectors - nth p child 2 html

Here concludes the usage of nth-child in CSS Selector.

In the next article, I will practically demonstrate the usage of Wildcards and other Symbols in CSS Selectors.

Next Steps:

  • > To learn more about Selenium, continue to the next post (Click on Next Post link below)
  • > Check complete Selenium Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning 🙂

About Me > Arun Motoori

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

If you like this article, share it on LinkedIn using the below button:

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *