🔍 XPath 练习场

在控制台用 $x('你的xpath') 验证，或直接在输入框中验证

🖥️ 如何在浏览器控制台练习 XPath

第一步：打开控制台

第二步：用 $x() 查询元素

$x() 是浏览器控制台内置方法，输入 XPath 后按回车，返回匹配的元素数组：

// 查找所有包含 'price' class 的 div
$x('//div[contains(@class, "product-price")]')

▸ [div.product-price, div.product-price] // 匹配到 2 个元素

查看匹配数量：

$x('//input[@id="username"]').length

▸ 1 // 匹配到 1 个

获取匹配元素的文本内容：

$x('//button[text()="提交订单"]')[0].textContent

▸ "提交订单"

第三步：高亮验证（看看是不是对的那一个）

// 给匹配到的元素加红色边框，直观看到位置
$x('//input[@type="password" and @id="pwd"]').forEach(el => el.style.border = '3px solid red')
// 清除所有高亮
document.querySelectorAll('[style*="border"]').forEach(el => el.style.border = '')
RPA 开发中常用这个技巧确认 XPath 是否准确定位到了目标元素，避免操作错误的元素。

常用控制台快捷方法

方法作用示例
$x('xpath') XPath 查询，返回元素数组 $x('//div[@class="name"]')
$$('css') CSS 选择器查询（querySelectorAll） $$('.product-price')
$('css') CSS 选择器，只返回第一个 $('#username')
$0 Elements 面板中当前选中的元素 $0.textContent
copy() 复制结果到剪贴板 copy($x('//td')[0].textContent)
$x 只能在浏览器开发者工具的 Console 中使用，不能在网页的 JavaScript 代码里直接调用。如果需要在代码中执行 XPath，请用 document.evaluate()。

document.evaluate() 完整用法

在自动化脚本中使用的标准写法：

var result = document.evaluate(
  '//input[@id="username"]',
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);
for (var i = 0; i < result.snapshotLength; i++) {
  console.log(result.snapshotItem(i));
}
console.log('共 ' + result.snapshotLength + ' 个');
练习时优先用 $x()，简短快捷。在写 RPA/自动化代码时再用 document.evaluate()。
1
通过 ID 定位
最基本的定位方式，ID 全局唯一
⭐ 入门
//元素名[@id='值'] 提示

📄 目标：找到用户名输入框

<input type="text" id="username" placeholder="请输入用户名">
<input type="text" id="password" placeholder="请输入密码">
<input type="text" id="email" placeholder="请输入邮箱">
2
通过 class 定位
class 可能有多个值，注意包含匹配
⭐ 入门
//div[contains(@class, '类名')] 提示

📄 目标：找到价格标签（class 含 "price"）

📱
iPhone 15
A17 Pro 芯片
¥5999 ¥6999
💻
MacBook Pro
M3 Max 芯片
¥14999 ¥17999
<div class="product-price">¥5999</div>
<div class="product-price">¥14999</div>
3
通过文本内容定位
根据元素内的文字精确匹配，非常适合按钮/链接
⭐ 入门
//元素[text()='文本'] 提示

📄 目标：找到「提交订单」按钮

<button id="btn-submit">提交订单</button>
4
通过任意属性定位
data-xxx、name、placeholder 等任意属性都行
⭐ 入门
//input[@placeholder='值'] 提示

📄 目标：找到搜索框（placeholder="搜索商品..."）

<input type="text" name="q" placeholder="搜索商品...">
5
通过层级关系定位（子元素、后代）
当目标元素本身不好定位时，通过父级 + 层级组合定位
⭐⭐ 进阶
//div[@id='item-2']/div[contains(@class,'name')] / = 直接子元素

📄 目标：找到 id="item-2" 下的商品名称「MacBook Pro」

📱
iPhone 15
💻
MacBook Pro
<div id="item-2">
  <div class="product-info">
    <div class="name">MacBook Pro</div>
  </div>
</div>
6
多条件组合定位（AND）
用 and / or 组合多个属性条件
⭐⭐ 进阶
//input[@type='password' and @id='pwd'] 提示

📄 目标：找到 type=password 且 id=pwd 的输入框

<input type="text" id="username">
<input type="password" id="pwd"> ← 目标
<input type="password" id="pay-pwd">
7
contains 模糊文本匹配
文本不完全相同时，用 contains 部分匹配
⭐⭐ 进阶
//a[contains(text(), '帮助')] 提示

📄 目标：找到文本包含「帮助」的链接

首页 产品 帮助中心 关于我们 帮助文档
<a href="#">首页</a>
<a href="#">帮助中心</a> ← 匹配
<a href="#">帮助文档</a> ← 匹配
8
通过 for 属性关联 label
label 的 for 对应 input 的 id，RPA 常用技巧
⭐⭐ 进阶
//label[@for='email'] 提示

📄 目标：找到关联到 email 输入框的 label

<label for="username">用户名</label>
<label for="email">邮箱地址</label> ← 目标
<label for="phone">手机号</label>
9
轴定位（parent / following-sibling）
通过兄弟节点、父节点间接定位目标元素
⭐⭐⭐ 挑战
//td[text()='张三']/following-sibling::td[1] 轴定位

📄 目标：找到「张三」后面相邻的 td（即他的手机号）

姓名手机号状态
李四13800001111在职
张三13900002222离职
王五13700003333在职
<tr>
  <td>张三</td>
  <td>13900002222</td> ← 目标
  <td>...</td>
</tr>
10
索引定位（第 N 个元素）
用 [1] [2] [last()] 精确取第几个
⭐⭐ 进阶
//li[3]  或  //li[last()] 索引从 1 开始！

📄 目标：找到第 3 个 li 元素

  • 🍎 苹果 iPhone 15
  • 📱 华为 Mate 60
  • 💻 联想 ThinkPad
  • 🎧 索尼 WH-1000XM5
  • ⌚ Apple Watch Ultra
<li>🍎 苹果 iPhone 15</li> ← [1]
<li>📱 华为 Mate 60</li> ← [2]
<li>💻 联想 ThinkPad</li> ← [3] 目标
<li>🎧 索尼 WH-1000XM5</li> ← [4]
<li>⌚ Apple Watch Ultra</li> ← [5] / last()
11
starts-with 前缀匹配
匹配属性值以某个字符串开头的元素
⭐⭐ 进阶
//input[starts-with(@id, 'user')] 提示

📄 目标：找到所有 id 以 "user" 开头的 input

<input id="user-name"> ← 匹配
<input id="user-email"> ← 匹配
<input id="user-phone"> ← 匹配
<input id="order-id"> ← 不匹配
12
🏆 综合挑战：多层嵌套 + 多条件
结合多种技巧，在复杂表格中定位特定单元格
⭐⭐⭐ 挑战
//tr[.//td[1]='赵六']/td[3] 综合运用

📄 目标：找到「赵六」所在行的「状态」（第3列）

姓名部门状态
李四技术部在职
张三市场部离职
王五设计部在职
赵六产品部试用期
<tr>
  <td>赵六</td>
  <td>产品部</td>
  <td><span class="badge badge-blue">试用期</span></td> ← 目标
</tr>