Selenium Locators - XPath Tutorial

What is XPath?

It is a XML Path Language to select the particular node from the XML document.

XPath use HTML tag and attribute value combination to locate particular web element on the web page.

What is XML?

XML stands for eXtensible Markup Language. XML is a markup language much like HTML. XML was designed to store and transport data. XML was designed to be self-descriptive.

Types of XPath:

1> Absolute XPath:

• It is a direct way to locate an element.
• It is very brittle.
• Starts with single slash “/” that means starting to search from the root.

Example: /html[1]/body[1]/div[1]/div[3]/form[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[1]

2> Relative XPath:

• Starts from the middle of the HTML DOM.
• Starts with a double slash “//” that means it can start to search anywhere in the DOM structure.
• Shorter than Absolute XPath.

Example: //input[@value='Travelling']

Note: We only use the Relative XPath as it is more reliable then Absolute XPath.

XPath Syntax

Let's Create Some XPath using Above Syntax for Below HTML Code

Below are different type of XPath for Above Image of HTML Web Page:

1> //label[@for='fname']

HTML Tag Name: label
Attribute Name: for
Attribute Value: fname

2> //input[@name='firstname']

HTML Tag Name: input
Attribute Name: name
Attribute Value: firstname

3> //input[@placeholder='Your Username...']

HTML Tag Name: input
Attribute Name: placeholder
Attribute Value: Your Username...

4> //*[@type='text']

HTML Tag Name: * Means All Tags
Attribute Name: type
Attribute Value: text

5> AND & OR Conditional for Multiple Attributes

AND Example: //input[@type='text' and @id='fname']

Condition: AND
HTML Tag Name: input
Attribute Name: type  and id
Attribute Value: text and fname

OR Example: //textarea[@id='subject' or @name='subject']

Condition: OR
HTML Tag Name: textarea
Attribute Name: id or name
Attribute Value: subject

XPath Useful Method

1> Contains (): is a Method used in XPath expression. 
It is used when the value of any attribute changes dynamically, for an example, login information.

XPath Syntax = //TagName[ contains (@type, ‘sub’)]

Example = //img[ contains (@src,’sprites’)]


2> Starts-with (): is a Function finds the element whose attributes value changes on refresh or any operation on the web page.

XPath Syntax  = //TagName[ starts-with (@type, ‘sub’)]

Example = //img[ starts-with(@alt,”Shop”)]


3> Text (): is a Function, we find the element with exact text match as shown below. 

XPath Syntax  = //TagName[text() = “Surname”]

Example = //img[text() = “Surname”)]


4> Last (): is select the last element (of mentioned type) out of all input element present.

XPath Syntax = //TagName[@attributeName='attributeValue'][last()-1]

Example =  //input[@type='text'][last()]
                       //input[@type='text'][last()-1]


5> Position (): is select the element out of all input element present depending on the position number provided. 

XPath Syntax = //TagName[@attributeName='attributeValue'][position()=2]

Example:  //input[@type='text'][position()=2]
                     //input[@type='text'][3]

Selenium CSS Locators Tutorial