I'm an automated QA tester and I recently discovered the power of Dragonfly, the developer plugin for Opera. It's a really great tool, however I cannot find any information about Dragonfly's ability to generate either xpath queries or css selectors. Both of these are very useful for web automation. I'm currently using Firebug which works great. However I'm always looking for the next best tool and I would love to learn more about Dragonfly.
Does anyone know if Dragonfly has the ability to at least generate Xpath queries?
I was wondering the same thing last year, and a member of the Dragonfly team said it was planned, but it couldn't be implemented until the Clipboard API was supported in Opera. The Clipboard API was added to Opera in Presto 2.10. Consequently, I suspect that we will be seeing this feature added to Dragonfly sometime in the near future.
If you are ok with generating CSS selector, then there is an easy tip for you.
Click 'Inspect element', go to Layout tab in side menu of Document tab, and there you will see something like this:
html > body.question-page > div.container > div#content > div > div#mainbar > div#question.question > table > tbody > tr > td.postcell > div > div.post-text > p
offtopic: neither xpath, nor css selectors are hard to learn, and both are much better written manually, then they are generated.
Related
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.
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
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
How do you debug panel's html?
I think the DOM inspector should allow you to do this.
https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/
https://developer.mozilla.org/En/DOM_Inspector
Although it doesn't have a console, you can use the inbuilt Scratchpad (Shift+F4) to run some js manually. You need to enable access to chrome-scope first though. More info here: https://developer.mozilla.org/en/Tools/Scratchpad#Using_Scratchpad_to_access_Firefox_internals
If you mean, how do you inspect html elements in a Panel using Firefox dev tools or Firebug, the answer is unfortunately that you cannot do this - those tools do not support panels at this time.
Well, it seems there is no really a way to do it in the panel.
So the best way is to use a tab instead of a panel. In it theres no problem to easily inspect HTML.
Some minor shifts and quirks of panel can be dealt with later, by 'try and see' method.
Is it possible through a plugin or setting or something to allow Firefox to recognize the live DOM source code?
Basically, firebug or other similar tools can recognize elements on the page which Firefox does not.
I understand with these extensions I have the ability to see such changes made by javascript, but Firefox does not seem to fully recognize them.
I'll try to clarify.
If I load a page and view source (ctrl-U), I see what the server sent to Firefox, and what Firefox ostensibly recognizes as the source code of the page. If in that source code, there is javascript which alters the DOM, and then I hit (ctrl-U) again, the code is not updated.
I am using a testing tool (iMacros firefox plugin) to automate functionality, but it does not recognize the updated DOM because Firefox does not. Firebug and similar tools can recognize these "live" updates. Does that help?
http://www.chapter31.com/2006/12/04/viewing-ajax-generated-source-code/
You can try using the web-developer extension with a view-generated-source option.
I'm still not sure I understand your question, but I think what you're getting at is the Web Developer extension for FireFox, specifically its "View Generated Source" feature.
That will let you see the altered DOM.
Firebug gives u this ability:
for instance check the HTML tab when running a jquery ticker and see the dynamic changes live in the DOM
Usually, when I have weird issues with either the console or the DOM inspector with firebug, I find restarting the browser and validating your code is the way forward.
That said, I'm not really following your question, the document that firebug shows is the same one in the firefox window...?
It looks like the problem is not that you want firefox to show the current DOM when you hit CTRL+U, but that you want some automated testing tool to be able to test your web pages.
Perhaps you should use a testing tool that is suited to the job of testing rich web applications, Selenium, for example, can do this.