Selenium Xpath Tutorial Step by Step Guide
Selenium Xpath Tutorial Step by Step Guide
Also Read:
Firebug – Firefox Plugin to identify element and to get complete xpath for elements with the help of Fire-path
WebDriver Element Locator tool – By this tool you can find complete xpath in C# , JAVA , PYTHON AND RUBY languages and separate X PATH locators also.You can download this tool from Here(WebDriver Element Locator).
Selenium Xpath Functions
Selenium xpath can written in two ways,those are as follows
2.Relative Path – In Relative path, xpath can be write with the help of
- Tag names
- Attribute names
- Attribute values
Relative Path:
Xpath in Selenium can be written in Relative path as based on tag names,tag attributes name and tag attributes values,let’s see the below examples.
Syntax : //tagname[@attribute name=’attribute value’]
Relative Path Examples:
If we have taken input type tagname for below code
Xpath for Input Tag with attributes :
<input id=”firstname” name=”firstname”/>
You can write xpath for above code as below
Tag name – input
Attribute name – id, name
Attribute value – firstname
//input[@id=’firstname’]
//input[@name=’lastname’]
Example 2 :
<input id=”searchbox” class=”gsfi” type=”text” label=”Search” title=”Searchbox” name=”wordsearch” />
For above code you can write Selenium xpath as follows
XPATH:
//input[@id=’searchbox’]
//input[@class=’gsfi’]
//input[@type=’text’]
//input[@title=’searchbox’]
//input[@name=’wordsearch’]
Xpath using Contains keyword:
We can write Xpath in Selenium using element attributes but here i am using contains keyword,let’s see below examples
<input id=”searchbox” class=”gsfi” type=”text” label=”Search” title=”Searchbox” name=”wordsearch” />
Xpath Examples:
//input[contains(@id,’searchbox’)]
//input[contains(@class,’gsfi’)]
//input[contains(@type,’text’)]
//input[contains(@title,’searchbox’)]
//input[contains(@name,’wordsearch’)]
Xpath for href url link:
For example i am using below simple url link ,please see below xpath and html code.
<a class=”gb_P” data-ved=”0EMIuCBMoAA” href=”https://mail.google.com/mail/?tab=wm” data-pid=”23″>Gmail</a>
You can write xpath for above code as below
tagname – a
tag attributes – class,data-ved,href
attribute values – gb_P,0EMIuCBMoAA,https://mail.google.com/mail/?tab=wm
XPATH:
//a[@data-ved=’0EMIuCBMoAA’]
//a[@class=’gb_P’]
//a[@href=’https://mail.google.com/mail/?tab=wm’]
//a[contains(@data-pid,’23’)]
//a[contains(@data-ved,’0EMIuCBMoAA’)]
//a[contains(@class,’gb_P’)]
//a[contains(@href,’https://mail.google.com/mail/?tab=wm’)]
//a[contains(@data-pid,’23’)]
Xpath using and :
As we see till now you can write xpath with single attributes but now we can write with multiple attributes,let’s see below example.
<input id=”searchbox” class=”gsfi” type=”text” label=”Search” title=”Searchbox” name=”wordsearch” />
XPATH:
//input[contains(@id, ‘seaarchbox’) and contains(@label,’seaarch’)]
//input[contains(@class, ‘gsf1′) and contains(@label,’seaarch’)]
Xpath for Dropdowns:
You can write different Xpath in Selenium for list boxes in order to select the list items,let’s see below HTML code and xpath examples.
<select id=”ArchiveMenu”>
<option value=”1″>Banana</option>
<option value=”2″>Apple</option>
<option value=”3″>Selenium</option>
<option value=”4″>Automation Testing</option>
</select>
XPATH:
//select[@id=’ArchiveMenu’]
//select[contains(@id,’ArchiveMenu’)]
//select[@value=’1′]
//select[contains(@value,’2′)]
//select[contains(.,’Automation Testing’)]
//select[contains(.,’Apple’)]
2.Absolute path:
Absolute path uses complete path from the Root Element to the desire respective element. Root Element - <html> Desired Element - <div>,<input> etc Example: /html/body/div[5]/div[2]/div/div[2]/div[2]/h2[1] Now let's how to write Absolute Xpath with below examples HTML Code: <html> <head> <title>Selenium Automation</title> </head> <body> <form> First Name: <input type="text" name="firstname"><br> Last Name: <input type="text" name="lastname"><br> Password: <input type="password" name="pwd"><br> Radio Button: Are you male or female?<br> <input type="radio" name="sex" value="male">Male <input type="radio" name="sex" value="female">Female<br> Check Box: Check the languages you know<br> <input type="checkbox" name="language" value="html">HTML<br> <input type="checkbox" name="language" value="php">PHP<br> <input type="checkbox" name="language" value="c">C<br> <input type="submit" value="submit"><br> </form> </body> </html> If i want to find First Name by xpath ,you can write as below /html/body/form/input - FirstName /html/body/form/input[2] - Lastname /html/body/form/input[3] - Password /html/body/form/input[4] - Male radio button
More Examples:
As you see above image i want to find the input search box element which is located under 3rd div – 1st div – input ,let’s see the below xpath.
 |
| ABSOLUTE XPATH – EXAMPLE |
XPATH:
/html/body/div/div[3]/form/div[2]/div[2]/div[1]/div[1]/div[3]/div/div/div[3]/div/input[1]
Root Element – /html/
Element Path – /body/div/div[3]/ before form
Path to Desire Element – Below Form -form/div[2]/div[2]/div[1]/div[1]/div[3]/div/div/div[3]/div/input[1]
Under form 2nd div
Under 2nd div – 2nd div
Under 2nd div – first div
Under first div – again first div
Under First div – again first div
Under First div – Thrid div div[3]
Like this path will continue for absolute xpath in Selenium.
