HomeSelenium

Selenium Locators – Using comma and asterisk symbols in CSS Selectors

Selenium Locators – Using comma and asterisk symbols in CSS Selectors

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

In the previous article, I have practically demonstrated the usage of the nth-child in CSS Selectors.

In this article, I am going to practically demonstrate using the wildcards and different symbols in CSS Selectors.

Let’s get started.

Selenium Locators – Using comma and asterisk symbols in CSS Selectors

Follow the below steps to practice using the comma and asterisk symbols in 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 use the comma symbol in the CSS Selectors as shown below:

textarea[id=’ta1′] , button[id=’but2′]

The above example has, two CSS Selector Statements which are separated by c0mma symbol ,

The comma symbol in the above example will perform OR operation and will locate two UI elements using the two CSS Selectors.

Let’s execute the above CSS Selector in the ChroPath and observe that the two UI elements will be located (One UI element will be located by the CSS Selector that is there on the left side of the comma symbol and another UI element will be located by the CSS Selector that is there on the right side of the comma symbol) as shown below:

Selenium Locators - Using comma in CSS Selectors

5) Let’s use the Asterisk symbol (*) in the CSS Selectors as shown below:

*

The above example will locate all the UI elements on the web page.

Let’s execute the above CSS Selector in the ChroPath and observe that all the UI elements on the page will be located as shown below:

Selenium Locators - Using asterisk in CSS Selectors

6) Let’s use the Asterisk symbol (*) in the CSS Selectors to locate all the immediate child tags under the head tag as shown below:

head > *

The above example will locate all the immediate child tags under the head tag.

Let’s execute the above CSS Selector in the ChroPath and observe that all the immediate child tags under the head tag will be located as shown below:

Selenium Locators - Using asterisk head

 

7) Let’s use the Asterisk symbol (*) in the CSS Selectors to locate all the immediate child tags under the body  tag as shown below:

b0dy > *

The above example will locate all the immediate child tags under the body tag.

Let’s execute the above CSS Selector in the ChroPath and observe that all the immediate child tags under the body tag will be located as shown below:

Selenium Locators - Using asterisk body

9) Let’s use the Asterisk symbol (*) in the CSS Selectors to locate all the immediate child tags and grandchild tags under the body tag as shown below:

body *

The above example will locate all the immediate child tags and grandchild tags under the body tag.

Let’s execute the above CSS Selector in the ChroPath and observe that all the immediate child tags and grandchild tags under the body tag will be located as shown below:

Selenium Locators - Using asterisk body all

Here concludes the usage of comma and asterisk symbols in CSS Selector.

In the next article, I will practically demonstrate the usage of Starts With, Ends With and Contains Symbols in CSS Selectors.

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 *