<<Previous Post << Complete Tutorial>> Next Post>>
In the previous article, I have practically demonstrated using the Absolute CSS Selectors in detail.
We should not be using the Absolute CSS Selectors in real-time projects, instead, we should be using Relative CSS Selectors in real-time projects.
The same disadvantages of using Absolute XPath Expression applies for Absolute CSS Selectors too.
The same advantage of Relative XPath Expressions over Absolute XPath Expressions applies for Relative CSS Expressions too.
In this article, I am going to give a good number of examples to practice Relative CSS Selectors in detail from scratch.
Pre-requisites: HTML Basics explained in the previous articles are required for understanding this article. HTLM Basics – click here to start learning.
Also, go through the below five links before going through this article:
- Hierarchy of HTML Source Code
- Installing ChroPath Add-on in Chrome Browser
- Using ChroPath Add-on in Chrome Browser
- Practice Absolute CSS Selectors in detail
Let’s get started.
Selenium Locators – Practice Relative CSS Selectors in detail here
Follow the below steps to practice Relative CSS Selectors in detail from scratch:
1) As we already know Relative CSS Selectors means Direct/Shortcut CSS Selectors which directly locate the UI elements using their tags in the Web Pages.
2) Relative CSS Selectors start with the direct tag to be located. Unlike Relative XPath Expressions which start with //, Relative CSS Selectors won’t start with //
3) In order to understand the Relative CSS Selectors better, we need to first learn Absolute CSS Selectors (Refer Practice Absolute CSS Selectors in detail)
4) Absolute CSS Selectors are for making your learning of CSS Selectors easier, while Relative CSS Selectors are really used in real time projects. We should not be using the Absolute CSS Selectors in real time projects, instead, we will be using Relative CSS Selectors in Real time Projects.
5) Let’s get started. Practice along with me by following the below step.
6) 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:
7) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:
8) Select ‘CSS Sel..’ option from the ‘Selectors’ dropdown as shown below:
9) Expand all the tags on the left side (i.e. <head> and <body> tags) as shown below:
10) Lets first locate the entire web page i.e. html tag using the Relative CSS Selectors.
Unlike Relative XPath Expressions which starts with //, Relative CSS Selectors doesn’t start with //.
And in order to locate the entire web page, we need to locate the html tag.
Hence we need to create a Relative CSS Selector html to locate the html tag directly.
Now type html and press ‘Enter’ key as shown below.
Observe that on pressing the ‘Enter’ keyboard key, the html Relative CSS Selector will be locating the entire HTML page. (i.e. css=1 attribute will be added in the html tag by ChroPath to state the same.)
11) The next challenge is to locate the head section of the web page i.e. head tag.
Hence we need to create a Relative CSS Selector head to locate the head tag directly.
Now type head and press ‘Enter’ key as shown below.
Observe that we don’t have to give the complete path in case of Relative CSS Selectors.
We are just giving the tag name to be located i.e. head
Observe that on pressing the ‘Enter’ keyboard key, the head Relative CSS Selector will be locating the head section of the web page. (i.e. css=1 attribute will be added in the head tag by ChroPath to state the same.)
12) The next challenge is to locate the title of the web page i.e. title tag.
Hence we need to create a Relative CSS Selector title to locate the title tag directly.
Now type title and press ‘Enter’ key as shown below.
Observe that we don’t have to give the complete path in case of Relative CSS Selector.
We are just giving the tag name to be located i.e. title
Observe that on pressing the ‘Enter’ keyboard key, the title Relative CSS Selector will be locating the title of the web page. (i.e. css=1 attribute will be added in the title tag by ChroPath to state the same.)
13) The next challenge is to locate the body section of the web page i.e. body tag.
Hence we need to create a Relative CSS Selector body to locate the body tag directly.
Now type body and press ‘Enter’ key as shown below.
Observe that we don’t have to give the complete path in case of Relative CSS Selectors.
We are just giving the tag name to be located i.e. body
Observe that on pressing the ‘Enter’ keyboard key, the body Relative CSS Selector will be locating the body section of the web page. (i.e. css=1 attribute will be added in the body tag by ChroPath to state the same.)
14) The next challenge is to locate all the Paragraphs on the web page i.e. p tags.
Hence we need to create a Relative CSS Selector p to locate all the p tags directly.
Now type p and press ‘Enter’ key as shown below.
Observe that we don’t have to give the complete path in case of Relative CSS Selectors.
We are just giving the tag names to be located i.e. p
Observe that on pressing the ‘Enter’ keyboard key, the p Relative CSS Selector will be locating all the Paragraphs on the web page. (i.e. css=1, css=2 attributes will be added in the p tags by ChroPath to state the same.)
15) Let’s locate the paragraph having the id attribute value as ‘para1′ by adding the [id=’para1′] to the Relative CSS Selector to from: p[id=’para1′]
Note: There is a small difference between mentioning the attribute names in XPath Expressions and CSS Selectors. In XPath Expressions, we mention @AttributeName = ‘value’ and whereas in CSS Selectors, we don’t use @ symbol before attribute names (i.e. AttributeName=’value’)
Let’s execute the p[id=’para1′] Relative CSS Selector in ChroPath and observe that the p tag having the id attribute value as ‘para1’ will be located as shown below:
As explained in the previous article, we can use # in place of id to locate the same as above:
p#para1
16) Let’s locate the paragraph having the id attribute value as ‘para2′ by adding the [id=’para2′] to the Relative CSS Selector to from: p[id=’para2′]
17) Let’s locate the paragraph having the class attribute value as ‘main’ by adding the [class=’main’] to the Relative CSS Selector to from: p[class=’main’]
As explained in the previous article, we can use . in place of class to locate the same as above:
p.main
18) Let’s locate the paragraph having the class attribute value as ‘sub’ by adding the [class=’sub’] to the Relative CSS Selector to from: p[class=’sub’]
19) Now let’s take two different attribute names and values to locate the p tags in the above web page.
Let’s locate all the paragraphs having the id attribute value as ‘para1’ and also class attribute value as ‘main’.
Now, to find the paragraphs having the id attribute as ‘para1’ and at the same time class attribute value as ‘main’, we need to append [id=’para1′] [class=’main’] to the above Relative CSSS Selector to form p[id=’para1′][class=’main’]
20) Similarly, let’s take two different attribute names and values to locate the p tags in the above web page.
Let’s locate all the paragraphs having the id attribute value as ‘para2’ and also class attribute value as ‘sub’.
Now, to find the paragraphs having the id attribute as ‘para2’ and at the same time class attribute value as ‘sub’, we need to append [id=’para2′] [class=’sub’] to the above Relative CSSS Selector to form p[id=’para2′][class=’sub’]
22) Let’s try to locate all the p tags having id attribute value as ‘para1’ and also class attribute value as ‘sub’ using the Relative CSS Selector: p[id=’para1′][class=’sub’]
As there are no p tags in the above web page having both id attribute value as ‘para1’ and class attribute value as ‘sub’, the ChroPath won’t be able to locate any p tag as shown in the below screenshot:
Here concludes the first 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>>