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

Question

如何验证我的XPath？

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

我还尝试使用Firebug来检查错误并使用FirePath进行验证。但Firepath还验证了XPath。

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

Answer 1

铬

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

• 在Elements面板中搜索，如下所示
• 在$x()面板中执行$$()和Console，如Lawrence的answer
所示
• 第三方扩展（在大多数情况下不是必需的，可能是一种过度杀伤）

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

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



火狐

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

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

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

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

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

---

Firefox（先前版本49）

1. 安装Firebug
2. 安装Firepath
3. 按 F12 打开Firebug
4. 切换到FirePath面板
5. 在下拉列表中，选择XPathor CSS
6. 输入以查找

Answer 2

您可以在Chrome和Firefox中打开控制台（F12打开开发工具，然后选择Console标签），然后输入$x("your_xpath_here")检查XPath。这将返回一组匹配的值。如果它为空，则表示页面上没有匹配项。

Firefox v66（2019年4月）：

Chrome v69（2019年4月）：

Answer 3

使用chrome或Opera

没有任何插件的

，没有编写任何单个XPath语法字符

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

）

Answer 4

以下是Chrome的ChroPath扩展程序，与FirePath相比具有许多高级功能 - 请按照以下步骤操作： 1）打开devtools面板。 2）右键单击网页上的任意位置。 3）单击“检查”。 4）在Elements选项卡的右侧，单击ChroPath选项卡。 在这里，您将获得XPath / CSS，您还可以编辑和评估它。

Download addon

Answer 5

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

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

Answer 6

我使用Natu WebSync extension for Chrome验证XPath和Css选择器。

它可以：

• 将选择器拆分为零件并单独验证
• 用颜色显示每个选择器部件找到多少个元素。 0 - 红色，1 - 绿色，数个 - 黄色
• 当我悬停选择器部分
时突出显示页面上的元素
• 单击选择器部分
时导航到Elements选项卡中的selector元素

对于那些需要编写和验证复杂选择器的人来说，它非常有用。

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