Now a days we are mostly preferring to use cssSelector than XPath.
CSS selectors perform far better than Xpath and it is well documented in Selenium community. Here are some reasons,
Xpath engines are different in each browser, hence make them inconsistent
IE does not have a native xpath engine, therefore selenium injects its own xpath engine for compatibility of its API. Hence we lose the advantage of using native browser features that WebDriver inherently promotes.
Xpath tend to become complex and hence make hard to read in my opinion
However there are some situations where, you need to use xpath, for example, searching for a parent element or searching element by its text (I wouldn't recommend the later).
If you are testing content then do not use selectors that are dependent on the content of the elements. That will be a maintenance nightmare for every locale. Try talking with developers and use techniques that they used to externalize the text in the application, like dictionaries or resource bundles etc.
- It’s faster than XPath.
- It’s much easier to learn and implement.
- You have a high chance of finding your elements.
- It’s compatible with most browsers to date.
Overall there are two circumstances where XPath is markedly slower than cssSelector. But they are easily avoidable.
The performance difference is slightly in favor of css-selectors for non-IE browsers and slightly in favor of xpath for IE browsers.
Following are few options how to make customer CSS.
1. id--> htmltag#id , #id
2. class --> htmltag.classname, .classname, .c1.c2.c3, htmltag.c1.c2.c3...cn
3. parent>childtag
ul#categories
#username
input#username
input.form-control.private-form__control.login-email
input#username.form-control.private-form__control.login-email
input.login-email
.form-control.private-form__control.login-email
4. htmltag[id='value']
//div[@id='test']
input[id='username'] -- css with one attribute
//input[@id='username'] --xpath
input[id='username'][type='email'] -- css with two attributes
//input[@id='username' and @type='email'] -- xpath
5. contains the text in css:
input[id*='user']
input[id*='name']
id =
test_123
test_345
test_456
input[id*=test_]
6. starting the text in css:
input[id^='user']
7. ending the text in css:
input[id$='name']
8. comma in css:
div.private-form__input-wrapper, input#username
9. first-of-type in css:
ul#categories>li:first-of-type
10. last-of-type in css:
ul#categories>li:last-of-type
11. nth-of-type
ul#categories>li:nth-of-type(1)
ul#categories>li:nth-of-type(14)
ul#categories>li:nth-of-type(3)
ul#categories>li:nth-of-type(n) -- all
12. sibling of element:
div.private-form__input-wrapper + div
div.private-form__input-wrapper+div.private-form__meta
ul#categories>li:nth-of-type(3)+li
13. not operator in css:
input.form-control.private-form__control:not(.login-password)
