How to find xpath of an element in firefox inspector - firefox

In Firefox 50.1, Firebug is no longer available so I have to use the inspector but I cannot find copy ---> xpath option that was available in Firebug. How can I find the xpath of an element using the inspector?

You can use the console to check if the xpath you want return the correct element or not.
$x("//div/xpath")
https://developer.mozilla.org/en-US/docs/Tools/Settings

Follow Bellow Steps:
Step 1 : Right click on page -> Select (Inspect Element)
Step 2 : Pick an element from the page
Step 3 : Right Click on highlighted html -> Copy -> Xpath

The bug related to losing ability to 'copy XPath' from firefox inspector is fixed, verified in Firefox 56 beta, and verified in Firefox 57 alpha:
https://bugzilla.mozilla.org/show_bug.cgi?id=987877

In Firefox you can use the web developer tools console for xpath validation like this:
1.Open Web Developer tools.
2.Click on Console
3.Type $x("path")
This should let you validate that your path is valid.

You can't, firefox's inspector does not have such feature. However it does offer css selector which can be converted to xpath with various other tools.
It should be noted however that these generated selectors (xpath or css) are not accurate or reliable and you should avoid using this feature for anything but rare edge cases.

Unfortunately this doesn't work properly. When I use the copy xpath, I got this instead of the usual one: //*[#id="gwt-uid-105"]
Which is just useless :(
There aren't any extension currently which could solve this. Looks like the only way is to run an old version of FF. Can have an old 32 bit and a new 64 bit version.

Xpath Using Firefox Console: **
Answer referenced from **Xpath Using Firefox Console in selenium webdriver
Steps:
Press F12( common for all browsers), Now firefox open developer tool like below.
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")

This is an old question but I'm glad to say that since FF 75 it supports searching by XPath, look at documentation. Here is a link to their blog entry

I know that this doesn't answer directly to the question but it helped me a lot, use Pale Moon:
Open any web page in Pale Moon browser
Right click on an element of the page
Select: "Inspect Element with Developer Tools" (a window shows up with element highlighted)
Right click highlighted element
Select: "Copy XPath"
And there you have it. You will get a "full" xpath even if the element has an id.

I would rather you study how to create xpath on your own to select the element you need. It's very simple and very very helpful specially when creating reusable methods/functions.
Go and see the xpath tutorial at w3schools or wherever.
Focus on the relationships between elements.
Edit:
Once you know how to construct a good-looking xpath, you can now test it using the browser console as mentioned by #mosaad. Still, you need to learn how to construct the xpath first. BTW, the copy xpath function wasn't available back in Jan '17. That is why I suggested he learn how to construct xpath. Even now that it is available though, I still suggest you learn because the xpath you get from those usually suck.

Related

How to validate XPath using Firefox Web Developer Plugin?

Since Web Developer Plugin is an self-sufficient tool, ideally it should contain XPath checker/validator as FireBug did.
Actually I could not find it.
I am not sure that it exists. But if it is, please anybody help to navigate to.
Thanks!
In Firefox you can use the web developer tools console for xpath validation like this:
1.Open Web Developer tools.
2.Click on Console
3.Type $x("path")
This should let you validate that your path is valid.
References:
https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter
https://developer.mozilla.org/en-US/docs/Web/XPath
Now it is possible to use xpath directly from the browser.
Open Web Developer tools by pressing F12
In the inspector there is a search bar at the top called Search HTML
Enter your xpath there and type ENTER
Now the inspector should be pointing to the element that was the outcome of evaluating the xpath.
For example after evaluating //div[#id="notify-container"] the inspector is pointing to that div
I am using AutoPager extension on Firefox. It is quite handy for generate xpath and search xpath.
you can refer to this post for more information:
https://thachhoangautomation.wordpress.com/2017/10/11/generatesearch-cssselector-and-xpath-on-firefox-55-onward/

How to get DOM element Xpath in Firefox

It might be just me but I can't find any way to get DOM element's XPATH in Firefox.
That was possible in Firebug, but now it's deprecated in favor of Firefox Developer Tools, and the recommendation is not to use it any longer.
So, is there any way to get XPATH in Firefox and its Developer Tools?
Open the developer tools in Firefox, then:
Click on Console tab.
Type allow paste if you are pasting anything.
Type the XPath like so:
$x("path")
For example:
$x(".//*[#id='4th']/tbody/tr[1]/td")
Firebug also works well, so I suggest using that instead.
This feature is available in the Firefox DevTools since Firefox 56. To copy the Xpath of an element, right-click it within the Inspector and choose Copy > Xpath from the context menu.
In earlier versions of Firefox the option was placed in the first level of the context menu. As more copy options got added, they were moved into the Copy submenu.
Even if there is no extension available for Firbug in Firfox V57/Quantum. Still we can performed same operation which we performed earlier with the help of firebug, in Firefox dev tool now. Firefox dev tool has more advanced function than normal browser. So It will be helpful for UIDesigner or any Developer.Features in Developer Tool-Features in Developer Tool
To install & Download Firefox Developer Tool- Firefox Developer Tool
For XPath: Select any element by right click on it and choose Inspect Element(Q) then element/tag gets highlighted under inspector developer tool. Then Right Click on tag and select Copy=>Xpath or CssPath.
but the xpath or Css provided by above option will not be correct always if application is dynamic or having dynamic ids etc...
So better to use console option/ select console option (Press F12) write allow paste and enter.
For Xpath =>we have to use ($x) example: >>$x("//p") It will gives all p tag.
For Css path=> we have to use ($$) Example: >>$$("p") then Enter It will gives all p tag.
You can get the XPath in Quantum by right-clicking on the element html in Inspector and select Copy > XPath. For eg.
For instance the html below will give you the Xpath as - /html/body/form/table/tbody/tr[2]/td[2]/table/tbody/tr[2]/td/table1/tbody/tr[4]/td1
You can also get an earlier version of firefox using from the release page.
Make sure you disable auto update otherwise your browser will upgrade to new one.
You can also use the X path Add-on https://addons.mozilla.org/nn-NO/firefox/tag/xpath to get the x path

How to identify the component type using Xpath in Robot Framework

I have an xpath like this: .//*[#id='DirectoryNo_Field'] and I want to know how to identify if it's component is an InputText or a ComboBox?
Is it possible in robot framework?
Atention: Components doesn't have a pattern for its names.
Thanks Guys
Have you tried to find this element using chrome dev tools or the same functions in other browser?
To open dev tools in Chrome, with chrome active, simply press F12. This should bring up the developer tools console/menu at the bottom.
Within that menu, navigate to 'Elements' if it isn't already highlighted and press (CTRL + F) this will bring up the find menu which will allow you to find by XPath.
Alternatively, if you know where the element is on the page, simply right-click it and select inspect element, this will take you to the element within the page source and therefore you'll have your answer.
Hope that helps.
*if I've misunderstood this and you only want to select an element of a specific type, why not change the XPath to only retrieve the type you're after? i.e.
.//input[#id='DirectoryNo_Field']

Save Firepath ( Firebug plugin ) result

i m using Firepath, a firebug extension for Firefox browser.
How to show/save the result, example: want to grab all link in pages.
there will be list of links in firepath window.
Thank you
Andy,
I have tried to do the same thing you are doing and I couldn't find a way to do this with Firepath.
However I did find a tool in Chrome XPath Helper that allows you to copy your results. This did the trick for me, hope it works for you and everyone else.
Cheers,
Devin
Seems You want feature, not implemented by intention of particular plugin (Firepath finds HTML elements matching chosen CSS selector(s) or XPath expression - but You want more - to render filtered HTML page, not just to see filtered CSS or HTML source) but You always can ask for that developers.
Althou there is workaround possibilty - share them with a friend via the FriendlyFire feature. Below is a demo video of using Firefinder and the FriendlyFire feature

What is the name of the stock Firefox tool to display HTML code for the part of the page under the mouse?

Less than month ago, by accident I discovered a nice tool in Firefox that was installed by default. I don't remember the name (probably code inspector or something like that) but I used Ctrl+Shift+I (Tools -> Webdeveloper -> Name of tool) shortcut to run it.
What was the tool? The tool worked such that when you positioned the mouse over some place in the webpage, in the tool's window you would see the HTML code for that place. Now, I my system is updated, and this tool has disappeared from my browser. I'm very disappointed. Anyone know what tool I'm looking for?
Thanks in advance,
Kuba
By the sound of what you are describing it was probably the Web Developer addon, might also have been Firebug (which in my opinion is better).
You can try right clicking on the page element and select "Inspect Element" which will enable element inspection. This will enable you to view the HTML contents of the elements under your mouse.
The name of this tool is: Page Inspector
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

Resources