元素定位练习 · JavaScript

方法 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 批量标记任务）。

元素定位练习 · JavaScript 定位

作业说明

方法 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^=]`）

定位后操作效果展示区域

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

作业说明

方法 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^=]`）