<<Previous Post << Complete Tutorial>> Next Post>>
In the previous article, I have practically demonstrated the first part of Relative CSS Selectors.
In this article, I am going to practically demonstrate the second part of Relative CSS Selectors.
Let’s get started.
Selenium Locators – Relative CSS Selectors – Part 2
Follow the below steps to practice the second part of Relative 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 p tags inside the body tag using the Relative CSS Selector.
First, we need to locate the body tag using the Relative CSS Selector body
In CSS Selectors, we use > for the immediate child and give space between the tags to directly go to the next child or grand child tags.
To the above Relative CSS Selectors, let’s append p tag with space as shown below:
body p
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the p tags under the body tag are getting located as shown below:
6) Let’s locate the p tags inside the html tag using the Relative CSS Selector.
First, we need to locate the body tag using the Relative CSS Selector html
In CSS Selectors, we use > for the immediate child and give space between the tags to directly go to the next child or grandchild tags.
To the above Relative CSS Selectors, let’s append p tag with space as shown below:
html p
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the p tags under the html tag are getting located as shown below:
7) Now, let’s locate all the UI elements on the page having the id attribute value as ‘para2’
Relative CSS Selector for locating the p tag having the id attribute value as ‘para2’ is p[id=’para2′]
If we have to locate any tag instead of just p tag having this id, we need to replace p tag with nothing as shown below:
[id=’para2′]
Let’s execute the above CSS Selector to locate all the UI elements on the page having the id attribute value as ‘para2’ as shown below:
We can replace the id in the above Relative CSS Selector with # as shown below:
#para2
The above Relative CSS Selector will also give the same results as above:
8) Now, let’s locate all the UI elements on the page having the class attribute value as ‘main’
Relative CSS Selector for locating the p tag having the class attribute value as ‘main’ is p[class=’main’]
If we have to locate any tag instead of just p tag having this class, we need to replace p tag with nothing as shown below:
[class=’main’]
Let’s execute the above CSS Selector to locate all the UI elements on the page having the class attribute value as ‘main’ as shown below:
We can replace the class in the above Relative CSS Selector with . as shown below:
.main
The above Relative CSS Selector will also give the same results as above:
9) The below Relative CSS Selector will locate all the p tags having ‘id’ attribute with any value using Relative CSS Selector.
p[id]
In the above Relative CSS Selector, we have not assigned any value to the id attribute, hence it will locate all the p tags having id attribute irrespective of the assigned values.
Let’s execute the above CSS Selector to locate all the p tags on the page having the id attribute with any assigned values as shown below:
10) The below Relative CSS Selector will locate all the tags having ‘id’ attribute with any value using Relative CSS Selector.
[id]
In the above Relative CSS Selector, we have not given any tag name and not assigned any value to the id attribute, hence it will locate all the tags having id attribute irrespective of the assigned values.
Let’s execute the above CSS Selector to locate all the tags on the page having the id attribute with any assigned values as shown below:
11) The below Relative CSS Selector will locate all the p tags having ‘class’ attribute with any value using Relative CSS Selector.
p[class]
In the above Relative CSS Selector, we have not assigned any value to the class attribute, hence it will locate all the p tags having class attribute irrespective of the assigned values.
Let’s execute the above CSS Selector to locate all the p tags on the page having the class attribute with any assigned values as shown below:
12) The below Relative CSS Selector will locate all the tags having ‘class’ attribute with any value using Relative CSS Selector.
[class]
In the above Relative CSS Selector, we have not given any tag name and not assigned any value to the class attribute, hence it will locate all the tags having class attribute irrespective of the assigned values.
Let’s execute the above CSS Selector to locate all the tags on the page having the class attribute with any assigned values as shown below:
Here concludes the second part of Relative CSS Selectors.
In the next article, I will practically demonstrate the other set of Relative CSS Selectors examples in detail.
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>>