<<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.
2) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:
3) Select ‘CSS Sel’ option from the ‘Selectors’ dropdown as shown below:
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 comma 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:
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:
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:
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:
body > *
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:
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:
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 ?
On a mission to contribute to the Software Testing Community in all possible ways.
<<Previous Post << Complete Tutorial>> Next Post>>