Sunday 1 May 2016

What is Xpath and how to write Xpath ?


In my previous post I have explained how to get HTML code for particular web element and view the tags, attributes and values.In this tutorial we will learn that how to write xpath to uniquely identify web elements so that we can perform actions like click , type and double click on them.

Xpath is w3c recommendation which is used to traverse XML document by using path expression. We are going go see simple examples of writing Xpath which will be useful for us in writing selenium automation test cases.

If you observe the HTML code then you will notice that for each tag there are attributes and values for it. We need to use these attributes and values to write our xpath. HTML tags are like <div>, <input >, <a>, <span> etc. The attributes are like id, class,href,text etc. And each attribute will have value.So using this we can create our own combination of Xpaths.

Video Tutorial -

 

I will tell you most commonly used syntax in writing xpath. 
// - to refer Node/Tag
@ - to refer attribute
' ' - to specify value

If you know these 3 then half of your work is done.

Let us see some examples of Xpath 

1.  //input[@class='cname']

2. //span[@text='textvalue']

3. //div[@class='classvalue'][contains(@onclick,'text value')]

4. //div[contains(@class ,'cname') and text()='Hello Text']

These are few sample examples which are pretty much self explanatory. If you know the tag name, attribute and value then you can use them to write your xpath as shown the above example. If you have any doubts or suggestions feel free to drop a comment.


How to locate Web Elements in Your Web Applications ?



Locating elements is the first step of starting automation. Locating element means going through HTML code of an website and finding unique data like id, class name etc but most effective way to locate elements ais Xpath. We will see in details how to write xpath soon.  In this post any reference to elements means web elements like button, text box, text field, drop down, menu bars etc.

First of all you need to check HTML code so that you can select unique attribute and value to locate the elements. Let us see how to get the HTML code withe Firebug plugin in Firefox browser or Chrome browser. It is very easy and effective method.

Video Tutorial -


Checking HTML code using Firebug -
1. Once you install FireFox plugin in the FireFox / Chrome browser
2. You will see a bug icon in your browser tool bar when you click on it, you will see a window opens up at botton of the page with HTML code


3. To inspect element click on the blue icon with arrow on right side as shown in below screen shot.


4.  Then mouse over on the menu item and check the highlighted HTML code for that Web Element.


5. You can right click on the HTML line of code and click on copy XPath to find the Xpath. But my advice is to write your own xpath which will be more consistent while running your test cases.


Once you can get HTML code for Web Elements you can locate elements using attributes and values right away inside your Selenium WebDriver Test cases. Do read the Next Post to find out How to write Xpath to Locate Web Elements.