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

Question

如何验证我的XPath？

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

我还尝试使用Firebug检查错误，并使用FirePath进行验证。但是Firepath是否也可以验证XPath。

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

- user3448242

Answer 1

Chrome

可以通过以下三种不同的方法实现 (更多细节请参见我的博客文章这里):

• 在Elements面板中搜索，如下所示
• 在Console面板中执行$x()和$$()，如Lawrence的答案所示
• 第三方扩展程序 (在大多数情况下并不是必需的，可能过于复杂)

以下是在Elements面板中搜索XPath的方法:

1. 按F12打开Chrome开发者工具
2. 在"Elements"面板中，按Ctrl+F
3. 在搜索框中输入XPath或CSS Selector，如果找到元素，则会用黄色突出显示。

Firefox (自FF 75版本起)

自FF 75版以来，可以使用原始XPath查询而不是评估XPath表达式，请参见文档了解更多信息。

Firefox (75版本之前)

1. 从Firefox菜单的Web Developer子菜单中选择"Web Console" (或者如果你显示菜单栏或在Mac OS X上，则从Tools菜单中选择)
   或按下Ctrl+Shift+K (Command+Option+K for OS X)键盘快捷键。

2. 在底部的命令行中使用以下内容:

   • $()：返回匹配的第一个元素。相当于 document.querySelector() 或在页面中调用 $ 函数（如果存在）。

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

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

---

Firefox（版本 49 之前）

1. 安装 Firebug
2. 安装 Firepath
3. 按下 F12 打开 Firebug
4. 切换到 FirePath 面板
5. 在下拉菜单中，选择 XPath 或 CSS
6. 键入要定位的内容

- Yi Zeng

---

XPath和浏览器有一个警告，这会导致很多混淆：https://dev59.com/sGMl5IYBdhLWcg3woYTa - Jens Erat

@JensErat：非常好的观点。对于阅读此评论的其他人来说，正如在那个问题中已经提到的那样，Selenium不受影响，因为它驱动浏览器并使用与开发工具相同的底层JavaScript评估技术。 - Yi Zeng

@user1177636：你用什么软件生成这些GIF动画？ - JacekM

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

Chrome的$$()函数无法使用XPath。 - xgqfrms

Answer 2

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

Firefox v66（2019年4月）：

Chrome v69（2019年4月）：

- bosnjak

---

这种方法并不理想，但值得了解，因为你在控制台编写的任何xpath表达式都可以通过Selenium中的JavascriptExecutor执行。有时你可以将其用作解决问题的方法，也许当禁用Firefox本机事件时？ - djangofan

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

@bosnjak 当我在控制台尝试使用 $x("//input[@name='q']") 时，我得到了 VM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1 的错误。 - YasserKhalil

@YasserKhalil 你使用的是哪个浏览器，哪个版本？你在哪个网站上进行这个操作？ - bosnjak

Answer 3

使用 Chrome 或 Opera

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

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

;)

- Eng. Samer T

---

对于 Chrome，这是我迄今为止看到的最好的解决方案。感谢分享。当我不想使用 Firefox 时，在 Chrome 中确认会更容易。 - Automationtested

我已经成功地使用了这个。但是一个大问题是有时上下文菜单被禁用或覆盖。那么你就必须依靠其他方法。 - ouflak

这并没有回答这个问题。它并不是在验证一个已存在的xpath，而是生成一个新的。Chrome生成的xpath通常很丑陋且非常脆弱，而实际上有更好的解决方案。 - Major Major

Answer 4

以下是一种我用来快速可视化HTML网页中XPATH结果的方法 - 从HTML5开始，它在技术上是一个XML文档（见注）。

1. 打开开发者工具（F12） 2. 转到控制台并输入以下内容： $x("//p[a]").forEach(myFancyResult => myFancyResult.style.backgroundColor = 'yellow'); "//p[a]"是选择所有包含元素的

元素的XPath表达式。结果是一个数组，被馈送进forEach方法，从中我们修改元素的backgroundColor属性。

注意： 该方法在打开本地的XML文档时存在问题，因为浏览器会应用默认样式表以使用漂亮的颜色查看XML文档，并提供折叠和展开文档的功能；这实际上将XML文档包装在div或span标记中，从而破坏了原始的XML文档，使得此技术有些无用。

- Peter Wilson

Answer 5

检查您的xpath的另一个选项是使用selenium IDE。

1. 安装Firefox Selenium IDE
2. 在FireFox中打开您的应用程序并打开IDE
3. 在IDE中，新建一行，将您的xpath粘贴到目标位置并单击“查找”。相应的元素将在您的应用程序中突出显示

- AJC

Answer 6

我使用WebSync Chrome扩展程序来验证XPath和CSS选择器。

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

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

- wsbaser

---

链接已损坏（404）。 - Peter Mortensen