How To Create Custom Xpath In Selenium Webdriver

A good concept to understand in Test Automation is 'What is Xpath in Selenium'

Xpath in Selenium is the XML path to the specific element on a web page, we do this by starting form the very top of the HTML tag navigating to the attribute of the specific element along the HTML code

What Is Xpath Syntax

Xpath Syntax = //tagName[@attribute='value']

// : Search element any where in the DOM structure
Tagname: Tagname of the attribute
@: Select attribute
Attribute: Attribute name of the element
Value: Value of the attribute

Customized Xpath

How To Write Customized Xpath In Selenium Webdriver

To understand the Xpath syntax in selenium you have to understand the line of HTML code for every element you will like to locate on a web page

The highlighted blues HTML Code above is for the search button on the Ebay web page

The HTML Code reads : <input type="submit" class="class="btn btn-prim gh-spr" " id="gh-btn" value="Search">

As per HTML example code above for the first assignment expression;input type="submit"

Input = TagName
Attributes = type
Value = submit

As you can see there are a number of attributes for each element line of HTM code: Type, class, id and value…

Rule of thumb is always to select the attribute with unique

So to write the Xpath in selenium for the search button on the Ebay web page using type attribute, it will look like so;//Input[@type='submit']

Now you have the Xpath for the search button on the ebay web page in our example you can now go ahead and use it to write your code in eclipse for your automated test script

How Do I Write Xpath In Chrome Browser

We have seen above how to write or generate customized Xpath using Xpath syntax

There are two other commonly used methods to generate an Xpath to be used to locate elements on webpage

Via F12 or Inspect element

Press F12 or right click and 'Inspect' web element will display dev tools panel

Right click on highlighted HTML code for the web element, go to 'copy' on list displayed and then click on 'Copy Xpath'

Xpath should now be copied to clipboard and you can paste in your code in eclipse

DevTool Xpath

Via chropath Add-on

Chropath is a chrome browser add-on but can also be used on firefox browsers

How To Add ChroPath To Chrome Browser

Add chropath from chrome web store here

chropath extension

Once you have searched and add chropath to chrome browser you will get the chopath icon in the chrome menu

How To Generate XPath Using ChroPath

To generate Xpath inspect web element and click on chropath on menu in dev tool panel

Relative XPath, absolute XPath and CSS is generated as shown in below pic

Relative Xpath in dev tool panel text box

Also in picture below I have clicked the little pen symbol to edit relative Xpath which populates the relative xpath into the text box

Now copy Relative XPath, absolute XPath and use it in your eclipse automation code

That covers what is Xpath in selenium

Navigate to Day 12