CSS Selector vs XPath in Selenium

Profile picture for user arilio666

This article will show the difference between CSS and Xpath Locator in selenium.

Both the locators CSS and Xpath are used frequently in selenium. Xpath and CSS are utilized when there are no unique attributes or locators like id, classname, tag name, etc.

Flow:

Xpath flows bidirectionally, traversing both from parent to child and from child to parent.

CSS flows in one direction, meaning the traverse can be only from parent to child.

Performance:

Xpath is relatively slower in terms of speed and performance.

CSS, on the other end, has better performance and speed.

Identification:

Xpath can locate elements based on visible text appearing on the screen with the text() function.

CSS cannot locate the text of the element.

Customization:

Xpath does not have any customization features like CSS.

On the other end, CSS can be created with attribute id and class.
For id, it can be represented with #; for class, it can be by a dot.

Expression:

Xpath is expressed by //tagname[@attribute = 'value'].

CSS by tagname[attribute = 'Value']

Types:

Xpath has two types absolute and relative XPath.

CSS has no such types available.