http://www.w3schools.com/xpath/xpath_syntax.asp
different ways of choosing xpaths and choosing the most effective xpaths.
Example: Let’s take an example of RSS button at the bottom of the page in the footer section of www.store.demoqa.com. 
Technique 1 | Absolute XPath: The easiest way of finding the xpath is to use the Browser Inspector tool to locate an element and get the xpath of it:
XPath Generated by the tool is : /html/body/div[2]/div/div/footer/section[3]/div/ul/li[3]/a
Technique 2 | Relative XPath: At times XPath generated by Firebug are too lengthy and you see there is a possibility of getting a shorter XPath. Above xpath will technically work, but each of those nested relationships will need to be present 100% of the time, or the locator will not function. Above choosed xpath is known as Absolute xpath. There is a good chance that your xpath will vary in every release. It is always better to choose Relative xpath, as it helps us to reduce the chance of element not found exception.
To choose the relative xpath, it is advisable to look for the recent Id attribute. Look below at the HTML code of the above screen shot.
You can see the recent or last Id produced is ‘footer_nav‘. This id would be appropriate in this case, so a quality xpath will look like this: //*[@id='social-media']/ul/li[3]/a
Did you notice the difference between the Absolute and Relative xpaths?
Absolute xpath: /html/body/div[2]/div/div/footer/section[3]/div/ul/li[3]/a
Relative xpath: //*[@id='social-media']/ul/li[3]/a
Absolute xpath is using single slash at the start of the xpath and relative is using double slash.
Difference between single ‘/’ or double ‘//’
A single slash at the start of Xpath instructs XPath engine to look for element starting from root node.
A double slash at the start of Xpath instructs XPath engine to search look for matching elementanywhere in the XML document.
Choosing Relative xpath using FirePath
There is an alternate way to get the relative xpath with help of the FirePath tool. Click on the drop down menu on the Firepath button and Unselect ‘Generate absolute XPath’.
Now click on the same element with the Inspector, the new xpath will look like this:
If something gets changed above the id social-media, your xpath will still work.
Technique 3 | Relative XPath | Combination of Double Slash: Relative xpath can be choose in many ways and to understand that, it is required to understand the usage of single & double slashes in the xpaths.
Usage of Single ‘/’ and double ‘//’ in the xpath
A single slash ‘/’ anywhere in Xpath signifies to look for the element immediately inside its parent element.
A double slash ‘//’ signifies to look for any child or any grand-child element inside the parent element.
Finding it confusing, just look at the xpath of the same RSS button with using double slashes in the middle of the xpath:
Absolute xpath: /html/body/div[2]/div/div/footer/section[3]/div/ul/li[3]/a
FirePath xpath: //*[@id='social-media']/ul/li[3]/a
New relative xpath: //body//footer/section[3]/div/ul/li[3]/a
Another relative xpath: //body//section[3]/div/ul/li[3]/a
I would suggest you to try it yourself, so that you can understand it more efficiently.
Technique 4 | Partial XPath | Contains Keyword : Most of the times tester face issues when the locator’s properties are dynamically generating. Let’s take the example of my profile image on this same page at the right side of the screen and assume that the ‘src’ of the image is dynamically generating. The html code of the div looks like this:
1
2
3
4
5
|
<div class="profile_cont" itemtype="http://schema.org/Article" itemscope="">
<img src="http://toolsqa.com/wp-content/uploads/2014/02/Profile.jpg?51a507" itemprop="image">
</div>
|
The only thing we are sure here is that the text ‘Profile’ will always be included in the src of this image, so we can utilize this hint in our xpath like this: //img[contains(@src,'Profile')]
Technique 5 | Partial XPath | Starts-With Keyword : Now let’s take another example of the Linked In image on this same page at the right side of the screen just under the My Profile section and again assume that the ‘src’ of the image is dynamically generating. The html code of the div looks like this:
1
|
<img alt="Visit Us On Linkedin" style="border:0px;" src="http://www.toolsqa.com/wp-content/uploads/2014/04/linkedin.png">
|
The only thing we are sure here is that the text ‘Visit Us On Linkedin’ will always be included in the ‘src’ of this image, so we can utilize this hint in our xpath like this: //img[starts-with(@alt,'Visit Us On Linkedin')]
Technique 6 | Partial XPath | Text Keyword : Take another example of the text of my name “Lakshay Sharma’ on this same page at the right side of the screen just under the My Profile section. The html code of the div looks like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
I’M
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<b itemprop="name">LAKSHAY SHARMA</b>
. I’M A
<b>TEST AUTOMATION ENGINEER</b>
</span>
.
|
Few more examples on the run: