有没有办法在 Google Chrome 中获取 XPath？

Posted 2023-02-22

技术标签:

【中文标题】有没有办法在 Google Chrome 中获取 XPath？【英文标题】：Is there a way to get the XPath in Google Chrome? 【发布时间】：2011-03-03 02:38:12 【问题描述】：

我有一个想与 YQL 一起使用的网页。但我需要特定项目的 XPath。我可以在 Google Chrome 的调试工具区域中看到它，但我看不到复制该 XPath 的方法。

有没有办法复制完整的 XPath？

【问题讨论】：

如果您愿意在 Chrome 之外安装 Firefox，您可以使用 xpather 扩展。如果他愿意安装 Firefox，它已经内置到 Firebug 中了。 @verhogen：我没有意识到这一点，尽管我几乎每天都在使用 Firebug。如果其他人有兴趣了解更多信息，这里是：blog.browsermob.com/2009/04/… 我也对此表示赞同.... Google Chrome 中的 Xpath Helper 在按下 [Ctrl+Shift+X] 快捷键或单击黑色“X Path”时都无法正常工作当页面中有 JS 错误时，在 JS 控制台中的按钮（通过扳手按钮）。而且我找不到任何其他适用于 Chrome 的优秀插件。不要下载 Mozilla 的“XPath Checker”插件。我也发现了该插件的问题。确保在打开 Firefox（而不是其他浏览器）时获取“XPather”并下载它。要使用“XPather”右键单击元素并选择“在 XPather 中显示” 现在 Chrome 也有一个“XPather”扩展。我觉得非常好。 Alt-'x' 激活窗口。您可以输入 xpath 并查看匹配的结果。匹配结果的显示非常整洁。 【参考方案1】：

在 Firefox 的 Firebug 中，您可以在检查元素后右键单击它，然后选择 Copy XPath。我无法让 ChromYQLip 顺利工作。

【讨论】：

【参考方案2】：

xpathOnClick 有你要找的东西：https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

尽管阅读 cmets，实际上需要单击三下才能获得 xpath。

【讨论】：

似乎不适用于带有 chrome 12.0.742.124 的 ubuntu 10.04，安装但当单击 xpath 图标时，然后单击页面（第一次关闭 xpath 弹出窗口），然后单击页面元素（在 js 控制台中显示 xpath）......控制台中没有显示任何内容。在插件网站上测试【参考方案3】：

XPath Helper 扩展可以满足您的需要： https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

【讨论】：

有人知道 ubuntu 上的键盘命令吗？ crtl-shift-x 和 command-shift-x 似乎没有做任何事情 @xiatica，您是否尝试过新的/刷新的标签？请注意，该扩展在安装前打开的选项卡中不起作用；此类标签必须刷新。【参考方案4】：

您可以在 Chrome javascript 控制台中使用 $x。无需扩展。

例如：$x("//img")

Web 检查器中的搜索框也将接受 xpath

【讨论】：

很好——尽管我不确定这是否能回答最初的问题。你是怎么知道的？我想知道控制台中是否还有其他类似的功能。我猜 Chrome 复制了大部分 Firebug 命令行命令：getfirebug.com/wiki/index.php/Command_Line_API 他问的是“如何获取元素的 xpath 字符串？”，而不是“我如何通过 xpath 选择？”不是吗？有趣的是Ctrl+Space 不会透露$x。如果您只输入$x，您可以看到它是如何实现的，因此 OP 应该能够确定如何实现他们想要的。例如; document.evaluate('//h1', document, null, XPathResult.STRING_TYPE, null).stringValue @huyz - 有类似的功能可用。见developers.google.com/chrome-developer-tools/docs/console。 $0 特别有用：您在 DOM 工具中选择的最后一个元素。 $($0) 使它成为一个 jQuery 对象（如果 jQuery 可用）。此外，文章没有提到复制到剪贴板的 copy($0)。（顺便说一句，我刚刚发现了 $x，并找到了这个线程，因为我试图在控制台中将该变量用于其他东西。）【参考方案5】：

有点 OT，但可能有用：在 Mac Chrome 上，虽然您无法将 xpath 复制到开发工具面板中的搜索框中（而是将节点作为 html 复制），但您可以将文本拖放到外部编辑器。

【讨论】：

【参考方案6】：

在 chrome 的最新更新中，您现在可以单击元素检查器中的任何元素并将 XPath 复制到剪贴板。

【讨论】：

【参考方案7】：

只需右键单击您想要 xpath 的元素，您将看到一个菜单项来复制它。当 OP 发布他的帖子时，这可能不存在，但现在肯定存在。

【讨论】：

【参考方案8】：

右击节点=>“复制XPath”

【讨论】：

这是获取 xpath 最脆弱的方法，随着内容的变化它很可能会中断 @JuanMendes 有什么选择？ @Nate 如果您希望 XPath 在文档更改时仍能正常工作，那么没有简单的替代方案。您只需要考虑一下并尽量不要将多余的信息添加到您的 XPath 中。一条经验法则是，您的 XPath 越长，它在其他环境中工作的可能性就越小。这不会为您提供页面上唯一元素的实际 XPath。那将是相当困难的。在新版谷歌浏览器中，您必须右键单击该节点并选择复制XPath项目，该项目已移至复制选项。【参考方案9】：

现在 chrome 中不需要扩展。右键单击您想要 xpath 的任何元素，然后单击“Inspect Element”，然后再次在 Inspector 中，右键单击元素并单击“Copy Xpath”。

【讨论】：

这个方法在之前的回答中已经提到过，去年发的：***.com/a/11087358/938089【参考方案10】：

告诉你一个简单的公式来查找任何元素的 xpath：

1- 在浏览器中打开网站

2- 选择元素并右键单击它

3-单击检查元素选项

4- 右键单击选定的 html

5- 选择复制 xpath 的选项在需要的地方使用它

此视频链接将对您有所帮助。 http://screencast.com/t/afXsaQXru

注意：对于 xpath 的高级选项，您必须知道 html 的正则表达式或模式。

【讨论】：

使用 Chrome 控制台对此进行了测试并这样做是为了支持：$x('//*[@id="answer-33492958"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].click();【参考方案11】：

以上所有答案都是正确的，这里也是另一种截图方式。

来自 Chrome：

在您要查找 xpath 的项目上右键单击“检查” 右键单击控制台上突出显示的区域。转到复制 xpath

【讨论】：

【参考方案12】：

使用这个扩展，它会根据 id 或 class 生成 xpath，这可能是你想要使用的。

单击浏览器图标，面板显示在页面的右上角，然后单击开始检查，然后单击任何元素以获取您的 xpath。

XPath Generator

【讨论】：

@robbyoconnor 如果你做过一些黑盒测试或爬取，你就会知道浏览器生成的 xpath 不是那么稳定。【参考方案13】：

Google Chrome 提供了一个名为“Chrome DevTools”的开箱即用的内置调试工具，其中包括一个方便的功能，无需任何第三方扩展即可评估或验证 XPath/CSS 选择器。

这可以通过两种方法来完成：

使用元素面板中的搜索功能来评估 XPath/CSS 选择器并突出显示 DOM 中的匹配节点。在控制台面板中执行令牌 $x("some_xpath") 或 $$("css-selectors")，这将同时进行评估和验证。

从元素面板

按 F12 打开 Chrome DevTools。

元素面板应该默认打开。

按 Ctrl + F 在面板中启用 DOM 搜索。

输入 XPath 或 CSS 选择器进行评估。

如果有匹配的元素，它们将在 DOM 中突出显示。但是，如果 DOM 中有匹配的字符串，它们也将被视为有效结果。例如，CSS 选择器标头应匹配包含单词标头的所有内容（内联 CSS、脚本等），而不是仅匹配元素。

从控制台面板

按 F12 打开 Chrome DevTools。

切换到控制台面板。

输入 XPath，如 $x(".//header") 以评估和验证。

键入 $$("header") 等 CSS 选择器以进行评估和验证。

检查控制台执行返回的结果。

如果元素匹配，它们将在列表中返回。否则会显示一个空列表 [ ]。

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

如果 XPath 或 CSS 选择器无效，则会以红色文本显示异常。例如：

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

【讨论】：

在所有答案中非常有用，特别是如果您正在使用 selenium 和机器人框架【参考方案14】：

我尝试了几乎所有可用的扩展程序，发现以下是最好的扩展程序之一。

ChroPath Extension link

就像 FirePath，当您单击 Inspect 时，此扩展程序会直接为您提供 Xpath。

【讨论】：

【参考方案15】：

以 Chrome 为例：

在您尝试查找 XPath 的项目上右键单击“检查”。右键单击 HTML DOM 上突出显示的区域。转到复制 > 选择“复制 XPath”。完成上述步骤后，您将从 DOM 中获取元素的绝对 XPath。您可以进行更改以使其成为相对 XPath（因为如果 DOM 发生更改，您的 XPath 仍然能够找到该元素）。

一个。为此，打开浏览器的“元素”面板，按 CTRL+F，粘贴 XPath。

b.按照以下示例中的说明进行更改。

绝对 xpath = //*[@id="app"]/div[1]/header/nav/div[2]/ul/li[2]/div/button

相关xpath = //div//nav/div[2]/ul/li[2]/div/button

当您进行更改时：

确保 XPath 在 DOM 中是唯一的。仍然在 DOM 和网页上选择了 web 元素。

【讨论】：

【参考方案16】：

您可以尝试使用 Chrome Web Extension TruePath，它会在网页上右键单击动态生成相对 XPath，并将所有 XPath 显示为菜单项。

【讨论】：

【参考方案17】：

按Cntl + Shift + C 通过单击选择您希望获取其XPath 的元素right click 在控制台中突出显示的部分copy -> copy XPath