When Doing Selenium tests, to locate the certain web elements, there are several methods.

Like By.id, By.className, By.tagName, By.name... But among them all, we use By.xPath and By.cssSelector to specify the elements with complex structure in the web page.

Now, while we are writing script to find and locate those web elements, we should be aware of the differences of these two "locating stratogy".

There are  four reasons for using CSS Locators: 

1. They’re faster
2. They’re more readable
3. CSS is jQuery’s locating strategy
4. No one else uses XPATH anyways!

 

 the speed of XPath vs the speed of CSS Locators can be viewed in performance metric script .

There wasn’t much of a difference in Firefox, Safari, or Chrome, but with IE, the results were undeniable. Take a look:

 there is a tool called  cssify It does the handy work of translating your XPaths to CSS automatically.

Is there any case  when you shouldn’t use CSS Locators (yes, there are a few cases where it is not the right tool for the job). 

 

You should see this 

CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY 

The above picture shows many selector Usage are not supported before IE9 version and firefox 4 version. When writing cssSelectors we should take these into account.