XPath语法详解及案例讲解

XPath(XML Path Language)是一种查询语言,用于在XML或HTML文档中定位节点元素。Selenium广泛使用XPath来定位网页中的元素,尤其适用于复杂的层级结构或属性定位。


1. 基本语法与案例

语法 描述 示例 案例
/ 绝对路径,从根节点开始 /html/body/div 定位根节点下的第一个div元素。
// 相对路径,从任意位置开始 //div 定位文档中所有的div元素。
* 匹配任意元素 //*[@class='btn'] 定位class为btn的所有元素。
@ 属性定位 //input[@id='username'] 定位id="username"的输入框。
text() 定位包含特定文本内容的元素 //button[text()='提交'] 定位文本内容为"提交"的按钮。
contains() 模糊匹配,包含指定值 //div[contains(@class, 'header')] 定位class包含header的所有div元素。
starts-with() 定位以指定值开头的属性 //input[starts-with(@id, 'user')] 定位iduser开头的输入框。

2. XPath 轴选择

轴语法 描述 示例 案例
parent:: 定位父节点 //button/parent::div 定位按钮的父节点div
child:: 定位子节点 //div/child::p 定位div的直接子节点p元素。
ancestor:: 定位祖先节点 //span/ancestor::div 定位span的所有祖先节点div元素。
descendant:: 定位后代节点 //div/descendant::span 定位div下的所有后代节点span
following-sibling:: 定位后续兄弟节点 //h2/following-sibling::p 定位h2标签之后的所有兄弟节点p元素。
preceding-sibling:: 定位前面的兄弟节点 //h2/preceding-sibling::p 定位h2标签之前的所有兄弟节点p元素。

3. XPath 高级用法

3.1 多条件定位
复制代码
//input[@type='text' and @placeholder='请输入用户名']

案例 :定位一个输入框,要求type="text"placeholder="请输入用户名"

3.2 分组定位
复制代码
//div[@id='menu'] | //span[@class='icon']

案例 :同时定位id="menu"divclass="icon"span

3.3 索引定位
复制代码
//ul/li[3]

案例 :定位列表中第3个li元素。


4. 结合案例使用

4.1 定位登录表单
复制代码
//form[@id='loginForm']/input[@name='username']

解释 :定位id="loginForm"的表单内,name="username"的输入框。

4.2 定位特定表格单元格
复制代码
//table[@id='dataTable']/tbody/tr[2]/td[3]

解释 :定位id="dataTable"表格的第2行、第3列。


5. 特殊场景用法

5.1 子节点查找父节点
复制代码
//span[@class='child']/parent::div

案例 :通过class="child"span元素定位其父节点div

5.2 使用文本的模糊查找
复制代码
//a[contains(text(), '更多')]

案例:定位文本中包含"更多"的链接。

5.3 动态元素定位
复制代码
//button[starts-with(@id, 'submit')]

案例 :定位idsubmit开头的按钮。

5.4 复合条件与轴结合
复制代码
//div[@class='content']/descendant::p[text()='文章正文']

案例 :定位class="content"div中,包含文本"文章正文"的p元素。


6. XPath 调试技巧

  1. 浏览器工具:使用 Chrome 或 Firefox 的开发者工具,在控制台中直接测试 XPath 表达式。
  2. 高效定位 :尽量避免使用绝对路径(/html/body/...),多使用相对路径(//div)。
  3. 结合调试工具:如插件 XPath Helper 或 Selenium IDE 快速验证 XPath。
相关推荐
这人是玩数学的2 分钟前
在 Cursor 中规范化生成 UI 稿实践
前端·ai编程·cursor
UncleKyrie3 分钟前
🎨 市面上主流 Figma to Code MCP 对比
前端
李明卫杭州5 分钟前
CSS `clamp()` 函数详解
javascript
奶丝兔蜜柚10 分钟前
栈溢出优化
javascript
南半球与北海道#16 分钟前
前端引入vue-super-flow流程图插件
前端·vue.js·流程图
然我22 分钟前
React 16.8:不止 Hooks 那么简单,这才是真正的划时代更新 🚀
前端·react.js·前端框架
天天摸鱼的java工程师24 分钟前
Java 解析 JSON 文件:八年老开发的实战总结(从业务到代码)
java·后端·面试
白仑色25 分钟前
Spring Boot 全局异常处理
java·spring boot·后端·全局异常处理·统一返回格式
喵手31 分钟前
反射机制:你真的了解它的“能力”吗?
java·后端·java ee
小高00736 分钟前
📈前端图片压缩实战:体积直降 80%,LCP 提升 2 倍
前端·javascript·面试