Element recognition with cssSelector in Selenium Automation

 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)