元素定位综合练习平台

📌 方法概念
原理：通过 id 属性全局唯一定位单个元素；浏览器原生对 id 查询做了底层优化（哈希表），因此执行速度最快、结果最稳定。
适用场景：元素 id 唯一、不动态变化、语义明确的场景（按钮、输入框、表单、搜索框）。
注意事项：需确认 id 在整个 HTML 中全局唯一；动态生成的 id（如 j_id123、带随机数字的）不要用；优先找带有业务语义的 id。

💻 Selenium 示例（Python）

from selenium import webdriver
from selenium.webdriver.common.by import By
# 1) 定位单个按钮（登录按钮 / 提交按钮 / 搜索按钮）
driver.find_element(By.ID, "attr_id_btn_login").click()
# 2) 定位搜索框输入关键词后回车
driver.find_element(By.ID, "attr_id_search_input").send_keys("Selenium入门")
# 3) 先通过父容器 ID 定位 再找子元素（组合定位）
form = driver.find_element(By.ID, "attr_id_login_form")
form.find_element(By.ID, "attr_id_login_user").send_keys("admin")

📋 本节练习清单

• ✅ 练习目标 1：登录表单 — 首先定位用户名输入框并输入用户名 By.ID, "attr_id_login_user"；接着定位密码输入框并输入密码 By.ID, "attr_id_login_pwd"；然后定位并勾选“7天内记住我”复选框By.ID, "attr_id_remember_me"；最后定位并点击登录按钮 By.ID, "attr_id_btn_login"
• ✅ 练习目标 2：搜索框 — 首先定位搜索框并输入关键词 By.ID, "attr_id_search_input"；接着定位搜索按钮并点击 By.ID, "attr_id_btn_search"；拓展：用 get_attribute("value") 读取搜索框当前值
• ✅ 练习目标 3：商品面板 + 购物车 — 首先定位并点击任意商品「加入购物车」按钮；接着观察购物车数量变化 By.ID, "attr_id_cart_count"；最后观察购物车状态文字变化 By.ID, "attr_id_cart_status"

📌 方法概念
原理：通过 HTML 元素的 name 属性定位；在表单提交时，name=value 会以键值对形式传递给后端，因此表单元素几乎都有 name。
适用场景：表单操作（输入文字、单选、多选、下拉选择、提交/重置）、同名多值元素（如 radio group 性别、checkbox 爱好）。
注意事项：name 可能不唯一，需使用 find_elements 取下标 [0]/[1]/[2] 或按 value 二次过滤；type=hidden 元素需 JS 才能设置。

💻 Selenium 示例（Python）

from selenium import webdriver
from selenium.webdriver.common.by import By
# 1) 定位用户名输入框（name="nameForm1_username"）
driver.find_element(By.NAME, "nameForm1_username").send_keys("zhangsan")
# 2) 定位 radio group 选性别女（多个同名按下标）
genders = driver.find_elements(By.NAME, "nameForm1_gender")
for g in genders:
    if g.get_attribute("value") == "F": g.click()
# 3) 组合定位：name 表单容器 + 再找子元素
form = driver.find_element(By.ID, "nameForm1_form")
form.find_element(By.NAME, "nameForm1_submit").click()

📋 本节练习清单

• ✅ 练习目标 1：新用户注册表单 — ① 填写姓名/邮箱/手机号/城市 By.NAME, "nameForm1_username" 等 4 个输入框 ② 勾选性别 radio（name=nameForm1_gender）和爱好 checkbox（name=nameForm1_hobby，可多选） ③ 勾选「同意用户协议」→ 点击提交按钮观察 Toast + 效果区记录

📌 方法概念
原理：通过元素的一个 class 名称定位；匹配所有 classList 中包含该名称的元素（多个 class 元素也能定位其中任何一个）。
适用场景：批量统计同类元素（如一组标签卡片、用户头像、商品卡片、列表项）、或页面中 class 语义明确且唯一的特殊元素。
注意事项：只能传「单个 class 名」，不能有空格！如元素 class="demo-btn green" 必须分别用 demo-btn 或 green，不能一起传；多 class 组合请用 By.CSS_SELECTOR。

💻 Selenium 示例（Python）

from selenium import webdriver
from selenium.webdriver.common.by import By
# 1) 定位单个 class="avatar-name" 的第一个用户卡片
first_user = driver.find_element(By.CLASS_NAME, "attrClass_avatar_name")
print(first_user.text)
# 2) find_elements 批量读取所有 5 个标签卡片文字
tags = driver.find_elements(By.CLASS_NAME, "attrClass_tag_box")
for t in tags: print(t.text)
# 3) 组合定位：先 CLASS 取用户卡片容器，再找内部姓名/职位
cards = driver.find_elements(By.CLASS_NAME, "attrClass_img_card")
for c in cards:
    name = c.find_element(By.CLASS_NAME, "attrClass_avatar_name").text
    role = c.find_element(By.CLASS_NAME, "attrClass_avatar_role").text
# 4) 进阶：订单卡组合定位 — 遍历所有订单容器，在每张卡内部读取状态/金额，做统计或过滤
orders = driver.find_elements(By.CLASS_NAME, "attrClass_order_card")
for o in orders:
    st    = o.find_element(By.CLASS_NAME, "attrClass_order_status").text
    amount = o.find_element(By.CLASS_NAME, "attrClass_order_amount").text
    print(st, amount)

📋 本节练习清单

• ✅ 练习目标 1：技术标签卡片 — find_elements(By.CLASS_NAME, "attrClass_tag_box") 拿到 5 个卡片，按索引点击每个卡片并获取文字内容
• ✅ 练习目标 2：用户头像卡片（组合定位） — 先 find_elements(By.CLASS_NAME, "attrClass_img_card") 拿到 3 张卡片容器，再每张卡内部 card.find_element(By.CLASS_NAME, "attrClass_avatar_name") / attrClass_avatar_role 读取姓名和职位
• ✅ 练习目标 3：订单卡片（组合定位进阶） — 先拿 6 张 attrClass_order_card 容器，每张内部再用 class 定位 4 个子元素；完成：a. 按状态统计数量（已付款×2 / 已发货×1 / 待付款×1 / 已完成×1 / 已取消×1）b. 筛选金额 ≥ 500 的大订单（1280.50 和 899.00 共 2 张）c. 确认页面上 5 种状态徽章都能被 find_element 找到

📌 方法概念
原理：通过 HTML 原生标签名（如 <a>、<input>、<button>、<img>、<tr>、<td>）定位所有同名标签；绝大多数场景配合 find_elements 批量获取。
适用场景：统计链接数量、批量读取图片 alt 列表、遍历表格每一行数据、获取页面中所有按钮并依次点击。
注意事项：TAG_NAME 返回通常元素很多，一定要二次过滤（按属性、按位置、按父容器）；<input> 要区分 type=text/email/password/hidden。

💻 Selenium 示例（Python）

from selenium import webdriver
from selenium.webdriver.common.by import By
# 1) 统计当前页面所有 <a> 超链接
links = driver.find_elements(By.TAG_NAME, "a")
print("链接总数：", len(links))
# 2) 读取所有 <img> 的 alt 属性（检查是否合规）
imgs = driver.find_elements(By.TAG_NAME, "img")
for img in imgs: print(img.get_attribute("alt"))
# 3) 组合：先 id 找学生表格 → 再 TAG_NAME('tr') 遍历每行
tbl = driver.find_element(By.ID, "tag_student_table")
rows = tbl.find_elements(By.TAG_NAME, "tr")
for r in rows:
    cells = r.find_elements(By.TAG_NAME, "td")
    print([c.text for c in cells])

📋 本节练习清单

• ✅ 练习目标 1：TAG_NAME 统计 + 按钮点击 — 点击页面上的「统计链接/输入框/按钮」按钮，记下显示数字（基准值），再用 len(driver.find_elements(By.TAG_NAME, "a")) / "input" / "button" 对比两边数量是否一致；尝试两种写法：find_elements 过滤 vs find_element 精确定位
• ✅ 练习目标 2：3 张风景图片 — find_elements(By.TAG_NAME, "img") 批量获取，按下标取每张图、读取 alt 属性；点击图片后效果区记录图编号和 alt 值
• ✅ 练习目标 3：学生表格 4 行 — 先 id 拿 table，再 TAG_NAME('tr') 取 rows，每行 TAG_NAME('td') 取 4 列（学号/姓名/年龄/班级），点击任意行查看详细数据

📌 方法概念
原理：精准匹配 <a> 标签的 innerText（可见文字，完全相等，区分大小写），只对超链接生效；内部空格和换行用 normalize-space 逻辑。
适用场景：导航菜单点击、资源卡片跳转按钮、侧边栏菜单等「链接文字稳定、语义明确」的场景。
注意事项：① 必须完全一致（差一个空格/标点都匹配不到）；② 只适用于 a 标签，button/span 标签无效；③ 页面有多个同文字链接时, find_element 只返回第一个匹配元素，要求返回所有匹配元素时用 find_elements。

💻 Selenium 示例（Python）

from selenium import webdriver
from selenium.webdriver.common.by import By
# 1) 精确匹配 4 个导航链接之一
driver.find_element(By.LINK_TEXT, "Selenium 官方文档").click()
# 2) 精确匹配 3 个资源卡的跳转按钮（全部完全一致）
links = driver.find_elements(By.LINK_TEXT, "立即前往学习 →")
for lnk in links: lnk.click()
# 3) 组合定位：先 id 取导航容器 → 再在容器内 LINK_TEXT 精确查找
nav = driver.find_element(By.ID, "link_site_nav")
nav.find_element(By.LINK_TEXT, "Pytest 单元测试").click()

📋 本节练习清单

• ✅ 练习目标 1：精确导航链接（5 条，文字唯一） — 依次点击 5 个链接（首页 / Selenium 官方文档 / Appium 移动自动化 / Pytest 单元测试 / Playwright 新手指南），使用 By.LINK_TEXT, "首页" 等精确匹配，观察日志面板记录
• ✅ 练习目标 2：资源学习卡片（3 张，内含相同文字链接） — 3 张卡片的「立即前往学习 →」链接文字完全相同；用 find_elements(By.LINK_TEXT, "立即前往学习 →") 取列表，按下标 [0]/[1]/[2] 分别点击
• ✅ 练习目标 3：组合定位（限定容器内查找） — 先 sidebar = driver.find_element(By.ID, "link_sidebar_left") 定位管理后台侧边栏容器，再 sidebar.find_element(By.LINK_TEXT, "首页").click() 精准点击；扩展试试 #link_sidebar_right 电商店铺侧边栏

📌 方法概念
原理：匹配 <a> 可见文字中「包含指定子串」的所有链接（模糊匹配），相当于 SQL 中的 LIKE "%keyword%"。
适用场景：链接文字带动态日期/编号、前缀品牌名固定、链接文字很长只需记住关键词。
注意事项：子串可能匹配到多个，需 find_elements + 下标遍历；区分大小写；只适用于 a 标签。

💻 Selenium 示例（Python）

from selenium import webdriver
from selenium.webdriver.common.by import By
# 1) 关键词「Selenium」模糊匹配所有相关新闻
selenium_news = driver.find_elements(By.PARTIAL_LINK_TEXT, "Selenium")
# 2) 关键词「下载」可定位所有带下载的链接
dl = driver.find_elements(By.PARTIAL_LINK_TEXT, "下载")
# 3) 组合：先 id 取友情链接 → 再部分匹配
box = driver.find_element(By.ID, "plink_friend_links")
box.find_element(By.PARTIAL_LINK_TEXT, "官方").click()

📋 本节练习清单

• ✅ 练习目标 1：新闻列表（6 条，模糊匹配） — 用「Selenium」「入门」「实战」等关键词定位并点击对应新闻链接：By.PARTIAL_LINK_TEXT, "Selenium" 可定位 1/2/5；"入门" 可定位 1/4；"实战" 可定位 3/6
• ✅ 练习目标 2：文档下载（6 条，模糊匹配） — 「下载」可定位 6 条；「驱动」可定位 1/3/5；「PDF」可定位 2/4/6。点击下载链接后效果区记录
• ✅ 练习目标 3：友情链接 + 综合搜索 — 友情链接用「官方」「社区」「博客」「文档」唯一定位；下方综合搜索框模拟 find_elements(By.PARTIAL_LINK_TEXT, "关键词")，输入后点击执行查看匹配结果

📌 方法概念
原理：在 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：购物商城 — 依次定位分类侧边栏筛选商品 → 加入购物车 → 立即结算（计算小计/运费/满减）→ 去支付（模拟付款）

📌 方法概念
原理：CSS 选择器是浏览器渲染页面时原生使用的定位语法，通过元素的标签、属性、class/id、层级关系等组合来定位；浏览器底层直接解析，比 XPath 更简洁、执行速度更快。
适用场景：
① class 有特征（判断标准：用这个 class 当选择器，能不能精准定位到你想要的元素 —— 不是一堆，也不是零个）：
    ✅ 好 class（有特征）：.login-btn 只能定位登录按钮这 1 个；.danger-btn 只能定位"删除 / 清空"这组危险操作按钮 —— 拿得准。
    ❌ 差 class（没特征）：.btn 页面上所有 30 个按钮都有 —— 定位多个元素，分不清谁是谁。
    定位精准 → 有特征；定位多了或少了 → 没特征。
    多 class 组合可以让它变精准：.nav-item.active（同时满足两个 class）比单独用 .nav-item（一堆）或 .active（可能别处也有）都更准。
② 属性前缀/后缀/子串：id 是 css_btn_login_1 这种动态数字 → [id^='css_btn_login'] 前缀匹配；
    href 都是 .html 结尾 → a[href$='.html'] 后缀匹配；class 含 btn 子串 → [class*='btn'] 子串匹配；
③ 按位置取：6 个任务项取奇数位 → #task_list li:nth-child(odd)；取第 3 个 → li:nth-child(3)；
④ 状态筛选：勾选了通知的复选框 → input[name='notify']:checked；置灰禁用的按钮 → button:disabled；
⑤ 层级/组合：找某个容器内的按钮 → #sidebar .menu-item（后代），.card > .title（直接子级），.label + .input（紧邻下一个兄弟）。
注意事项：不支持 text() 文本内容匹配，不支持 parent:: 向上父级轴定位，索引从 1 开始（与 XPath 一致但不同于 JS 的 0 基）。

💻 Selenium 示例（Python）

from selenium import webdriver
from selenium.webdriver.common.by import By
form = driver.find_element(By.CSS_SELECTOR, "#sec-by-css .register-form")  # 组合定位：id + class + 后代
even_tasks = driver.find_elements(By.CSS_SELECTOR, "#css_task_list li:nth-child(even)")  # 偶数位任务
notify_checks = driver.find_elements(By.CSS_SELECTOR, "#sec-by-css input[name='css_notify']:checked")  # 已勾选通知

📋 本节练习清单

• ✅ 练习目标 1：个人设置表单 — 填写昵称/年龄/签名 → 勾选/取消通知复选框（练习 :checked）→ 点标签切换 .active → 点「保存设置」观察效果区输出；再点「重置设置」验证默认值恢复（:checked 只剩系统公告、标签只剩自动化测试）
• ✅ 练习目标 2：任务清单 6 条 — 点击 li 切换完成态（出现 .done 类 + 删除线）；练习 :nth-child(odd) 取奇数位、li[data-priority='urgent'] 取紧急项、.done 取已完成项；最后打开浏览器 F12 控制台，输入 $$('.css-tag.active').length 回车，对比 Selenium 脚本里 len(driver.find_elements(By.CSS_SELECTOR, ".css-tag.active")) 的值是否一致（底层都是 querySelectorAll，应该完全相同）

📖 方法概念 JavaScript 直接使用浏览器内置 API 定位，绕过 Selenium 的 By 机制，适合处理复杂 DOM、动态渲染内容或需要批量操作的场景。

💻 Selenium 示例

# getElementById — 最快速，返回单个元素
element = driver.execute_script(
    "return document.getElementById('js-username')")

# getElementsByName — 返回 NodeList
elements = driver.execute_script(
    "return document.getElementsByName('js-skill')")

# getElementsByClassName — 返回 HTMLCollection
elements = driver.execute_script(
    "return document.getElementsByClassName('js-card')")

# getElementsByTagName — 返回 HTMLCollection
elements = driver.execute_script(
    "return document.getElementsByTagName('input')")

# querySelector / querySelectorAll — CSS 选择器
element = driver.execute_script(
    "return document.querySelector('.js-card.active')")
elements = driver.execute_script(
    "return document.querySelectorAll('.js-card')")

# 直接执行操作（无需 find_element）
driver.execute_script(
    "document.getElementById('js-btn').click()")

📋 本节练习清单

• ✅ 练习目标 1：getElementById 表单定位 — 首先定位并输入用户名 document.getElementById('js-username').value；接着定位并输入邮箱/密码/手机；继续定位并勾选协议复选框 document.getElementById('js-agree').checked = true ；然后定位并点击「读取当前表单」，观察效果区 — 每个字段都对应一行 getElementById 返回值；最后提交
• ✅ 练习目标 2：getElementsByName / ByClassName / ByTagName 批量获取 — ① 技能选择（name="js-skill" 批量勾选并读 value）; ② 课程卡片（.js-course-card 批量获取读 data-level）; ③ 数据统计（TAG_NAME('td') 批量遍历计算）
• ✅ 练习目标 3：querySelector 精确选择 — 用 querySelector('#js-card-container .js-card:nth-child(3)') 选取第 3 张商品卡片；点击切换 .active 高亮态
• ✅ 练习目标 4：querySelectorAll 批量 + data 属性 — querySelectorAll('#js-tag-cloud .js-tag') 获取所有标签，遍历读取 data-category 统计各类别数量