Difference between X-path and CSS selector in Selenium

Selenium is an open source, automated, and valuable tool used for test automation. However, Selenium is not just a single tool but a collection of tools. It provides a single interface that lets you write test scripts in programming languages like Ruby, Java, NodeJS, PHP, Pearl, Python, and C#, among others. It works with all types of browsers and operating systems.

Selenium Tools Suite

---Selenium Integrated Development Environment (IDE)

---Selenium Remote Control (RC)

---WebDriver

---Selenium Grid

Some benefits of Test Automation:

--Open-Source

--Language support

--Support across browsers

--Supports Operating Systems

--Support for programming languages and framework

--Tests across devices

--Constant updates

--Loaded Selenium suites

--Ease of implementation

--Reusability

In order to perform automation testing, we would need to locate HTML elements. We can locate these web elements using either X-path or CSS selectors. This article will address the various differences between XPath and CSS selectors. Along the way, we’ll talk about what each of the options brings to the table.

X-path:

XPath is a Selenium technique that is used to navigate through the HTML structure of a webpage. It is a syntax that makes finding elements on a webpage possible using XML path expression. Sometimes in selenium automation we cannot find locators like ID, name, class, etc. And this is when XPath is used to locate those elements on the webpage. XPath provides various syntax to locate the web elements on a web page.

Types of XPath:

There are two different types of XPath:

1. Absolute XPath

2. Relative XPath

Absolute XPath refers to the direct way of finding an element. The major drawback of Absolute XPath is that if there are any changes in the element's path, then the XPath will fail. The XPath begins with a single forward-slash (/), which states that the element can be selected from the root node.

The syntax of the Absolute XPath looks like this:

Absolute X-path: /html/body/div[2]/div[2]/div[3]/body[2]/div[1]/span[2]/div[1]/h4/span[1]/a[4]/b[1]

Relative XPath the path begins from the middle of the HTML DOM structure. Here, the structure starts with a double forward-slash (//) that states that the element can be searched anywhere on the webpage.

Relative XPath enables you to write from the middle of the HTML DOM structure without any need to write a long XPath.

The syntax of the Relative X-path looks like this:

Relative X-path: //div[@class='featured-box']//h4[1]/a[2]/b

Some special characters in X-path

Single slash "/" = if you want to select the first available node, this expression is used.

e.g. /html

Double slash "//" = It selects any element in the DOM that matches the selection.

e.g. //input

Address sign "@" = It will select all the elements which having particular attribute of the node.

e.g. //@text

Dot "." = It selects the current node.

e.g. //h2/.

Double dot ".." = It selects the parent of the current node.

e.g/ //div/input/..

Asterisk ""* = It selects any element present in the node

e.g. //div/*

Address and Asterisk "@"* = It selects any attribute of the given node.

e.g. //div[@*]

Pipe "|" = This expression is used to select a different path.

e.g. //div/h5

We have learned about X-path, now lets take a look at CSS selector.

CSS selector:

The CSS Selectors mainly use the character sequence pattern, which identifies the web elements based on their HTML structure. The CSS Selector combines an element selector and a selector value that can identify particular elements on a web page. CSS selectors can locate web elements without ID, class, or Name. CSS selector can be created based on following strategies.

e.g. node[attribute_name = 'attribute_value']

- node is the tag name of the HTML element, which needs to locate.

- attribute_name is the name of the attribute which can locate the element.

-attribute_value is the value of the attribute, which can locate the element.

CSS selector types—

CSS Simple selector—It is used for finding elements based on simple attributes.

e.g.

__ Using Tag names selector

---Using ID selector

---Using Class selector

---Using Universal selector

CSS Attribute selector—It is used for finding the elements based on attributes and attributes values.

e.g. --Attribute name: input[placeholder]

--Attribute Value: “input[placeholder=’lastname’]”

--Attribute value- partial text- whole word: “input[placeholder~=’answer’]”

--Attribute value- partial text- text: “input[placeholder*=’que’]”

--Attribute value- starts with- text: “p[class^=’me’]”

--Attribute value- ends with- text: “p[class$=’ute’]”

CSS selector combinator selector—It is used for defining the relationship between elements in the html webpage.

e.g. –Descendant selector: “.container select”

-- Child Selector: “.container>div>select”

--Adjacent sibling selector: “input[placeholder=’details’]+select

--General sibling selector: “input[placeholder=’details’]~a”

CSS Pseudo-class selector—It is used for finding the elements based on elements locations/positions/indexes.

e.g. Conditions --

.and

.or

.not

Pseudo-classes--

.first-child

.last-child

.nth-child

.first-of-type

.last-of-type

.nth-of-type

Let us look at some syntaxes for X-path and CSS selector in below table:

Locators	X-path	CSS selector
ID	​//input[@id='name']	input#name
Name	​//input[@name='user']	input[name='user']
Classname	//div[@class='container']	div.container
​Child	//div[@name='email'/input]	​div[name='login form']>input
Descendant	//div[@name='login']//input	div[name='login']input
Parent	input[@id='uname']/parent::div	NA
Following-sibling	//label[@name='email']/following-sibling::input	label[name='email']+input
Preceding-sibling	//td[text()='sign']/preceding-sibling::td	NA
nth child	//div[@name='user']/input[3]	div[name='user']input:nth-child[3]
first child	​div[@name='user']/input[2]	div[name='user']input:first-child
and	//input[@name='pwd' and @type='text']	input[name='pwd'],[type='text']
or	//input[@name='pwd' or @id='user']	input[name='pwd'],input[id='user']
not	//input[@class='fill' and not(@type='text')]	input.button:not([type='text'])
​Attribute-contains	//input[contains(@placeholder,'lastname')]	input[placeholder*='lastname']
​attribute-starts-with	//input[starts-with(@placeholder,'check']	input[placeholder^='check']
Attribute-ends-with	//input[ends-with(@placeholder,'lastname')]	//input[placeholder$='lastname']
text	//a[text()='firstname']	NA
normalize-space	​//label[normalize-space(text()='lastname')]	NA

There are advantages and disadvantages to both X-Path and CSS selectors. Functions which are supported by CSS selector are supported by X-path and apart from that X-path has extra functions like finding element using text. We don't have any method in CSS selector but in X-path we can use text() function. Creating in XPath is more flexible than in CSS Selector. X-path finds elements comparatively faster than CSS selector. A limiting factor when dealing with selectors is the fact that they get more complex as the type of element evolves from simple through pseudo to combinators. Multiple selectors would also make it more complex to even use selectors in the first place. CSS selectors are easier to learn and implement.