HomeSelenium

Selenium Locators – Relative CSS Selectors – Part 3

Selenium Locators – Relative CSS Selectors – Part 3

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

Relative XPath - More complex application

 

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

Relative XPath - ChroPath

 

 

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

Relative CSS Selectors - CSS Sel

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:

Relative CSS Selectors - input value blue

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:

Relative CSS Selectors - value blue

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:

Relative CSS Selectors - input tags

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:

Relative CSS Selectors - value

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:

Relative CSS Selectors - id

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:

Relative CSS Selectors - name

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:

Relative CSS Selectors - href

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:

Relative CSS Selectors - src

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:

Relative CSS Selectors - img src

 

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 🙂

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 *