上期内容：【即是过客】《XPath合集002》XPath 函数与操作符 —— 从入门到精通：全面掌握网页元素定位技术

XPath高级技巧：精确定位网页元素的高级指南

掌握这些技巧，轻松应对复杂网页结构与动态内容

在网页自动化与数据抓取领域，XPath是定位元素的“瑞士军刀”。然而面对动态属性、嵌套命名空间或复杂层级结构时，基础语法往往力不从心。本文将深入解析四大高阶技巧，助你成为XPath定位专家。

一、合并表达式：用 | 运算符实现多目标定位

场景：电商商品页需同时监控“加入购物车”和“收藏商品”按钮的状态变化。

<div class="product-actions">  
    <button class="btn-cart" data-testid="add-to-cart">加入购物车</button>  
    <button class="btn-fav" aria-label="收藏商品">❤️</button>  
</div>  

解决方案：

//button[@data-testid='add-to-cart'] | //button[contains(@aria-label, '收藏')]  

讲解：

• | 运算符将两个独立表达式的节点集合并输出，类似逻辑“或”操作；
• 避免重复查询相同父节点，提升定位效率（尤其在大文档中）；
• 适用场景：批量操作同类功能元素（如多标签页按钮、表单提交选项）。

二、命名空间处理：突破XML/SVG的定位壁垒

场景：抓取SVG图表中的环形进度条数据。

<svg xmlns=" http://www.w3.org/2000/svg " viewBox="0 0 100 100">  
    <circle class="progress-ring" cx="50" cy="50" r="45" stroke-width="5"/>  
</svg>  

解决方案：

//*[name()='circle' and contains(@class, 'progress-ring')]  

讲解：

• 命名空间（如 svg:circle）会导致标准XPath //circle 失效；
• name()='circle' 绕过命名空间限制，直接匹配标签名；
• 影刀RPA特别提示：处理浏览器渲染的SVG时，优先使用 contains(@class) 而非精确匹配动态生成的类名。

三、轴定位：巧用层级关系锁定目标

1. self:: 轴：验证当前节点属性

场景：验证表格中“已选中”行的复选框状态。

<tr>  
    <td><input type="checkbox" class="row-selector" checked></td>  
    <td>产品A</td>  
</tr>  

解决方案：

//tr/td[1]/input[@checked]/self::input  

讲解：

• self::input 确认当前节点是 <input> 标签且满足 @checked 条件；
• 常用于循环遍历时校验元素属性是否符合预期。

2. following-sibling:: 轴：定位右侧兄弟节点

场景：从“用户名”标签定位其右侧的输入框。

<div class="form-row">  
    <label>用户名：</label>  
    <input type="text" id="username">  
    <span class="hint">请输入6-12位字符</span>  
</div>  

解决方案：

//label[text()='用户名：']/following-sibling::input[1]  

讲解：

• following-sibling:: 选择同一父节点下的后继元素；
• [1] 限定为紧邻的第一个兄弟节点（索引从1开始）；
• 典型应用：表格数据提取（如从表头定位对应数据列）。

3. preceding-sibling:: 轴：定位左侧兄弟节点

场景：从“价格”单元格反向定位商品名称。

<tr>  
    <td class="product">产品A</td>  
    <td class="price">¥100</td>  
</tr>  

解决方案：

//td[@class='price']/preceding-sibling::td[1]  

讲解：

• 与 following-sibling:: 方向相反，用于逆向定位；
• 适合动态生成内容导致正向定位不稳定的场景。

四、动态表达式：应对ID/Class随机变化

场景：抓取含动态ID的订单列表项（每次刷新ID变化）。

<ul id="order-list">  
    <li id="order_status">待处理</li>
    <li id="order_5a3b_yingdao_2c1d">订单A</li>  
    <li id="order_9f8e_yingdao_7d6c">订单B</li>  
</ul>  

解决方案：

//li[starts-with(@id, 'order_') and contains(@id, 'yingdao')]  

讲解：

• starts-with() 匹配固定前缀，contains() 确保ID包含关键字段；
• 双重校验避免误匹配（如 order_status 被错误捕获）；
• 性能优化：优先用 starts-with()，其执行效率高于 contains()。

⚡️ 综合练习题

<div class="product-list" id="main-container">
  <!-- 商品卡片1 -->
  <div class="product-card" data-id="prod_5a3b2c">
    <div class="header">
      <h3 class="title">高性能笔记本电脑</h3>
      <span class="tag new">新品</span>
      <span class="tag discount">限时优惠</span>
    </div>
    <div class="content">
      <p class="price">¥6,999 <del>¥7,999</del></p>
      <div class="rating">
        <span class="star filled">★</span>
        <span class="star filled">★</span>
        <span class="star filled">★</span>
        <span class="star filled">★</span>
        <span class="star">☆</span>
        <span class="reviews">(128条评价)</span>
      </div>
      <div class="actions">
        <button class="btn add-cart" data-testid="cart-btn-1">加入购物车</button>
        <button class="btn buy-now">立即购买</button>
      </div>
    </div>
  </div>
  
  <!-- 商品卡片2 -->
  <div class="product-card" data-id="prod_9f8e7d">
    <div class="header">
      <h3 class="title">无线蓝牙耳机</h3>
      <span class="tag hot">热卖</span>
    </div>
    <div class="content">
      <p class="price">¥399 <del>¥599</del></p>
      <div class="rating">
        <span class="star filled">★</span>
        <span class="star filled">★</span>
        <span class="star filled">★</span>
        <span class="star filled">★</span>
        <span class="star filled">★</span>
        <span class="reviews">(256条评价)</span>
      </div>
      <div class="actions">
        <button class="btn add-cart" data-testid="cart-btn-2">加入购物车</button>
        <button class="btn buy-now">立即购买</button>
      </div>
    </div>
  </div>
  
  <!-- 商品卡片3 -->
  <div class="product-card out-of-stock" data-id="prod_123abc">
    <div class="header">
      <h3 class="title">智能手表</h3>
      <span class="tag discount">限时优惠</span>
    </div>
    <div class="content">
      <p class="price">¥1,299 <del>¥1,599</del></p>
      <div class="rating">
        <span class="star filled">★</span>
        <span class="star filled">★</span>
        <span class="star filled">★</span>
        <span class="star">☆</span>
        <span class="star">☆</span>
        <span class="reviews">(87条评价)</span>
      </div>
      <div class="actions">
        <span class="stock-status">缺货</span>
      </div>
    </div>
  </div>
</div>
 

问题：

问题1：合并表达式与动态属性

要求：编写XPath同时定位所有"加入购物车"按钮和"立即购买"按钮

提示：注意data-testid属性的动态后缀

问题2：轴定位与兄弟节点

要求：定位"无线蓝牙耳机"商品的"限时优惠"标签

提示：该商品没有"限时优惠"标签，需要定位相邻商品

问题3：动态属性与条件组合

要求：定位所有有折扣且评价数量超过100条的商品卡片

问题4：复杂轴定位与状态判断

要求：定位"智能手表"商品的库存状态元素

提示：该商品没有按钮，而是显示"缺货"文本

问题5：综合应用（命名空间+轴定位+动态属性）

要求：定位所有星级评价为4星及以上的商品标题

结语：高阶技巧的核心价值

1. 稳定性提升：通过相对路径与模糊匹配，抵御前端代码频繁变更；
2. 效率优化：轴定位减少DOM遍历层级，合并表达式降低查询次数；
3. 灵活扩展：动态表达式适配异步加载内容与组件化框架（如iframe）。

掌握这些技巧，复杂网页定位将不再是瓶颈。