自动化xpath定位元素（附几款浏览器xpath插件）

在 Web 自动化测试、数据采集、前端调试中，XPath 仍然是不可或缺的技能。虽然 CSS 选择器越来越强大，但面对复杂 DOM 结构时，XPath 仍然更具灵活性。因此，掌握 XPath，不仅能提高自动化测试的稳定性，还能在爬虫开发、前端调试中提升效率。

在 Web 自动化测试、爬虫开发、前端调试等场景中，XPath 作为一种强大的元素定位方式，常常被用来精准地获取页面元素。你是否在写 XPath 时遇到过：

• 元素定位失败？ 😣
• 路径过长且不稳定？ 🤯
• 层级太多，维护困难？ 💀

如果你也有这些烦恼，那这篇文章一定对你有帮助！今天，我们就来总结 XPath 的常用写法，并推荐几款超好用的 XPath 插件，让你的元素定位更简单高效！

那么，XPath 到底该怎么写才能又短又准？有哪些 XPath 插件可以提高定位效率？ 今天我们一起来聊聊！

XPath 语法总结

🎯 1. 绝对路径 vs 相对路径

• 绝对路径（不推荐）：/html/body/div[1]/div[2]/span（路径长，结构变动就失效）
• 相对路径（推荐）：//div[@class='content']//span（更灵活，适应性强）

关于xpath定位网上有好多资料，我推荐在MDN上查看，个人感觉上面讲的比较全面 https://developer.mozilla.org/en-US/docs/Web/XML/XPath xpath是一门在xml文档中查找信息的语言，它使用路径表达式来选取xml文档中的节点或节点集。同样也可以用于html文件元素的查找

xpath节点的关系术语

以下几个术语看字面意思就能明白

• 父亲（Parent）
• 子（Children）
• 同胞、同级（sibling）
• 祖先（Ancestor）
• 后代（Descendant）

xpath基础语法

选取节点

XPath 使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径或者 step 来选取的。 下面列出了最有用的路径表达式：

表达式	描述
nodename	选取此节点的所有子节点。
/	从根节点选取。
//	从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
.	选取当前节点。
..	选取当前节点的父节点。
@	选取属性。

例子

路径表达式	结果
div	选取 div 元素的所有子节点。
/div	选取根元素 div。注释：假如路径起始于正斜杠( / )，则此路径始终代表到某元素的绝对路径！
div/span	选取属于 div 的子元素的所有 span 元素。
//span	选取所有 span子元素，而不管它们在文档中的位置。
div//span	选择属于 div 元素的后代的所有 span 元素，而不管它们位于 div 之下的什么位置。
//@aria-label	选取名为 aria-label 的所有属性。

 

谓语

谓语被嵌在方括号中，查找元素加上一些特定的限定条件

常用的几种方式

//tag[@attribute=”Value”]	//input[@class='but1']"	找到class=but1的input标签
//tag[@attribute1=”Value1” and @attribute2=”Value2” ]	//input[@class='but1' and @name='key']	布尔逻辑运算; and/or属性与逻辑结合，解决多个属性重名问题
//tag[contains(@attribute1, ”Value1” )]	//input[contains(@placeholder,'请输入')]	模糊匹配： （1）存在属性值一部分是一直不变，另一部分是随机生成的 （2）整体属性太长
//tag[starts-with(@attribute1, ”Value1” )]	//a[starts-with(@class,'abc123')]
//tag[text()=”value”]	//p[text()=”你好”]	text匹配， text也可以用模糊匹配//tag[contains(text(), “value“)]
//tag1/tag2[index]	//form/input[2]	父节点定位子节点层级与属性结合，解决没有属性的问题
//tag1[@attribute=”Value”]/tag2	//input[@class='but1']"/span
//*[@attribute=”value”]/tag2	//*[@class='r']/a	通过*匹配
//tag1//parent::tag2	//span[@icon-name="error-line"]/parent::button	由子节点查找父节点
//tag1//preceding-sibling::tag2	//span[@icon-name="error-line"]/preceding-sibing::input	由弟弟节点查找哥哥节点
//tag1//following-sibling::tag2	//input[@aria-label="Email"]/following-sibling::div	由哥哥节点查找弟弟节点

 

js执行xpath

有时在页面控制台，想立刻验证定位的元素是否正确，是否可以对它进行一些操作，可以使用js,当然也可以使用jquery,抱歉我还没学到，先不讲了

document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result )

第一个参数：是符合xpath语法规则的表达式

contextNode：应评估 xpathExpression 的文档中的节点，包括其任何和所有子节点。document 节点是最常用的

• namespaceResolver：将传递包含在 xpathExpression 中的任何命名空间前缀的函数，它返回一个表示与该前缀关联的命名空间 URI 的字符串。这使得能够在 XPath 表达式中使用的前缀和文档中使用的可能不同的前缀之间进行转换。该转换函数可以是：

  • 使用 [XPathEvaluator] 对象的 [createNSResolver]方法[创建]。
  • null。其可以用于 HTML 文档或者当不使用命名空间前缀时。注意，如果 xpathExpression 包含命名空间前缀，这将导致一个带有 NAMESPACE_ERR 的 DOMException 抛出。
  • 用户定义的函数。有关详细信息，请参阅附录中的 [使用一个用户定义的命名空间解析器] 部分。

• resultType：指定作为评估结果返回的所需结果类型的[常数]。最常传递的常量是 XPathResult.ANY_TYPE，它将返回 XPath 表达式的结果作为最自然的类型。附录中有一个部分，其中包含[可用常数]的完整列表。它们在下面“[指定返回类型]部分中进行解释。

• result：如果指定了现有的 XPathResult 对象，它将被重用以返回结果。指定 null 将创建一个新的 XPathResult 对象。

上实例，以百度输入框为例 我们找到这个输入框，并为这个输入框赋值

 

好用的xpath插件

定位 XPath 规则时，借助浏览器插件可以大大提高效率。以下是几款超实用的插件推荐👇

🦊 1. XPath Helper（Chrome & Edge）

• ✅ 直接在浏览器中测试 XPath 表达式
• ✅ 实时高亮匹配的 HTML 元素
• ✅ 快速复制 XPath 路径

🏹 2. ChroPath（Chrome & Firefox）

• ✅ 支持自动生成 XPath 和 CSS 选择器
• ✅ 支持对 XPath 进行验证和优化
• ✅ 直观的 UI 界面，适合新手

🛠 3. SelectorsHub（Chrome & Edge）

• ✅ 比 ChroPath 功能更强，支持 Shadow DOM 定位
• ✅ 支持智能推荐最优 XPath
• ✅ 可以进行 XPath 教程学习

🔎 4. FirePath（Firefox 专用）

• ✅ 适用于 Selenium 相关测试
• ✅ 在 Firebug 插件中直接获取 XPath

如图所示

 

以chrome浏览器为例，安装成功后，在这里显示

点击任何element,会自动生成好几种定位方式的表达式，大部分都能唯一标识，为了验证生成的表达式是否可用，可以安装另两款插件，两者选一个就可以

xpath finder安装好之后，在这里，我们输入刚才第一个插件生成的xpath表达式，我们可以看到在页面能够找到，并把找到的元素标识出来

xpath helper也有异曲同工之妙，安装试试看吧

总结

XPath 看似复杂，但掌握常用语法后，你就能写出高效、稳定、易维护的定位方式。同时，合理使用 XPath 插件，可以极大提高开发和测试效率，让元素定位变得更简单！

每次碰到需要定位的元素简单，我就直接写代码运行即可，如果碰到复杂的，我就会结合xpath插件生成xpath,验证元素是否能找到，然后在控制台验证它是否可操作，会比直接写代码反复调试，节省不少时间， 大家有更好效率更高的方法请在评论区进行探讨！

学会 XPath，测试开发效率翻倍！选对 XPath 插件，让你快人一步！