<<Previous Post << Complete Tutorial>> Next Post>>
In the previous article, I have practically demonstrated the second part of Relative CSS Selectors.
In this article, I am going to practically demonstrate the third part of Relative CSS Selectors.
Let’s get started.
Selenium Locators – Relative CSS Selectors – Part 3
Follow the below steps to practice the third part of Relative CSS Selectors:
1) Open http://omayo.blogspot.com/ in Chrome Browser, where ChroPath is already installed (Refer ChroPath installation in Chrome Browser here and its usage in Chrome Browser here ) as shown below:
I have taken the below Web Application for the demonstration which is more complex than the Web Application I have used in the previous article (i.e. Relative XPath Expressions – Part 1) for demonstration.
2) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:
3) Select ‘CSS Sel’ option from the ‘Selectors’ dropdown as shown below:
4) Let’s locate the input tag having the ‘value’ attribute value as ‘blue’ using the below Relative CSS Selector:
input[value=’blue’]
Let’s execute the above Relative CSS Selector in the ChroPath and observe that the input tag having the ‘value’ attribute value as ‘blue’ got located as shown below:
5) Let’s locate all the tags having the ‘value’ attribute value as ‘blue’ using the below Relative CSS Selector:
[value=’blue’]
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the tag having the ‘value’ attribute value as ‘blue’ got located as shown below:
6) Let’s locate all the input tags on the page using the below Relative CSS Selector:
input
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the input tags on the page got located as shown below:
7) Let’s locate all the tags on the page having ‘value’ attribute using the below Relative CSS Selector:
[value]
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the tags on the page having ‘value’ attribute irrespective of the value assigned to it got located as shown below:
8) Let’s locate all the tags on the page having ‘id’ attribute using the below Relative CSS Selector:
[id]
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the tags on the page having ‘id’ attribute irrespective of the value assigned to it got located as shown below:
9) Let’s locate all the tags on the page having ‘name’ attribute using the below Relative CSS Selector:
[name]
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the tags on the page having ‘name’ attribute irrespective of the value assigned to it got located as shown below:
10) Let’s locate all the tags on the page having ‘href’ attribute using the below Relative CSS Selector:
[href]
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the tags on the page having ‘href’ attribute irrespective of the value assigned to it got located as shown below:
11) Let’s locate all the tags on the page having ‘src‘ attribute using the below Relative CSS Selector:
[src]
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the tags on the page having ‘src‘ attribute irrespective of the value assigned to it got located as shown below:
12) Let’s locate all the img tags on the page having ‘src‘ attribute using the below Relative CSS Selector:
img[src]
Let’s execute the above Relative CSS Selector in the ChroPath and observe that all the img tags on the page having ‘src‘ attribute irrespective of the value assigned to it got located as shown below:
Here concludes the third 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>>