元素定位练习 · XPATH 定位

📌 方法概念
原理：在 XML/HTML DOM 树中用路径表达式导航到节点；支持相对路径 //、索引 [n]（从 1 开始）、属性 [@attr='val']、函数 contains() / starts-with() / text() / normalize-space() / last()、逻辑运算 and/or、轴定位 parent::*/following-sibling::*。
适用场景：表格行按内容找操作按钮、动态 id、多属性组合、父子兄弟轴相对定位、找不到稳定 CSS 选择器时兜底。
注意事项：优先用相对路径 // 而不是绝对路径 /html/body/...；索引用括号包起来再 [n]；单双引号嵌套避免报错。

💻 Selenium 示例（Python）

from selenium import webdriver
from selenium.webdriver.common.by import By
# 1) 多属性：商品表格，通过 name + data‑cat 属性组合完成元素定位
p = driver.find_element(By.XPATH, "//*[@data-name='无线鼠标' and @data-cat='数码配件']")
# 2) 轴定位：先匹配订单号以202608开头的元素节点，再使用following‑sibling兄弟轴，筛选获取同订单卡片下的付款按钮
btn = driver.find_element(By.XPATH,
    "//*[starts-with(@data-oid,'NO202608')]/following-sibling::div//button[@data-act='pay']")
# 3) 购物商城分类侧边栏：利用contains(.,'电子产品')定位侧边栏分类项，通过父子层级关系，向下查找该分类下对应的商品。
cat = driver.find_element(By.XPATH, "//*[@class='xc-sidebar']//*[contains(normalize-space(),'电子产品')]")
items = driver.find_elements(By.XPATH, "//div[contains(@class,'xc-goods')]")

📋 本节练习清单

• ✅ 练习目标 1：商品管理表格 — 根据 data-id/data-cat/data-status 等属性组合定位「查看/编辑/删除」按钮：//tr[@data-id='P003']//button 或 //tr[td[contains(.,'键盘')]]//button[@data-act='edit']
• ✅ 练习目标 2：会员资料表单 — ① 读取 disabled 元素 //input[@disabled]（会员编号） ② 读取已勾选 radio //input[@type='radio' and @checked]（保密） ③ 读取已勾选兴趣 checkbox //input[@type='checkbox' and @checked]（默认 2 个）；试试 //input[starts-with(@name,'xc_') and @checked]，为什么多了 1 个？ ④ 点击读取按钮
• ✅ 练习目标 3：订单卡片 — ① starts-with 匹配订单号前缀 //*[starts-with(@data-oid,'NO202608')] ② @data-status 过滤待付款 //*[@data-status='pending']（命中 2 张：NO20260802 / NO20260806） ③ 点击「立即付款」按钮：按钮没有 data 属性，推荐用"先拿卡片容器 → 容器内找按钮文字"的组合定位；进阶用 ancestor 轴从订单号跳到按钮
• ✅ 练习目标 4：购物商城 — 依次定位分类侧边栏筛选商品 → 加入购物车 → 立即结算（计算小计/运费/满减）→ 去支付（模拟付款）