HomeSelenium

Selenium Locators – Relative CSS Selectors – Part 2

Selenium Locators – Relative CSS Selectors – Part 2

<<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:

Absolute XPath - Opening Basic Application

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

Absolute XPath - Open ChroPath

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

Relative CSS Selectors - CSS Sel

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

Relative CSS Selectors - expand tags

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:

Relative CSS Selectors - body p

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:

Relative CSS Selectors - html p

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:

Relative CSS Selectors - anytag id

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:

Relative CSS Selectors - anytag hash

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:

Relative CSS Selectors - anytag class

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:

Relative-CSS-Selectors-anytag-dot

 

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:

Relative CSS Selectors - p tags id

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:

Relative CSS Selectors - all id

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:

Relative CSS Selectors - p class

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:

Relative CSS Selectors - all class

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 🙂

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 *