I have a webpage I want to use with YQL. But I need the XPath of a specific item. I can see it in the debug tools area for Google Chrome but I don't see a way to copy that XPath.
Is there a way to copy a full XPath?
I have a webpage I want to use with YQL. But I need the XPath of a specific item. I can see it in the debug tools area for Google Chrome but I don't see a way to copy that XPath.
Is there a way to copy a full XPath?
You can use $x
in the Chrome javascript console. No extensions needed.
ex: $x("//img")
Also the search box in the web inspector will accept xpath
Ctrl+Space
doesn't reveal $x
. If you just type $x
you can see how it's achieved, therefore the OP should be able to determine how to achieve what they want. For example; document.evaluate('//h1', document, null, XPathResult.STRING_TYPE, null).stringValue
Right click on the node => "Copy XPath"
All above answers are correct here is another way with screenshot too.
From Chrome :
XPath Helper extension does what you need: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl
Google Chrome provides a built-in debugging tool called "Chrome DevTools" out of the box, which includes a handy feature that can evaluate or validate XPath/CSS selectors without any third-party extensions.
This can be done by two approaches:
Use the search function inside Elements panel to evaluate XPath/CSS selectors and highlight matching nodes in the DOM. Execute tokens $x("some_xpath") or $$("css-selectors") in Console panel, which will both evaluate and validate.
From Elements panel
Press F12 to open up Chrome DevTools.
Elements panel should be opened by default.
Press Ctrl + F to enable DOM searching in the panel.
Type in XPath or CSS selectors to evaluate.
If there are matched elements, they will be highlighted in DOM. However, if there are matching strings inside DOM, they will be considered as valid results as well. For example, CSS selector header should match everything (inline CSS, scripts etc.) that contains the word header, instead of match only elements.
From Console panel
Press F12 to open up Chrome DevTools.
Switch to Console panel.
Type in XPath like $x(".//header")
to evaluate and validate.
Type in CSS selectors like $$("header")
to evaluate and validate.
Check results returned from console execution.
If elements are matched, they will be returned in a list. Otherwise an empty list [ ] is shown.
$x(".//article")
[<article class="unit-article layout-post">…</article>]
$x(".//not-a-tag")
[ ]
If the XPath or CSS selector is invalid, an exception will be shown in red text. For example:
$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.
$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.
No extension needed in chrome now. Right click on any element you want xpath for and click on "Inspect Element" and then again inside the Inspector, right click on element and click on "Copy Xpath".
press Cntl + Shift + C
select the element you wish to get its XPath
by clicking on it
right click
on the highlighted part in the console
copy
-> copy XPath
Let tell you a simple formula to find xpath of any element:
1- Open site in browser
2- Select element and right click on it
3- Click inspect element option
4- Right click on selected html
5- choose option to copy xpath Use it where ever you need it
This video link will be helpful for you. http://screencast.com/t/afXsaQXru
Note: For advance options of xpath you must know regex or pattern of your html.
$x('//*[@id="answer-33492958"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].click();
Commented
Dec 16, 2016 at 7:56
As of the latest update for chrome you can now click any element in the element inspector and copy the XPath to clipboard.
For Chrome, for instance:
a. To do so, by opening the 'Elements' panel of the browser, press CTRL+F, paste the XPath.
b. Make changes as describes in the following example.
Absolute xpath = //*[@id="app"]/div[1]/header/nav/div[2]/ul/li[2]/div/button
Related xpath = //div//nav/div[2]/ul/li[2]/div/button
When you make changes:
Just right-click on the element you want the xpath for and you will see a menu item to copy it. This may not have existed when the OP made his post but it's certainly there now.
In Firebug in Firefox, you can right click on an element after inspecting it, and choose Copy XPath. I could not get ChromYQLip to work smoothly.
Slightly OT, but perhaps useful: On Mac Chrome, although you cannot copy the xpath out of the search box in the Dev tools panel (instead, copy grabs the node as HTML), you can drag and drop the text into an external editor.
I often see questions about how to find "the" XPath for an item in a web page, and the phrase "the XPath" (rather than "an XPath") always jumps out at me, and makes me want to jump up and say "ARE YOU SURE THAT'S WHAT YOU WANT TO DO?"
The reason the phrase "the XPath" triggers me is that XPath isn't an identifier scheme; it's a query language. An XPath query evaluated in the context of a web page can return an item or set of items in that page, but the same set of items could be returned by many other XPath expressions (infinitely many, in fact). And some of those XPaths are much better than others.
I agree with a number of commenters here who have warned against using XPath expressions that have been automatically generated by a browser or browser plugin, because these XPath expressions tend to be over-long, and excessively dependent on irrelevant details in the HTML markup, and hence brittle; liable to break or fail when the web page changes in future.
If you have to work with XPath, it's really worth learning at least a little of it yourself, so that you can write your own XPath expressions which will be much shorter and work better. XPath 1.0 is the version of XPath supported in browsers, and it's not a hard language to learn by any means; it's not all that different to writing a CSS selector, and there are XPath experts on this website who will answer questions, if you need help.
For example, let's say you open the Internet Archive's page about Franz Kafka's diaries in Chrome, and you want to create an XPath to refer to the "EPUB" download link (to download the book as an eBook). In Chrome you can right-click the link's <a>
element and choose "Copy XPath" from the "Copy" menu, you get the following XPath:
//*[@id="maincontent"]/div[5]/div/div/div[2]/section[2]/div[3]/a
Using "Copy full XPath" you get:
/html/body/div[1]/main/div[5]/div/div/div[2]/section[2]/div[3]/a
By contrast, this is my hand-written XPath:
//a[substring(@href, string-length(@href) - 4) = '.epub'][1]
(translated to english; the first a
element with the href
attribute ending in .epub
)
Or even more simply:
//a[contains(@href, '.epub')][1]
If you compare the auto-generated XPaths with one that's been hand-written based on a human understanding, the superiority of a hand-written one is obvious: it can home in on what is actually the essential identifying markers of the element you want, because a human author is in a position to understand what the element is actually doing, and can avoid relying on other details that are irrelevant to the element's function.
Whereas because the auto-generated XPaths are created without the benefit of knowing what the a
is even for, they take the approach of specifying a long rambling path that leads step by step through all the container elements in the page, to reach your final destination. Of course it's so much more likely that those long paths will be invalidated any time the web designers at the Internet Archive make a tiny change to the page layouts; when that happens, the auto-generated XPath will start returning an empty set, but a hand-written XPath is likely to continue to work.