Xpath Expressions versus CSS Selectors

Out of all the locator strategies Xpath Expressions locator strategy is the powerful one, but CSS Selectors locator strategy is the recommended one.

The below is the reason behind recommending CSS Selectors over Xpath Expressions:

CSS Selectors are speed in identifying GUI Elements and hence improves the performance of your Selenium Automation scripts

But practically speaking, the performance difference between CSS Selectors over Xpath Expressions in identifying GUI elements is negligible. Hence this is not the main reason for recommending CSS Selectors over the powerful Xpath Expressions.

The below is the reason behind why Xpath Expressions are powerful over CSS Selectors:

Xpath Expressions can traverse backward and forward in HTML code, for identifying the GUI elements, where as CSS Selectors can only traverse forward. i.e. Using Xpath Expressions, we can locate the child element using the parent element’s unique ids, names etc. And also using Xpath expressions, we can locate the parent element using the child element’s unique ids, names etc. But CSS Selectors, cannot locate the parent element using the child element’s unique ids, names etc. Hence Xpath Expressions are powerful in identifying GUI elements over CSS Selectors.

By looking the above explanation, Xpath Expressions needs to be recommend over CSS Selectors. But the truth is, in some cases Xpath Expressions are recommend over CSS Selectors and in some other cases, CSS Selectors are recommend over Xpath Expressions. Now, lets find out why:

Xpath Expressions are not suitable, if you want your Automation Scripts to run on Internet Explorer browser. By using Xpath Expressions for identifying GUI elements, Selenium may not be able to identify few GUI elements on the web pages which are rendered on Internet Explorer browser. Hence if your requirement is to run the Selenium Automation Scripts on Internet Explorer browser, CSS Selectors are recommend over Xpath Expressions. But, if the CSS Selectors are not able to identify the GUI elements, then the powerful Xpath Expressions needs to be used.

But if you requirement is to run your Automation Scripts on Firefox and Chrome browsers only, then Xpath Expressions are the best choice over CSS Selectors, as they are more powerful than CSS Selectors.          

Hence, in case of Internet Explorer, CSS Selectors are recommended over Xpath Expressions. But if the browsers list for running automation scripts don’t have Internet Explorer browser, then powerful Xpath Expressions can be used over CSS Selectors.