ChatGPT解决这个技术问题 Extra ChatGPT

Is there a way to get the XPath in Google Chrome?

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?

If you're willing to install Firefox in addition to Chrome, you could use the the xpather extension.
If he's willing to install Firefox, it's already build into Firebug.
@verhogen: I wasn't aware of this, even though I am using Firebug on an almost daily basis. In case someone else is interested in more info, here it is: blog.browsermob.com/2009/04/…
I'm also upvoting this.... the Xpath Helper in Google Chrome doesn't work well, both when pressing the [Ctrl+Shift+X] shortcut key or clicking black "X Path" button (by wrench button) in the JS console when there are JS errors in the page. And I couldn't find any other good add-ons for Chrome out there. Do not download the "XPath Checker" add-on for Mozilla. I've found issues with that add-on as well. Make sure to get the "XPather" and download it while you have Firefox open (not some other browser). To use the "XPather" right click element and choose "Show in XPather"
Now Chrome has a "XPather" extension as well. I feel it is very good. Alt-'x' to activate the window. You can input the xpath and see the matched results. The display of matched result is quite neat.

M
Matt Polito

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


Nice -- although I'm not sure this answers the original question. How did you find out about it? I'm wondering if there are other similar functions available in the console.
I guess Chrome copied most of the Firebug command-line commands: getfirebug.com/wiki/index.php/Command_Line_API
He was asking "how to get an xpath string for an element?", rather than "how do i select by xpath?" wasn't he?
Interesting how 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
@huyz - there are similar functions available. See developers.google.com/chrome-developer-tools/docs/console. $0 is particularly useful: the last element you selected in the DOM tool. $($0) makes it a jQuery object (if jQuery is available). Also, the article doesn't mention copy($0), which copies to the clipboard. (Incidentally, I just discovered $x, and found this thread, because I was trying to use that variable for something else in the console.)
z
zavidovych

Right click on the node => "Copy XPath"


This is the most brittle way to get an xpath, it's very likely to break as content changes
@JuanMendes what's the alternative?
@Nate There is no easy alternative if you want your XPath to still work as the document changes. You just have to think about it and try not to add superfluous information to your XPath. A rule of thumb is that the longer your XPath is, the less likely it is to work in other contexts.
This does not give you an actual XPath for the unique element on the page. That would be quite difficult.
In the new version of Google chrome, you must right click on the node and select Copy XPath item that moved to Copy option.
g
grepit

All above answers are correct here is another way with screenshot too.

From Chrome :

Right click "inspect" on the item you are trying to find the xpath Right click on the highlighted area on the console. Go to Copy xpath

https://i.stack.imgur.com/JyFAM.png


a
asadovsky

XPath Helper extension does what you need: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl


Does anyone know the keyboard commands for this on ubuntu? crtl-shift-x and command-shift-x don't appear to do anything
@xiatica, did you try in a new/refreshed tab? Note that the extension will not work in tabs that were open prior to installation; such tabs must be refreshed.
S
Shubham Jain

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.

https://i.stack.imgur.com/DS5wa.jpg

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.

Very useful among all the answers, specially if you are working with selenium and robot framework
d
deepdive

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".


This method is already mentioned in a previous answer, posted last year: stackoverflow.com/a/11087358/938089
A
Abdul Majeed

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.


Used the Chrome console to test this and did this to upvote: $x('//*[@id="answer-33492958"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].click();
h
hossein hayati

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

https://i.stack.imgur.com/pM5qh.png


T
Tricky

As of the latest update for chrome you can now click any element in the element inspector and copy the XPath to clipboard.


B
Burt

xpathOnClick has what you are looking for: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

Read the comments though, it actually takes three clicks to get the xpath.


Doesn't appear to work on ubuntu 10.04 with chrome 12.0.742.124, installs but when click on xpath icon, then click on page (first time to dismiss the xpath popup), then click on a page element (to show xpath in js console).... nothing shows up in console. tested on the plugin site
H
Hossain Mahmood Tuhin

For Chrome, for instance:

Right-click "inspect" on the item you are trying to find the XPath. Right-click on the highlighted area on the HTML DOM. Go to Copy > select 'Copy XPath'. After the above step, you will get the absolute XPath of the element from DOM. You can make changes to make it relative XPath (because if the DOM changes, still your XPath would be able to find the element).

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:

make sure the XPath is unique within the DOM. still the web element is selected on the DOM and on the webpage.


R
RAAAAAAAANDY

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.


I
Ivan

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.


d
dasunse

You can try using Chrome Web Extension TruePath which dynamically generates the relative XPath on right click on the web page and display all the XPath as menu items.


B
Ben Weiner

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.


H
Harish Kannan

I tried almost all the available extensions and found the below to be one of the best.

ChroPath Extension link

Just like FirePath, this extension directly gives you the Xpath when you click on Inspect.

https://i.stack.imgur.com/2fkxK.png


S
Sarvesh

First open your Google Chrome

and open any website

and inspect that

https://i.stack.imgur.com/QQ4WH.png


It is not working for all cases.
o
ospider

Use this extension, it generates xpaths based on id or class, which is probably what you want to use.

Click on the browser icon, the panel is shown on the right corner of the page, then click start inspect, then click on any element to get your xpath.

XPath Generator


@robbyoconnor if you have done some blackbox testing or crawling, you would know that the browser generated xpath is not that stable.