<<Previous Post << Complete Tutorial>> Next Post>>
In the previous article, I have practically explained using the comma & asterisk symbols in CSS Selectors.
In this article, I am going to practically explain using the starts with (Cap Symbol ^), ends with (Dollar Symbol $) and contains (Asterisk Symbol *) in CSS Selectors.
Let’s get started.
Selenium Locators – Using starts with, ends with and contains in CSS Selectors
Follow the below steps to practice using the starts with (Cap Symbol ^), ends with (Dollar Symbol $) and contains (Asterisk Symbol *) in 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:
2) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:
3) Select ‘CSS Sel..’ option from the ‘Selectors’ dropdown as shown below:
4) Expand all the tags on the left side (i.e. <head> and <body> tags) as shown below:
5) Let’s locate the p tag having the class attribute value as ‘main’ using the CSS Selectors as shown below:
p[class=’main’]
Let’s execute the above Relative CSS Selector in the ChroPath and observe that the p tag having the class attribute value as ‘main’ got located as shown below:
Now, let’s locate the above same p tag using the first two letters of partial text in its class attribute value ‘main’.
To achieve this, we need to use Starts With (i.e. Cap Symbol ^) in the CSS Selectors as shown below:
p[class^=’ma’]
The above CSS Selector uses Starts With (i.e. Cap Symbol ^) to locate the p tag using the first two letters ‘ma‘ in its class attribute value ‘main’.
Let’s execute the above CSS Selector in the ChroPath and observe that the p tag having the class attribute value starting with ‘ma‘ got located as shown below:
Now, let’s locate the above same p tag using the last two letters of partial text in its class attribute value ‘main’.
To achieve this, we need to use Ends With (i.e. Dollar Symbol $) in the CSS Selectors as shown below:
p[class$=’in’]
The above CSS Selector uses Ends With (i.e. Dollar Symbol $) to locate the p tag using the last two letters ‘in‘ in its class attribute value ‘main’.
Let’s execute the above CSS Selector in the ChroPath and observe that the p tag having the class attribute value ending with ‘in‘ got located as shown below:
Now, let’s locate the above same p tag using the middle two letters of partial text in its class attribute value ‘main’.
To achieve this, we need to use Contains (i.e. Asterisk Symbol *) in the CSS Selectors as shown below:
p[class*=’ai’]
The above CSS Selector uses Contains (i.e. Asterisk Symbol *) to locate the p tag using the middle two letters ‘ai‘ in its class attribute value ‘main’.
Let’s execute the above CSS Selector in the ChroPath and observe that the p tag having the class attribute value containing ‘ai‘ got located as shown below:
We can also use contains (*) in CSS Selectors to locate using the beginning and ending text in the attribute values.
Examples:
p[class*=’ma‘] – locates the p tag having the class attribute value containing ‘ma’ text, which is at the begging of ‘main’ text
p[class*=’in‘] – locates the p tag having the class attribute value containing ‘in’ text, which is at the ending of ‘main’ text
The main purpose of using starts with (^), ends with ($) and contains (*) in CSS Selector is to locate the UI elements having the attribute values text which is dynamically changing at the beginning, middle or end.
Now, I am going to explain the actual purpose of contains() function in real time Selenium Automation cases.
There may be some situation where we won’t be able to locate the UI elements on the page as their attribute values change dynamically.
For example: In the id=’QAFox123‘, the after numbers are dynamically changing to something say id=’QAFox456.
We can simply create a CSS Selectors using starts with (^) as tagName[id^=’QAFox’)]
For example: In the id=’123QAFox’, the before numbers are dynamically changing to something say id=’456QAFox‘.
We can simply create a CSS Selectors using ends with ($) as tagName[id$=’QAFox’)]
For example: In the id=’123QAFox456‘, the before numbers are dynamically changing to something say id=’789QAFox012‘.
We can simply create a CSS Selectors using contains (*) as tagName[id*=’QAFox’)]
Though I cannot replicate the above purpose and example in a real-time web application now, we can simply use the above strategy to deal with such dynamical changing things in real-time applications.
Here concludes this article on using Stars With (^), Ends With ($) and Contains (*) in CSS Selectors.
In the next article, I will practically demonstrate using not 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>>