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

179

如何验证我的XPath？

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

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

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

google-chrome  firefox  selenium  xpath  selenium-webdriver 
— 用户名
source

Answers:

367

铬

这可以通过三种不同的方法（参见我的博客文章来实现这里有详细介绍）：

  • 在Elements下面的面板中搜索
  • 执行$x()并$$()在Console面板中显示，如劳伦斯的答案所示
  • 第三方扩展（在大多数情况下并不是真正必要的，可能会过大）

在Elements面板中搜索XPath的方法如下：

  1. 按下F12即可开启Chrome开发人员工具
  2. 在“元素”面板中，按Ctrl+F
  3. 在搜索框中，键入XPath或CSS Selector，如果找到了元素，它们将以黄色突出显示。

在此处输入图片说明

Firefox（版本75起）

由于FF 75，可以使用原始xpath查询而无需评估xpath表达式，请参阅文档以获取更多信息。

Firefox（75版以前的版本）

  1. 无论是从Firefox菜单Web开发子菜单中选择“Web控制台”（或工具菜单，如果你显示菜单栏或在Mac OS X）
    或按Ctrl+ Shift+ K（Command+ Option+ K在OS X）的键盘快捷键。

  2. 在底部的命令行中使用以下命令：

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

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

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

Firefox（49版以前的版本）

  1. 安装Firebug
  2. 安装Firepath
  3. 按下F12以打开萤火虫
  4. 切换到FirePath面板
  5. 在下拉菜单中，选择XPath或CSS
  6. 输入以找到

在此处输入图片说明

— 曾Z
source
2
：只要一个警告的XPath和浏览器，因为这会导致大量的混乱stackoverflow.com/questions/18241029/...
— 延ERAT
@JensErat：真的很好。对于其他阅读此评论的人，正如该问题中已经提到的那样，Selenium不会受到影响，因为它驱动浏览器并使用与开发工具相同的底层JavaScript评估技术。
— 伊增
1
@ user1177636：您使用了什么软件来生成这些GIF？
— JacekM 2014年
如果您还需要XQuery的本地解析器，我也可以找到BaseX：basex.org/products
— tuxErrante
4
Answer需要为Firefox更新。不幸的是，Firebug已过时，并且已经合并到Developer Tools中。当前，您可以在控制台中测试xpath表达式，例如$("//div")
— derloopkat
53

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

Firefox v66（2019年4月）：

Firefox v66控制台xpath

Chrome v69（2019年4月）：

Chrome v69控制台xpath

— 波斯尼亚克
source
1
此方法不是理想的方法，但最好知道，因为您在该控制台中编写的任何xpath表达式都可以由Selenium中的JavascriptExecutor执行。有时您可以将其用作解决方法，也许是在禁用Firefox本机事件时？
— djangofan 2014年
1
@djangofan，你是什么意思？按照这种逻辑，尽管答案正确，但您的逻辑都不需要这两个答案。
— 2014年
1
@bosnjak当$x("//input[@name='q']")我在控制台中尝试此操作时VM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
— YasserKhalil
@YasserKhalil您使用的是哪个浏览器，哪个版本？您在哪个网站上进行此操作？
— bosnjak
16

通过使用Chrome或Opera

没有任何插件，没有编写任何XPath语法字符

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

;）

在此处输入图片说明

— 。萨默尔·T
source
2
对于Chrome，这是我见过的最好的解决方案。感谢分享。当我不想使用Firefox时，可以更轻松地在Chrome中进行确认。
— 自动化测试
我已经用了这个很大的好处。但是一个大问题是，有时上下文菜单被禁用或覆盖。然后，您必须依靠其他方法。
— ouflak
1
这并不能真正回答问题。它不是在验证现有的xpath，而是在生成一个。当存在更好的解决方案时，Chrome生成的解决方案通常很难看而且非常脆弱。
— Major Major
6

这是Chrome的ChroPath扩展，与FirePath相比，具有许多高级功能-请按照以下步骤操作：

  1. 打开devtools面板。
  2. 右键单击网页上的任意位置。
  3. 单击检查。
  4. 在“元素”选项卡的右侧，单击“ ChroPath”选项卡。

在这里，您将获得XPath / CSS，还可以对其进行编辑和评估。

下载插件

— SanjayKumar I ChroPath创建器
source
1
ChroPath扩展在2020年仍然可以使用。谢谢。大的帮助。
— 泡泡
1

检查xpath的另一种方法是使用Selenium IDE。

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

硒IDE

— AJC
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.