元素定位综合练习平台

练习 Selenium 8 种常规定位方法 + JavaScript 执行器定位技巧

练习说明

本页面提供了丰富的元素场景，用于练习 Selenium 8 种常规定位方法（ID、NAME、CLASS_NAME、TAG_NAME、LINK_TEXT、PARTIAL_LINK_TEXT、XPATH、CSS_SELECTOR）以及通过 execute_script 调用原生 document.* API 的 JavaScript 定位方式。

点击下方卡片可快速跳转到对应方法模块进行专项练习，或在本页按顺序逐个练习。

方法 1：By.ID — 通过 id 属性定位

利用元素全局唯一的 id 属性直接定位，是最稳定的定位方式之一。

练习目标1：点击下面三个按钮

练习目标2：在搜索框输入关键词并点击搜索按钮

请在下方输入框输入任意关键词后点击「搜索」按钮，下方会显示搜索的关键词。

搜索关键词

定位后操作效果展示区域

本区域用于展示：使用 Selenium / JS 定位到上方元素后，执行「点击 / 输入 / 提交」等操作的真实反馈结果。

当前尚无操作记录

请尝试：① 点击上方 3 个按钮 ② 在搜索框输入关键词后点击搜索按钮。

方法 2：By.NAME — 通过 name 属性定位

name 常用于表单字段（radio / checkbox / input / select），是操作表单的首选。

练习目标：填写表单 + 选择性别 + 同意条款

姓名

邮箱

性别

男女保密

我已阅读并同意「用户服务条款」

定位后操作效果展示区域

本区域用于展示：使用 By.NAME 定位到上方表单元素后，执行「输入 / 选单选 / 勾选 / 提交」等操作的真实反馈结果。

当前尚无操作记录

请尝试：① 填写「姓名 / 邮箱」输入框 ② 选择「性别」单选 ③ 勾选「同意条款」复选框 ④ 点击「提交信息」按钮。

方法 3：By.CLASS_NAME — 通过 class 定位

CLASS_NAME 只接受单个 class 名（不能包含空格），通常用于获取一组同类元素。

练习目标 1：读取所有标签卡片的文字

自动化测试 Selenium Appium Playwright Pytest

练习目标 2：获取所有用户卡片的姓名和职位

李小华

测试工程师

王大伟

开发工程师

赵敏

产品经理

定位后操作效果展示区域

本区域用于展示：使用 By.CLASS_NAME 定位到上方 tag-box / avatar-name 等组元素后，执行读取 / 点击等操作反馈。

当前尚无操作记录

请尝试：① 点击上方任意「技术标签」卡片 ② 点击任意「用户头像」卡片 ③ 读取卡片内的姓名与职位。

方法 4：By.TAG_NAME — 通过标签名定位

TAG_NAME 返回所有同名标签，适合遍历表格 tr/td、图片列表 img、超链接 a 等。

练习目标 1：统计页面所有图片并读取 alt 属性

练习目标 2：读取学生表格的每一行数据

学号	姓名	年龄	班级
A001	张三	20	软件1班
A002	李四	21	软件2班
A003	王五	19	计科1班
A004	赵六	22	计科2班

定位后操作效果展示区域

本区域用于展示：使用 By.TAG_NAME（img / tr / td 等）定位到一组标签后，执行批量读取 / 点击 / 统计等操作的反馈。

当前尚无操作记录

请尝试：① 点击上方任意风景图片（查看 alt） ② 点击学生表格任意行（查看该行内容） ③ 统计表格里的总条数。

方法 5：By.LINK_TEXT — 通过完整链接文本定位

LINK_TEXT 必须完全匹配超链接可见文字（区分大小写），常用于导航跳转。

练习目标：点击下面所有链接（记录点击日志）

自动化测试官方文档 Selenium 中文学习中心 Appium 移动自动化 Pytest 单元测试最佳实践

定位后操作效果展示区域

本区域用于展示：使用 By.LINK_TEXT（链接完整文本精确匹配）点击超链接后，记录具体点击到的链接与跳转目标。

当前尚无操作记录

请尝试：① 点击上方任意链接（精确完整匹配文本） ② 多次点击后观察展示区按顺序追加记录。

方法 6：By.PARTIAL_LINK_TEXT — 通过部分链接文本定位

当链接文本很长或含有动态前缀/后缀时，可使用 PARTIAL_LINK_TEXT 通过子串匹配。

练习目标：使用关键字匹配点击链接（如"入门"、"下载"）

2026年最新版Selenium快速入门指南（PDF下载） Playwright自动化测试零基础入门实战教程 Python驱动Chrome浏览器最新驱动镜像下载中心接口自动化测试项目实战训练营报名入口

定位后操作效果展示区域

本区域用于展示：使用 By.PARTIAL_LINK_TEXT（链接文本子串模糊匹配）点击超链接后，记录匹配命中的目标链接与关键字。

当前尚无操作记录

请尝试：① 用关键词「入门」「下载」「报名」模糊匹配上方链接并点击 ② 观察每次命中的是第几条链接。

方法 7：By.XPATH — 通过 XPath 表达式定位

最强大通用的定位方法，支持相对路径、属性、文本、父子兄弟轴等，适用于 99% 场景。

练习目标1：填写用户资料表单

登录账号

登录密码

所属城市

练习目标2：操作按钮组（多条件组合定位练习）

练习目标3：订单表（按行内容 + 轴定位练习）

订单号	商品	金额	状态
1001	机械键盘	¥399	已付款
1002	4K显示器	¥1899	待发货
1003	无线鼠标	¥129	已完成
1004	笔记本支架	¥89	已退款

定位后操作效果展示区域

本区域用于展示：使用 By.XPATH（属性组合 / 文本匹配 / 轴定位 / 索引）定位到目标元素后，执行表单 / 按钮 / 表格行操作的反馈。

当前尚无操作记录

请尝试：① 填写「账号 / 密码 / 城市」 ② 点击「保存 / 预览 / 删除 / 导出」按钮组 ③ 点击「订单表」中的「详情 / 取消」按钮。

方法 8：By.CSS_SELECTOR — 通过 CSS 选择器定位

比 XPath 更简洁、执行更快的现代定位方式，支持组合符、伪类、属性匹配等，但不支持文本匹配和向上找父元素。

练习目标：用 CSS 选择器操作下面的面板

昵称

个性签名

兴趣标签（按顺序点选 3 个）

接收通知开关

短信通知邮件通知 APP推送微信通知

定位后操作效果展示区域

本区域用于展示：使用 By.CSS_SELECTOR（#id / .class / [attr] 等）定位目标元素后，执行「设置昵称 / 切换兴趣标签 / 勾选通知 / 保存或取消」操作反馈。

当前尚无操作记录

请尝试：① 输入「昵称 / 个性签名」 ② 依次点选 3 个兴趣标签 ③ 勾选「短信 / 邮件 / APP推送 / 微信」通知 ④ 点击「保存设置」或「取消修改」。

方法 9：JavaScript 执行器定位（execute_script）

当 Selenium 常规 8 大定位受 shadow DOM / 滚动覆盖 / 禁用态等影响时，可调用浏览器原生 JS 接口。

练习目标 1：`getElementById` — 绕过前端限制写入禁用 / 只读输入框

下方两个输入框，一个加了 disabled="disabled"（灰色禁用态），另一个加了 readonly="readonly"（只读态）。常规 By.ID + send_keys() 会直接报错 ElementNotInteractableException，必须通过 execute_script() 调用 document.getElementById() 先移除属性，再 .value = "..." 强制写入。

禁用输入框（disabled）

只读输入框（readonly）

练习目标 2：`getElementsByName` — 读取 / 修改 type=hidden 的表单字段

页面中经常存在 <input type="hidden" name="csrf_token" /> 等隐藏字段，用于防 CSRF 或跨页传参。 Selenium 中 By.NAME / By.CSS_SELECTOR + get_attribute('value') 虽然能读，但 send_keys() 对 hidden 元素会报 ElementNotVisibleException，必须通过 document.getElementsByName() 取下标 [0] 再 .value = "..." 强制赋值。

隐藏字段当前值：

                                    name="js_csrf_token" → value = csrf-init-0000

                                    name="js_trace_id" → value = trace-init-0000

练习目标 3：`getElementsByClassName` — 批量修改一批无法直接选中的自定义组件

下方有 6 个"自定义徽章组件"（class="js-badge-pill"），它们用了特殊的自定义标签（非 button / input / a）， Selenium 中 By.CLASS_NAME 只能 find_elements 读取文字，无法批量切换状态；而 document.getElementsByClassName() 返回 HTMLCollection，可 for 循环批量 .classList.toggle() 或 .dataset.xxx = "..."。

初级徽章中级徽章高级徽章专家徽章大师徽章传说徽章

当前 6 个徽章均为 未激活 状态。

练习目标 4：`getElementsByTagName` — 统计 / 操作 SVG / 自定义标签（非标准 HTML）

下方是一个 SVG 条形图（使用 <svg> / <rect> / <text> 等 SVG 标签）。 Selenium 中 By.TAG_NAME('rect') 对 SVG 命名空间常常取不到或 get_attribute 丢失，必须通过 document.getElementsByTagName() 原生 SVG DOM 才能准确读取高度、宽度、y 坐标等属性。

                                📊 SVG 条形图

                                尚未读取，点击左侧按钮查看 SVG 标签数据。

练习目标 5：`querySelector` — CSS 伪类 / 组合选择器定位（`:checked / :disabled / + 兄弟`）

Selenium 的 By.CSS_SELECTOR 对 :checked、:disabled、+、~ 等高级伪类 / 组合符 有时会因浏览器驱动版本差异导致匹配不准，而 document.querySelector() 使用浏览器原生 CSS 引擎，100% 还原 CSS 规则。另外「嵌套在 shadow-root 里的元素」也只能用 JS 穿透。

场景A：:checked 伪类

⚙️ 系统偏好

自动更新消息通知每日摘要

🔔 通知设置

邮件通知短信通知推送通知

场景B：label + input 兄弟

🎫 优惠券码：

📧 订阅邮箱：

📱 联系手机：

场景C：:disabled 伪类

已禁用按钮 / 灰态禁用按钮

已解锁 0 个 disabled 按钮

尚未点击按钮

三个按钮的设计目的（每行对应左侧同名按钮）：

① 可点击按钮：对照组（不加 disabled），用于对比"正常按钮"和"禁用按钮"的视觉与交互差异。

② 已禁用按钮：典型 disabled 场景（绿色渐变 + disabled），Selenium 中 is_enabled() == False。

③ 灰态禁用按钮：灰色渐变 + disabled，测试"不同色系按钮被禁用时，CSS :disabled 能否跨颜色准确匹配"。不通过“判断是否灰色”来断言禁用状态。

场景D：Shadow DOM 穿透

设计目的：

现代前端（Vue / React / Angular 组件库、浏览器原生 Web Components）常把 DOM 封装进 Shadow Tree，Selenium 的 By.* 和普通 document.querySelector 都无法直接穿透。

必须先取到 宿主元素 → 读它的 .shadowRoot → 再在 shadowRoot 上调用 querySelector。

提示：右键宿主 → 检查，Elements 面板中灰色 #shadow-root 节点内的元素即属此场景。

练习目标 6：`querySelectorAll` — 批量遍历 + 复杂 CSS 筛选（`:nth-child / :not / [attr^=]`）

下方是一张混合状态的任务列表。Selenium 中 组合多个 CSS 伪类（如 :nth-child(even) + :not(.done)）后 find_elements 常因浏览器差异匹配不到； document.querySelectorAll() 可直接写完整 CSS 表达式，返回静态 NodeList，再 .forEach() 批量操作。

#1编写 Selenium 用例框架自动化
#2整理元素定位器设计稿文档
#3阅读 XPath 轴定位文档学习
#4调试第 3 模块滚动条练习自动化
#5编写 JS 执行器测试用例自动化
#6补充 CSS 伪类测试场景文档
#7学习 Playwright 与 Selenium 差异学习
#8输出：元素定位最佳实践 PDF文档

点击下方按钮查看任务筛选 / 批量操作结果。

定位后操作效果展示区域

本区域用于展示：使用 execute_script()（JS 执行器）调用原生 DOM API 查询 / 操作元素后，返回的查询结果或触发动作的反馈。

当前尚无操作记录

请尝试：点击下方 6 个练习目标的各操作按钮（getElementById 解除禁用 / getElementsByName 改隐藏字段 / getElementsByClassName 批量激活徽章 / getElementsByTagName 读 SVG / querySelector 解锁按钮 / querySelectorAll 批量标记任务）。

操作日志（点击/输入后记录在此）

本日志仅展示效果，方便你在 Selenium 脚本里用 By.ID, "action-log" 读取后断言操作是否成功执行。

[等待操作] 暂无任何交互，欢迎开始练习……

练习说明

方法 1：By.ID — 通过 id 属性定位

练习目标1：点击下面三个按钮

练习目标2：在搜索框输入关键词并点击搜索按钮

定位后操作效果展示区域

方法 2：By.NAME — 通过 name 属性定位

练习目标：填写表单 + 选择性别 + 同意条款

定位后操作效果展示区域

方法 3：By.CLASS_NAME — 通过 class 定位

练习目标 1：读取所有标签卡片的文字

练习目标 2：获取所有用户卡片的姓名和职位

定位后操作效果展示区域

方法 4：By.TAG_NAME — 通过标签名定位

练习目标 1：统计页面所有图片并读取 alt 属性

练习目标 2：读取学生表格的每一行数据

定位后操作效果展示区域

方法 5：By.LINK_TEXT — 通过完整链接文本定位

练习目标：点击下面所有链接（记录点击日志）

定位后操作效果展示区域

方法 6：By.PARTIAL_LINK_TEXT — 通过部分链接文本定位

练习目标：使用关键字匹配点击链接（如"入门"、"下载"）

定位后操作效果展示区域

方法 7：By.XPATH — 通过 XPath 表达式定位

练习目标1：填写用户资料表单

练习目标2：操作按钮组（多条件组合定位练习）

练习目标3：订单表（按行内容 + 轴定位练习）

定位后操作效果展示区域

方法 8：By.CSS_SELECTOR — 通过 CSS 选择器定位

练习目标：用 CSS 选择器操作下面的面板

定位后操作效果展示区域

方法 9：JavaScript 执行器定位（execute_script）

练习目标 1：getElementById — 绕过前端限制写入禁用 / 只读输入框

练习目标 2：getElementsByName — 读取 / 修改 type=hidden 的表单字段

练习目标 3：getElementsByClassName — 批量修改一批无法直接选中的自定义组件

练习目标 4：getElementsByTagName — 统计 / 操作 SVG / 自定义标签（非标准 HTML）

练习目标 5：querySelector — CSS 伪类 / 组合选择器定位（:checked / :disabled / + 兄弟）

练习目标 6：querySelectorAll — 批量遍历 + 复杂 CSS 筛选（:nth-child / :not / [attr^=]）

定位后操作效果展示区域

操作日志（点击/输入后记录在此）

练习目标 1：`getElementById` — 绕过前端限制写入禁用 / 只读输入框

练习目标 2：`getElementsByName` — 读取 / 修改 type=hidden 的表单字段

练习目标 3：`getElementsByClassName` — 批量修改一批无法直接选中的自定义组件

练习目标 4：`getElementsByTagName` — 统计 / 操作 SVG / 自定义标签（非标准 HTML）

练习目标 5：`querySelector` — CSS 伪类 / 组合选择器定位（`:checked / :disabled / + 兄弟`）

练习目标 6：`querySelectorAll` — 批量遍历 + 复杂 CSS 筛选（`:nth-child / :not / [attr^=]`）