Handling dynamic web elements is the major challenge in test automation. Selenium 3 offers three choices to handle dynamic web elements. We have already discussed the first technique i.e., handling changing web elements’ properties through dynamic XPath. Today we will learn the second method i.e., writing Dynamic Css Selector to handle changing web elements. Later we will discuss the third technique through Sizzle in subsequent blog posts.
Which is highly efficient as well as reliable, Dynamic XPath or Dynamic CSS Selector?
Most of the automation engineers on this planet would recommend using Css Selector to find web elements. Finding changing web elements through CSS selector are faster than dynamic XPath. Followings are few of logic in bullets:
- Each browser has different engines for XPath which make elements inconsistent
- CSS is always same irrespective of browsers
- Sometimes XPath becomes complex, whereas CSS is always simple
- Dynamic CSS Selector performs better
We have discussed 9 locators to identify web elements for any web application. Among those locators, dynamic CSS Selector and dynamic XPath has prominence in the automation industry. You should be intelligent enough in identifying dynamic web elements.
Tools required for generating CSS Selector
We have already discussed Firebug and Firepath plug-in for Mozilla Firefox. Kindly refer to the previous article on XPath where I have discussed Firebug and Firepath installation.
Generalized format for CSS Selector
Dynamic CSS Selector by using ID
Use ‘#’ (hash) symbol to generate CSS Selector with its ID
tagname #id Example: Input #identifierid
Dynamic CSS Selector by using Class Name
Use ‘.’ (dot) symbol to generate CSS Selector with its class name
tagname .className Example: div . Xb9hP
Dynamic CSS Selector by using Attribute
Here is the general formula to write CSS Selector with its attribute and value
tagname[attribute=’value’] Example: input[id='identifierId']
Dynamic CSS Selector by using Multiple Attributes
Generalized formula to write CSS selector with multiple attributes
tagname[attribute1=’value1’] [attribute2=’value2’] Example: input[id='identifierId'][name='identifier']
Dynamic CSS Selector by using Contains
Use ‘*’ (star) symbol to generate CSS Selector with contains
tagname[attribute*=’value’] Example: a[title*='How to write']
Dynamic CSS Selector by using Starts – With
Use ‘^’ (caret) symbol to generate CSS Selector with starts-with
tagname[attribute^=’value’] Example: a[title^='How to write']
Dynamic CSS Selector by using Ends – With
Use ‘$’ (dollar) symbol to generate CSS Selector with ends-with
tagname[attribute$=’value’] Example: a[title$='Selenium IDE']
Now with this article, you became the mastermind in finding any dynamic web elements in Selenium WebDriver. Hence, you can handle dynamic properties of any web elements by two methods, XPath and CSS Selector. It entirely depends on your discretion to pick either CSS Selector technique or XPath technique or some other direct locators. I would highly recommend you to practice them once with some POC on web applications of your choice.
If you get any doubts then do share in comments below.
The post A complete guide to writing dynamic CSS Selector in Selenium WebDriver appeared first on Inviul.