HomeSelenium

Selenium Locators – Practice Absolute CSS Selectors in detail

Selenium Locators – Practice Absolute CSS Selectors in detail

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

In the previous articles, I have explained ‘What is a CSS Selector?’ and the Hierarchy of HTML Source Code and  Types of CSS Selectors.

In this article, I am going to give a good number of examples to practice Absolute 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 three links before going through this article:

  1. Hierarchy of HTML Source Code
  2. Installing ChroPath Add-on in Chrome Browser
  3. Using ChroPath Add-on in Chrome Browser

Let’s get started.

Selenium Locators – Practice Absolute CSS Selectors in detail here

Follow the below steps to practice Absolute CSS Selectors in detail from scratch:

1) As we already know Absolute CSS Selector means Complete/Full CSS Selector which start from the root element i.e. html in the Web Pages.

2) All Absolute CSS Selectors start with html root tag.  Unlike Absolute XPath Expressions which start with single slash i.e. /, Absolute CSS Selectors don’t have any single slash at the beginning of the selector.

3) In order to understand the CSS Selectors, we need to get started by learning Absolute CSS Selectors from scratch.

4) Absolute CSS Selectors are for making your learning of CSS Selectors easier, while Relative CSS Selectors are 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 Projects.  (I will explain more on this in detail in the upcoming articles)

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:

Absolute XPath - Opening Basic Application

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

Absolute XPath - Open ChroPath

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

Absolute CSS Selectors - CSS Sel

 

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

Absolute CSS Selectors - expand head body tags

10) As every Absolute CSS Selector starts with html root tag, let’s enter the html as shown below into the ChroPath text field and press ‘Enter’ key on your keyboard.

Observe that on pressing ‘Enter’ key, ‘css=1’ attribute will be added by the ChroPath to the HTML code as shown below:

Absolute CSS Selectors - html locate

Observe that in the above screenshot, the entire web page got located by green dots lines using the above-entered CSS selector.

11) Now append one of the child tags of html tag i.e. ‘head’ to the above CSS Selector to form ‘html > head‘ and press ‘Enter’ key as shown below:

Note: Here you can see, we have to use Geater than symbol >,  instead of the single slash /  for going to the next child tag.

Observe that the given Absolute CSS Selector is locating the head tag in the HTML. (i.e. css=1 attribute will be added in the head tag by ChroPath to state the same.)

Absolute CSS Selectors - head located

12) Now append the child tag of head tag i.e. title tag to the above Absolute CSS Selector to form ‘html > head > title‘ and press ‘Enter’ key as shown below:

Observe that the given Absolute CSS Selector is locating the title tag in the HTML. (i.e. css=1 attribute will be added in the title tag by ChroPath to state the same.)

Absolute CSS Selectors - title located

13) Now append the child tag of html tag i.e. body tag to the ‘html’ Absolute CSS Selector to form ‘html > body‘ and press ‘Enter’ key as shown below:

Observe that the given Absolute CSS Selector is locating the body tag in the HTML. (i.e. css=1 attribute will be added in the body tag by ChroPath to state the same.). Also, observe that the body section of the Web Page is highlighted on the UI too as shown below:

Absolute CSS Selectors - body located

14) Now append the child tag of body tag i.e. body tag to the ‘p’ Absolute CSS Selector to form ‘html > body >p’ and press ‘Enter’ key as shown below:

Observe that the given Absolute CSS Selector is locating the p tags in the HTML. (i.e. css=1 and css=2 attributes will be added in the two p tags by ChroPath to state the same.). Also, observe that all the paragraphs on the Web Page are highlighted on the UI too as shown below:

Absolute CSS Selectors - p tags

15) Now let’s locate the p tag having the id attribute value as ‘para1’ using the above Absolute CSS Selector to form html > body > p[id=’para1′] and press ‘Enter’ key as shown below:

Observe that the given Absolute CSS Selector is locating the p tag having the id attribute value as ‘para1’ in the HTML. (i.e. css=1 attribute will be added in the first p tag by ChroPath to state the same.). Also, observe that all the first paragraph on the Web Page is highlighted on the UI too as shown below:

Absolute CSS Selectors - p tag having id as para1

We can also use a symbol # in place of id attribute name as shown below:

html > body > p#para1

i.e. Instead of html > body > p[id=’para1′], we can use html > body > p#para1

Let’s execute the html > body > p#para1 in the ChroPath and observe that it will work similar to the html > body > p[id=’para1′] as shown below:

Absolute CSS Selectors - p hash id

16) Similarly, we can locate the Paragraph tags having the id attribute value as ‘para2’ in the above web page.

In order to locate all the paragraphs in the above page, we have used the Absolute CSS Selector as html > body > p

Now, to find the paragraphs having the id attribute value as ‘para2’, we need to append [id=’para2′] to the above Absolute CSS Selector to form html > body > p[id=’para2′]

Type the html > body > p[id=’para2′] in the ChroPath and press Enter to find whether it is locating the Paragraphs having the id attribute value mentioned as ‘para2’ as shown below:

Absolute CSS Selectors - second p

17) Now let’s take a different attribute name and value to locate the p tags in the above web page.

Let’s locate all the paragraphs having the class attribute value as ‘main’.

In order to locate all the paragraphs in the above page, we have used the Absolute CSS Selector as html > body > p

Now, to find the paragraphs having the class attribute value as ‘main’, we need to append [class=’main’] to the above Absolute CSS Selector to form html > body > p[class=’main’]

Type the html > body > p[class=’main’] in the ChroPath and press Enter to find whether it is locating the Paragraphs having the class attribute value mentioned as ‘main’ as shown below:

Absolute CSS Selectors - p class main

We can also use a symbol . in place of class attribute name as shown below:

html > body > p.main

i.e. Instead of html > body > p[class=’main’], we can use html > body > p.main

Let’s execute the html > body > p.main in the ChroPath and observe that it will work similar to the html > body > p[class=’main’] as shown below:

Absolute CSS Selectors - p class dot

18) Similarly, we can locate the Paragraph tags having the class attribute value as ‘sub’ in the above web page.

In order to locate all the paragraphs in the above page, we have used the Absolute CSS Selector as html > body > p

Now, to find the paragraphs having the class attribute value as ‘sub’, we need to append [class=’sub’] to the above Absolute CSS Selector to form html > body > p[class=’sub’]

Type the html > body > p[class=’sub’] in the ChroPath and press Enter to find whether it is locating the Paragraphs having the class attribute value mentioned as ‘sub’ as shown below:

Absolute CSS Selectors - 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’.

In order to locate all the paragraphs in the above page, we have used the Absolute CSS Selector as html > body > p

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 Absolute CSS Selector to form  html > body > p[id=’para1′][class=’main’]

Type the html > body > p[id=’para1′][class=’main’] in the ChroPath and press Enter to find whether it is locating the Paragraphs having the id attribute value as ‘para1’ and also the class attribute value mentioned as ‘main’ as shown below:

Absolute CSS Selectors - p para1 main

20) Similarly, let’s locate the p tags having both id attribute value as ‘para2’ and class attribute value as ‘sub’ 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’.

In order to locate all the paragraphs in the above page, we have used the Absolute CSS Selector as html > body > p

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 Absolute CSS Selector to form  html > body > p[id=’para2′][class=’sub’]

Type the html > body > p[id=’para2′][class=’sub’] in the ChroPath and press Enter to find whether it is locating the Paragraphs having the id attribute value as ‘para2’ and also the class attribute value mentioned as ‘sub’ as shown below:

Absolute CSS Selectors - p para2 sub

21) Let’s try to locate all the p tags having id attribute value as ‘para1’ and also class attribute value as ‘sub’ using the Absolute CSS Selector  html > body > 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:

Absolute CSS Selectors - zero

Here concludes this article.

In the next article, I will start explaining the Relative CSS Selectors from scratch 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 🙂

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 *