如何在 Chrome Developers 工具或 Firefox 的 Firebug 中验证 XPath 表达式? [英] How to verify an XPath expression in Chrome Developers tool or Firefox's Firebug?

问题描述

如何验证我的 XPath?

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

我也尝试过使用 Firebug 检查错误并使用 FirePath 进行验证.但是 Firepath 是否也验证了 XPath.

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

解决方案

Chrome

这可以通过三种不同的方法来实现(参见我的博客文章 了解更多信息.

Firefox(75 之前的版本)

1. 从 Web Developer 子菜单中选择Web Console"Firefox 菜单(或工具菜单，如果您显示菜单栏或在 Mac OS X 上)
   或按 Ctrl+Shift+K (Command+Option+K 在 OS X 上)键盘快捷键.

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

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

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

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

<小时>

Firefox(49 之前的版本)

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

How can I verify my XPath?

I am using Chrome Developers tool to inspect the elements and form my XPath. I verify it using the Chrome plugin XPath Checker, however it does not always give me the result. What is a better way to verify my XPath.

I have also tried using Firebug to inspect the bug and also using the FirePath to verify. But does Firepath also verify the XPath.

My last option would be to use the Selenium WebDriver to confirm my XPath.

解决方案

Chrome

This can be achieved by three different approaches (see my blog article here for more details):

• Search in Elements panel like below
• Execute $x() and $$() in Console panel, as shown in Lawrence's answer
• Third party extensions (not really necessary in most of the cases, could be an overkill)

Here is how you search XPath in Elements panel:

1. Press F12 to open Chrome Developer Tool
2. In "Elements" panel, press Ctrl+F
3. In the search box, type in XPath or CSS Selector, if elements are found, they will be highlighted in yellow.

Firefox (since version 75)

Since FF 75 it's possible to use raw xpath query without evaluation xpath expressions, see documentation for more info.

Firefox (prior version 75)

1. Either select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)
   or press the Ctrl+Shift+K (Command+Option+K on OS X) keyboard shortcut.

2. In the command line at the bottom use the following:

   • $(): Returns the first element that matches. Equivalent to document.querySelector() or calls the $ function in the page, if it exists.

   • $$(): Returns an array of DOM nodes that match. This is like for document.querySelectorAll(), but returns an array instead of a NodeList.

   • $x(): Evaluates an XPath expression and returns an array of matching nodes.

---

Firefox (prior version 49)

1. Install Firebug
2. Install Firepath
3. Press F12 to open Firebug
4. Switch to FirePath panel
5. In dropdown, select XPathor CSS
6. Type in to locate

这篇关于如何在 Chrome Developers 工具或 Firefox 的 Firebug 中验证 XPath 表达式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！