What is xPath


XPath is a language that describes a way to locate and process items in Extensible Markup Language (XML) documents by using an addressing syntax based on a path through the document’s logical structure or hierarchy. XPath in used in Selenium  to uniquely identify an element on a Webpage as element locator just like the way we use PostCode and House address in real world to locate Home Address.

What is Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. The whole content of this page is taken from the https://getfirebug.com/html.

Why it is Useful to Selenium Automation Tester

1) View source live : Firefox has a “View Source” window, but it doesn’t show you what the HTML source really looks like once it has been transformed by JavaScript. Firebug’s HTML tab shows you what the HTML looks like right now.
2) See changes highlighted: In any JavaScript-driven website, HTML elements are constantly being created, removed, and modified. Wouldn’t it be nice if you could see exactly what, when, and where these changes take place? Firebug highlights changes to the HTML in yellow immediately when they occur. If you want to spy even closer, you have the option to also scroll every change into view, so you won’t miss a thing.
3) Find elements with the mouse: Something in your page doesn’t quite look right and you want to know why. There’s no faster way to get answers than to click the “Inspect” button on Firebug’s toolbar and then prepare for immediate gratification. As you move around the page, whatever is beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.
4) Copy the source: Right-click on any element, and you’ll have several options for copying aspects of that element to the clipboard, including its HTML fragment, the value of its “innerHTML” property, or an XPath expression that identifies the element uniquely.

How to Download FireBug

FireBug is a plugin which comes with Firefox browser, hence it is easily be downloadable from Firefox itself.
1) Go to Tools > Web Developer > Get More Tools.
Firebug-1
2) It will open a Webpage and display all the plugins available for Firefox browser. As we need Firebug, just click on Add to Firefox button for Firebug.
Firebug-2
3) Hit on Install Now button to proceed.
Firebug-3
4) Once the Installation is finished, press ‘F-12′ to open Firebug tool. It will display like this.
Firebug-5

How to Use it

Most of the times it is used to Inspect Elements on a Webpage and to get the XPath of the Elements from a Webpage.
1) Inspect Elements: Please visit Finding Elements using Browser Inspector for details explanation on How to find Elements using Browser Inspector.
2) Copy XPath: Copying XPath is really very handy. Once you are done with selecting an Element using Inspector, all you need to do is to Right click on the HTML code of the selected element and select Copy XPath.
Firebug-6
3) Now you can paste the copied XPath on your test script by pressing ‘Ctrl + V‘. It will display like this:

What is FirePath

It is an extension to FireBug that adds a development tool to edit, inspect and generate XPath expressions and CSS3 Selectors.

Why it is Useful to Selenium Automation Tester

1) You can type self-written XPath and check if it is correct by highlighting the results directly on the Webpage.
2) Generate an XPath expression or a CSS selector for an element by right clicking on it and selecting “Inspect in FirePath” in the context menu.
3) Like Firebug it also gives you the Xpath of the selected Element.

 How to Download Firepath

Firepath is an extension to Firebug, so you would only be able to install it after installing FireBug.
1) Go to Tools > Web Developer > Get More Tools.
Firebug-1
2) It will open a Webpage and will display all the plugins available for Firefox browser. As I said before that it is an extension to Firebug, you need to click on the Extensions link and the type Firepath on the Search field. As we need FirePath, just click on Add to Firefox button for FirePath.
FirePath-1
3) Hit on Install Now button to proceed.
FirePath-2
3) Once it is installed, it will ask to Restart the browser. Click on Restart Now button.
FirePath-3
4) Once it is opened, press ‘F-12′ to open Firebug tool. It will display the FirePath on the same console like this:
FirePath-4

 How to Use FirePath

1) Inspect Elements: Please visit Finding Elements using Browser Inspector for details explanation on How to find Elements using Browser Inspector. But unlike FireBug, it displays the XPath of the selected element on the console.
FirePath-6
2) Copy XPath: Copying XPath is really very handy. Once you are done with selecting an Element using Inspector, all you need to do is to Copy the XPath of the selected element and paste it to your Test script by pressing ‘Ctrl + V‘. It will display like this:

Choosing Effective XPaths


Earlier generating xpaths used to be a tedious task but now with the help of Firebug and other tools, it became hell easy. But choosing the right and effective xpath is equally important and you cannot always rely on tools for the best decisions.
In this tutorial I am explaining the 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. Locators

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.Locators-4
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 ‘//’

single slash at the start of Xpath instructs XPath engine to look for element starting from root node.
double slash at the start of Xpath instructs XPath engine to search look for matching element anywhere 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’.Locators-2
Now click on the same element with the Inspector, the new xpath will look like this:Locators-1
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

single slash ‘/’ anywhere in Xpath signifies to look for the element immediately insideits parent element.
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:
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’)]Xpath-locator-1
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:
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’)]Xpath-locator-2
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:
Xpath-locator-6
Few more examples on the run:
Xpath-locator-3
Xpath-locator-4


Comments

Popular posts from this blog

What’s the Difference Between Docker and Kubernetes?

TestNG Listeners

Database Sharding