How to find xpath in firefox?

In my last posts, we have learnt well how to locate web element in Selenium Webdriver using locators. We will learn in this post:

It is good practice to write XPath by yourself. Advantages of writing XPath by yourself:

But, writing yourself will take time and it is tricky as well because you need to try different ways of writing expressions. I will suggest if you have time write it yourself otherwise use tools which I am going to discuss now.

Tools generate XPath of elements automatically. Just you need to copy it and use it.

Perform some steps:

Firebug:

Firebug is a add-on of Firefox which helps you in identifying HTML, CSS and JAVASCRIPT web elements more easily.

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

How to install Firebug:

For Firefox version < 51.0.1 and Firebug version < 2.0.18

You can see separate tabs for HTML, CSS and Script(JS).

For Firefox version > 51.0.1 and Firebug version > 2.0.18

The Firebug extension isn’t being developed or maintained any longer. So, it will be disabled by default. When you do right click and see you will not get option to inspect with firebug. Firefox DevTools is alternative of Firebug.

Still you can use it but you need to enable it.

Steps to enable Firebug in Firefox:

1. Launch Firefox browser.

2. Type “about:config” is address bar and click on  ‘I accept the risk’.

3. Search for : a. ‘browser.tabs.remote.autostart’ and set the value to ‘false’ b.  ‘browser.tabs.remote.autostart.1’ (if present) and set the value to ‘false’ c. ‘browser.tabs.remote.autostart .2’ and set the value to ‘false’

4. Restart the Firefox.

Now open Facebook URL and do right click on ‘Email or Phone’ text box. This time you will see ‘click on ‘Inspect Element(Q) with Firebug’.

Now question is what is use of installing firebug for us?

We can get XPath and CSS selector of Web element using Firebug. Let’s see how.

Do right click on web element which you want to locate and select Inspect Element with Firebug. It will highlight the code. Now do right click on highlighted code and observe options.

You will see three options:

Note: Copying XPath from here, attribute values will be in double quotes. So, to use it in JAVA, replace double quote from single quote or escape it as:

Way 1:

//*[@id=”email”] should be changed as //*[@id=’email’]

Way 2:

//*[@id=”email”] should be changed as //*[@id=\”email\”]

You can verify copied XPath by hitting in console tab as below:

$x(“copied XPath”)

It will highlight element if correctly located.

We can achieve more functionality with Firebug with another add on named FirePath.

FirePath:

FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors.

Advantages of using FirePath:

Installation of FirePath:

Points to be known from above screenshot:

That’s it. You would have not seen this much long post on a very easy topic. But I just tried to explain all Whys and Hows.

If you like my posts, please like, comment and share. Suggestions and feedback are always welcomed.

Thank You!!

#HappyLearning

• Naviagte to console tab.
• On the console editor we can verify our Xpath.
• For verifying xpath we have to use our xpath in following format : $x("xpath")