Practice JS Locator

方法 9：JavaScript — 通过 JavaScript 定位元素

使用 document.getElementById()、document.getElementsByName()、document.getElementsByClassName()、document.getElementsByTagName()、document.querySelector()、document.querySelectorAll() 等浏览器原生 JS API 定位元素；在 Selenium 中通过 driver.execute_script() 执行 JS 代码。

练习要求 · 方法 9：JavaScript 定位

📖 方法概念 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 统计各类别数量

练习目标 1：JS 表单（getElementById 定位 id="js-*" 系列元素）

操作步骤：
① 定位用户名并输入 → document.getElementById('js-username').value = 'admin'
② 定位邮箱/密码/手机并输入 → document.getElementById('js-email').value = 'admin@test.com'
③ 定位并勾选「同意协议」→ document.getElementById('js-agree').checked = true
④ 定位并点击「读取当前表单」，观察效果区 — 每个字段都对应一行 getElementById(id).value 或 .checked 的返回值
⑤ 定位并点击提交按钮，对比 document.getElementById('js-btn-submit').click() 与浏览器原生点击是否一致

JavaScript 定位练习表单

全部字段用 getElementById('js-*') 定位 — Selenium 里用 execute_script("return document.getElementById('...')")

用户名（id="js-username"）

邮箱（id="js-email"）

密码（id="js-password"）

手机（id="js-phone"）

我已阅读并同意用户协议（id="js-agree"）

练习目标 2：DOM 快捷批量定位（3 种 getElements 方法对比）

操作步骤：
① getElementsByName → document.getElementsByName('js-skill') 获取 5 个同名 checkbox，遍历勾选并读 value
② getElementsByClassName → document.getElementsByClassName('js-course-card') 获取 6 张课程卡片，读取 data-level
③ getElementsByTagName → document.querySelectorAll('#js-stats-table td') 批量遍历计算总数

① getElementsByName — 批量获取同名元素（技能选择）

5 个技能复选框共享 name="js-skill"，使用 document.getElementsByName('js-skill') 获取所有技能，遍历勾选并读取 value。

Python Selenium Pytest Appium JMeter

② getElementsByClassName — 按类名批量获取（课程卡片）

6 张课程卡片共享 CSS 类 .js-course-card，使用 document.getElementsByClassName('js-course-card') 获取所有卡片，读取 data-level 属性。

📘

Selenium 入门

level=入门

📗

Pytest 进阶

level=进阶

📕

自动化架构

level=高级

📙

Python 基础

level=入门

📓

接口测试

level=进阶

📔

性能测试

level=高级

③ getElementsByTagName — 按标签名获取（成绩统计表）

成绩表中每行每列都是 td 标签，使用 document.getElementsByTagName('td') 获取所有单元格，遍历读取内容并统计。

学号	姓名	Python	Selenium	Pytest
2026001	张三	92	88	95
2026002	李四	85	91	87
2026003	王五	78	82	90
2026004	赵六	96	94	89

三种 getElements 方法对比：

方法	参数	返回类型	适用场景
`getElementsByName`	name 属性值	NodeList(动态)	同名 checkbox/radio 组
`getElementsByClassName`	CSS 类名	HTMLCollection(动态)	同类型卡片/标签批量
`getElementsByTagName`	HTML 标签名	HTMLCollection(动态)	表格/列表/链接统计

练习目标 3：商品卡片（querySelector + 伪类选择器）

操作步骤：
① 用 querySelector 精确选第 3 张卡片 → document.querySelector('#js-card-container .js-card:nth-child(3)')
② 点击卡片切换 .active 高亮态 → card.classList.toggle('active')

🖱️

无线鼠标

¥89

⌨️

机械键盘

¥399

🖥️

4K显示器

¥2499

🔌

USB-C 扩展坞

¥299

🎧

降噪耳机

¥1299

练习目标 4：技术标签云（querySelectorAll 批量获取 + 遍历）

操作步骤：
① 批量获取所有标签 → document.querySelectorAll('#js-tag-cloud .js-tag')
② 遍历读取 data 属性 → tag.dataset.category（注意 Selenium 里用 get_attribute('data-category')）
③ 统计各类别数量并输出

JavaScript 定位效果展示

当前尚无操作记录

请尝试：① 填写表单→勾选→提交 ② 点击商品卡片 ③ 点击标签 ④ 统计按钮 ⑤ 技能/课程/表格练习

元素定位练习 · JavaScript 定位

练习说明