<<Previous Post << Complete Tutorial>> Next Post>>
In the previous article, I have practically demonstrated the third part of Relative CSS Selectors.
In this article, I am going to practically demonstrate using the first-child in CSS Selectors.
Let’s get started.
Selenium Locators – Using first-child in CSS Selectors
Follow the below steps to practice using first-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:
2) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:
3) Select ‘CSS Sel..’ option from the ‘Selectors’ dropdown as shown below:
4) Expand all the tags on the left side (i.e. <head> and <body> tags) as shown below:
5) Let’s locate the first child under the body tag using first-child in the CSS Selectors as shown below:
body > *:first-child
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:
6) Let’s locate the first child under the head tag using first-child in the CSS Selectors as shown below:
head > *:first-child
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 all the first child tag under the head tag got located as shown below:
7) Let’s locate the first child under the html tag using first-child in the CSS Selectors as shown below:
html > *:first-child
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 all the first child tag under the html tag got located as shown below:
8) Let’s locate the first p tag using first-child in the CSS Selectors as shown below:
p:first-child
Let’s execute the above Relative CSS Selector in the ChroPath and observe that the first p tag got located as shown below:
9) Let’s locate the first p tag having id attribute value as ‘para1’ using first-child in the CSS Selectors as shown below:
p[id=’para1′]:first-child
Let’s execute the above Relative CSS Selector in the ChroPath and observe that the first p tag having attribute value as ‘para1’ got located as shown below:
Here concludes the usage of first-child in CSS Selector.
In the next article, I will practically demonstrate the usage of last-child in CSS Selector.
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 ?
On a mission to contribute to the Software Testing Community in all possible ways.
<<Previous Post << Complete Tutorial>> Next Post>>