Locating Element By Xpath -Part 1

XPath is a query language that is used for traversing through an XML document. It is commonly used to search particular elements or attributes with matching patterns.

XPath uses a path expression to select node or a list of nodes from an XML document.

XPath can be used when you don't have a suitable id , name or class name attribute for that element you want to locate.

XPath is used to find the location of any element on a webpage using HTML DOM structure

Pros:

 1) It can access any element, even though class, name, or id attributes are not available.

2)   You can travers  forward and backward directions.

Cons:

1) It is bit complicated to identifying the elements because of too many rules and considerations.

2)   while forming an XPath as it may not work if there are changes in the web application.

           

There are two types of XPath:

1) Absolute XPath

2) Relative XPath

Absolute XPath

It is easiest way to use, It starts from the root element within the web page and goes to identify the target element. Absolute XPath is begins with the single forward slash (/) ,which means you can select the element from the root node.

Disadvantage of the absolute XPath is that if there are any changes made in the DOM Structure of the element then that XPath gets failed.

Ex: /html[1]/body[1]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[2]/form[1]/table[1]/tbody[1]/tr[2]/td[1]/input[1] 

Scenario :

Open URL https://www.facebook.com/

Enter User Name and Password  

Click on the Login button.

Following is the steps to locate the element using Absolute XPath on webpage.

1)   Right click on Email or Phone web element on the page and select inspect option in the context menu

2)   Select the ChroPath from Right side box.

3)   Select Absolute Path option

same way you have to follow for other elements (Password and Login button).

Script:

from selenium import webdriver
from selenium.webdriver.common.by import By
chromePath="C:\\BrowserDrivers\\chromedriver.exe"
driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.facebook.com/")

driver.find_element(By.XPATH,"/html[1]/body[1]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[2]/form[1]/table[1]/tbody[1]/tr[2]/td[1]/input[1]").send_keys("Hello")

driver.find_element_by_xpath("/html[1]/body[1]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[2]/form[1]/table[1]/tbody[1]/tr[2]/td[2]/input[1]").send_keys("hello")

driver.find_element(By.XPATH,"/html[1]/body[1]/div[1]/div[2]/div[1]/div[1]/div[1]/div[1]/div[2]/form[1]/table[1]/tbody[1]/tr[2]/td[3]/label[1]/input[1]").click()

Note: until unless element is not identified by the relative xpath then only you should go for absolute XPath.

Relative Xpath

The relative XPath are easy to manage as they are short and concise. Relative Xpath the path starts from the middle of the HTML DOM structure.

It starts with the double forward slash (//), which means it can search the element anywhere at the webpage.

You can start from the middle of the HTML DOM structure and no need to write long xpath like Absolute XPath.

Syntax for Xpath:

Xpath=//tagname[@attribute='value']

// -> Select current node.

Tagname -> Tagname of the particular node.

@ -> Select attribute.

Attribute -> Attribute name of the node.

Value -> Value of the attribute.

Ex: //input[@type='email']

Different ways to write XPaths in Selenium

Double Slash(//): The XPath would be created to start selection from anywhere within the document.

Ex: //form[1]/table[1]/tbody[1]/tr[2]/td[1]/input[1]

Scenario :

Open URL https://www.facebook.com/

Enter User Name and Password  

Click on the Login button.

Following is the steps to locate the element using Relative XPath on webpage.

1)   Right click on Email or Phone web element on the page and select inspect option in the context menu.

2)   Start the selection of the element from middle of the page , here we started from ‘form’ tag to ‘input’ tag , formation is  //form[1]/table[1]/tbody[1]/tr[2]/td[1]/input[1]

same way you have to follow for other elements (Password and Login button).

Script:

from selenium import webdriver
from selenium.webdriver.common.by import By
chromePath="C:\\BrowserDrivers\\chromedriver.exe"

driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.facebook.com/")

driver.find_element(By.XPATH,"//form[1]/table[1]/tbody[1]/tr[2]/td[1]/input[1]").send_keys("Hello")

driver.find_element_by_xpath("//form[1]/table[1]/tbody[1]/tr[2]/td[2]/input[1]").send_keys("hello")

driver.find_element(By.XPATH,"//form[1]/table[1]/tbody[1]/tr[2]/td[3]/label[1]/input[1]").click()

Using ‘text() in Xpath

It is used to locate an element based on the text available on a webpage.

Snytax:

//tagname[text()=’textvalue’]

Or

//*[text()=’textvalue’]

In the below example to find any element based on the text using Xpath.

//a[text()='Sign in']

Script:

from selenium import webdriver
from selenium.webdriver.common.by import By
chromePath="C:\\BrowserDrivers\\chromedriver.exe"driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.rediff.com/")
driver.find_element_by_xpath("//a[text()='Sign in']").click()

You can use Contains() method with text() where some portion of attribute values changes dynamically.

Ex: //a[contains(text(),’Sign’)]

Script:

from selenium import webdriver
from selenium.webdriver.common.by import By
chromePath="C:\\BrowserDrivers\\chromedriver.exe"
driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.rediff.com/")
driver.find_element_by_xpath("//a[contains(text(),'Sign’)]").click()