如何在 Chrome 开发者工具或 Firefox 的 Firebug 中验证 XPath 表达式？

Posted 2023-02-16

【中文标题】如何在 Chrome 开发者工具或 Firefox 的 Firebug 中验证 XPath 表达式？

【英文标题】：How to verify an XPath expression in Chrome Developers tool or Firefox's Firebug?

【发布时间】：2014-04-29 13:24:30

【问题描述】：

如何验证我的 XPath？

我正在使用 Chrome 开发人员工具来检查元素并形成我的 XPath。我使用 Chrome 插件 XPath Checker 验证它，但它并不总是给我结果。有什么更好的方法来验证我的 XPath。

我也尝试过使用 Firebug 来检查错误并使用 FirePath 来验证。但 Firepath 是否也验证 XPath。

我最后的选择是使用 Selenium WebDriver 来确认我的 XPath。

【参考方案1】：

铬

这可以通过三种不同的方法来实现（有关详细信息，请参阅我的博客文章here）：

在Elements 面板中搜索，如下所示 在Console面板中执行$x()和$$()，如Lawrence的answer所示 第三方扩展（在大多数情况下并不是真正必要的，可能是矫枉过正）

这是在Elements 面板中搜索 XPath 的方法：

按 F12 打开 Chrome 开发者工具 在“元素”面板中，按 Ctrl+F 在搜索框中，输入 XPath 或 CSS 选择器，如果找到元素，它们将以黄色突出显示。

Firefox（自 75 版起）

从 FF 75 开始，可以在不评估 xpath 表达式的情况下使用原始 xpath 查询，请参阅documentation 了解更多信息。

Firefox（75 之前的版本）

从 Web Developer 子菜单中选择“Web 控制台” Firefox 菜单（或工具菜单，如果您显示菜单栏或在 Mac OS X 上） 或按 Ctrl+Shift+K (Command+Option+K 在 OS X 上）键盘快捷键。

在底部的命令行中使用以下内容：

$()：返回第一个匹配的元素。等价于document.querySelector()或者调用页面中的$函数，如果存在的话。

$$()：返回匹配的 DOM 节点数组。这类似于document.querySelectorAll()，但返回一个数组而不是NodeList。

$x()：计算 XPath 表达式并返回匹配节点的数组。

---

Firefox（49 之前的版本）

安装Firebug 安装Firepath 按 F12 打开 Firebug 切换到FirePath面板 在下拉列表中，选择 XPathor CSS 输入以定位

【讨论】：

XPath 和浏览器上只有一个警告，因为这会导致很多混乱：***.com/questions/18241029/…

@JensErat：真的很好。对于阅读此评论的其他人，正如该问题中已经提到的，Selenium 不受影响，因为它驱动浏览器并使用与开发工具相同的底层 javascript 评估技术。

@user1177636：您使用什么软件生成这些 GIF？

如果你也需要 XQuery 的本地解析器，我找到了 BaseX：basex.org/products

Answer 需要更新 Firefox。不幸的是，Firebug 已经过时，并已合并到开发者工具中。目前您可以在控制台中测试 xpath 表达式，例如$("//div")

【参考方案2】：

您可以在 Chrome 中使用 CTRL+I 在 Windows（或 CMD+I Mac）和 Firefox 中使用 F12 打开 DevTools，然后选择 Console 选项卡），并通过键入 $x("your_xpath_here") 检查 XPath。 这将返回一个匹配值的数组。如果为空，则说明页面上没有匹配项。

Firefox v66（2019 年 4 月）：

Chrome v69（2019 年 4 月）：

【讨论】：

此方法并不理想，但很高兴知道，因为您在该控制台中编写的任何 xpath 表达式都可以由 Selenium 中的 JavascriptExecutor 执行。有时您可以将其用作解决方法，也许是在禁用 Firefox 原生事件时？

@djangofan，你是什么意思？按照这个逻辑，这两个答案虽然都是正确的，但你的逻辑是不必要的。

@bosnjak 在控制台中尝试此操作时$x("//input[@name='q']") 我得到了VM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1

@YasserKhalil 您使用的是哪个浏览器，哪个版本？你在哪个网站上做这个？

【参考方案3】：

通过使用 Chrome 或 Opera

无需任何插件，无需编写任何单个 XPath 语法字符

右键单击所需元素，然后“检查” 右键单击突出显示的元素标签，选择复制 → 复制XPath。

;)

【讨论】：

对于 Chrome，这是我见过的最好的解决方案。感谢分享。当我不想使用 Firefox 时，可以更轻松地在 Chrome 中进行确认。

我已经使用它来获得很大的好处。但一个大问题是有时上下文菜单被禁用或覆盖。然后你必须依赖其他方法。

这并不能真正回答问题。它不是在验证现有的 xpath，而是在生成一个。当存在更好的解决方案时，Chrome 生成的通常是丑陋且非常脆弱的。

【参考方案4】：

另一个检查 xpath 的方法是使用 selenium IDE。

安装 Firefox Selenium IDE 在 FireFox 中打开您的应用程序并打开 IDE 在 IDE 中，在新行上，将您的 xpath 粘贴到目标并单击 找。相应的元素将在您的 应用

【参考方案5】：

我使用 WebSync Chrome extension 验证 XPath 和 CSS 选择器。

它提供了验证选择器以及通过单击元素属性来生成/修改选择器的可能性。

https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac

【讨论】：

链接已损坏 (404)。