当前位置：首页 > article >正文

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

article 2025/2/12 2:38:48

在 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 对象。