元素定位教学 · 属性 / 标签 / 链接 / XPath / CSS

By.ID

① ID 属性定位

通过元素的 id 属性定位（唯一且稳定，优先使用）

定位语法：
单个元素 (find_element)
driver.find_element(By.ID, "user_account")（匹配第一个ID属性为user_account的元素）
driver.find_element(By.ID, "btn_id_submit")（匹配第一个ID属性为btn_id_submit的元素）
多个元素 (find_elements)
driver.find_elements(By.ID, "repeated_field")（理论上 ID 应唯一，不建议）
特点：id 在整个 HTML 页面中必须唯一，是最稳定、执行最快的定位方式，优先使用 find_element。

实操练习：By.ID → 查看 Selenium 代码与执行结果

账号（id="user_account"）

密码（id="user_password"）

邮箱（id="user_email"）

年龄（id="user_age"）

定位后操作效果展示区域

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

By.NAME

② Name 属性定位

通过元素的 name 属性定位（常用于表单元素）

定位语法：
单个元素 (find_element)
driver.find_element(By.NAME, "login_name")（匹配第一个name属性为login_name的元素）
driver.find_element(By.NAME, "csrf_token")（匹配第一个name属性为csrf_token的元素）
多个元素 (find_elements)
driver.find_elements(By.NAME, "hobby")（获取所有name属性为hobby的元素）
特点：name 属性常用于表单提交，一个页面中可能有多个同名元素，此时需用 find_elements 返回列表。

实操练习：By.NAME → 查看 Selenium 代码与执行结果

用户名（name="login_name"）

登录密码（name="login_pass"）

搜索关键词（name="search_keyword"）

城市（name="city_name"）

兴趣爱好（name="hobby"，可多选）：

阅读音乐运动旅游编程

定位后操作效果展示区域

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

By.CLASS_NAME

③ Class 属性定位

通过 class 属性定位（一组元素通常共用同一 class）

定位语法：
单个元素 (find_element)
driver.find_element(By.CLASS_NAME, "card-item")（匹配第一个class属性为card-item的元素）
driver.find_element(By.CLASS_NAME, "primary-btn")（匹配第一个class属性为primary-btn的元素）
多个元素 (find_elements)
driver.find_elements(By.CLASS_NAME, "card-item")（获取所有class属性为card-item的元素）
driver.find_elements(By.CLASS_NAME, "badge")（获取所有class属性为badge的元素）
注意：CLASS_NAME 只能传单个 class 名称，不能有空格。多 class 元素需用 CSS_SELECTOR。

实操练习：By.CLASS_NAME → 查看 Selenium 代码与执行结果

练习区以下元素带有 demo- 前缀 class，与下方 demo-box 的 card-item / input-text / action-btn 完全隔离。

Python 入门

class=demo-item-card

Web 自动化

class=demo-item-card

接口测试

class=demo-item-card

Python 入门

class="card-item"

Web 自动化

class="card-item"

接口测试

class="card-item"

性能测试

class="card-item"

输入框A（class="input-text"）

输入框B（class="input-text"）

输入框C（class="input-text special"）

备注（class="input-text remark-input"）

定位方式	适用场景	优点	注意事项
By.ID	元素具有唯一 id	最快最稳定，优先使用	id 必须唯一，动态 id 不适用
By.NAME	表单元素有 name 属性	常用于输入框/单选/复选	可能不唯一，需 find_elements
By.CLASS_NAME	一组相同样式的元素	批量定位同类元素方便	只能传单个 class，不能有空格

定位后操作效果展示区域

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

By.TAG_NAME

④ 标签名定位

通过 HTML 标签名定位（通常返回多个元素）

定位语法：
单个元素 (find_element)
driver.find_element(By.TAG_NAME, "h1")（匹配第一个h1标签元素）
driver.find_element(By.TAG_NAME, "title")（匹配第一个title标签元素）
多个元素 (find_elements)
driver.find_elements(By.TAG_NAME, "a")（获取所有a标签元素）
driver.find_elements(By.TAG_NAME, "input")（获取所有input标签元素）
driver.find_elements(By.TAG_NAME, "li")（获取所有li标签元素）
特点：标签名定位常用于批量获取同类元素，绝大多数场景配合 find_elements 使用。

实操练习：By.TAG_NAME → 查看 Selenium 代码与执行结果

By.TAG_NAME 练习小卡

这是练习区第一段 p 元素。

这是练习区第二段 p 元素。

李白杜甫王维

元素定位 li
元素操作 li
元素等待 li
报告生成 li

标题标签（h1~h6）

H1 - 一级标题

H2 - 二级标题

H3 - 三级标题

段落标签（p）

段落 1：第一个 p 标签，可用 find_element 定位或者用 find_elements 获取列表加上索引 0 定位。

段落 2：第二个 p 标签，可用 find_elements 获取列表加上索引 1 定位。

段落 3：第三个 p 标签，可用 find_elements 获取列表加上索引 2 定位。

列表标签（ul/ol/li）

无序列表项 A - 第 1 个 li
无序列表项 B - 第 2 个 li
无序列表项 C - 第 3 个 li

有序列表项 ①
有序列表项 ②
有序列表项 ③

图片标签（img）

表格标签（table/tr/td/th）

序号	课程名称	标签名	说明
1	Selenium 基础	tr / td	表格行与单元格
2	元素定位	tr / td	用 XPath 定位表格
3	元素操作	tr / td	表格操作场景

标签定位使用提示

返回多个：同一标签名往往对应多个元素，优先使用 find_elements() 返回列表。
组合使用：先通过 ID/class 定位父元素，再在父元素下通过 tag_name 定位会更精确。
常见场景：获取所有链接 a、所有输入框 input、所有按钮 button。

定位后操作效果展示区域

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

By.LINK_TEXT

⑤ 链接文本定位

超链接文本完全匹配（精准定位）

定位语法：
单个元素 (find_element)
driver.find_element(By.LINK_TEXT, "返回首页")（匹配第一个"返回首页"链接）
driver.find_element(By.LINK_TEXT, "Selenium 官方文档")（匹配第一个"Selenium 官方文档"链接）
多个元素 (find_elements)
driver.find_elements(By.LINK_TEXT, "点击查看")（获取所有"点击查看"链接元素）
特点：完全匹配链接文本，文本必须完全一致。只适用于 <a> 标签。

实操练习：By.LINK_TEXT → 查看 Selenium 代码与执行结果

关于我们产品中心联系我们

环境搭建用户登录用户注册属性定位演示 Selenium 官方文档鼠标操作演示

定位后操作效果展示区域

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

By.PARTIAL_LINK_TEXT

⑥ 部分链接文本定位

链接文本模糊匹配（包含关键字即可）

定位语法：
单个元素 (find_element)
driver.find_element(By.PARTIAL_LINK_TEXT, "关于")（匹配第一个包含"关于"的链接）
driver.find_element(By.PARTIAL_LINK_TEXT, "教程")（匹配第一个包含"教程"的链接）
多个元素 (find_elements)
driver.find_elements(By.PARTIAL_LINK_TEXT, "帮助")（获取所有含"帮助"的链接元素）
driver.find_elements(By.PARTIAL_LINK_TEXT, "文档")（获取所有含"文档"的链接元素）
特点：模糊匹配更灵活，链接文本部分匹配即可。当链接文本较长或动态变化时推荐使用。

实操练习：By.PARTIAL_LINK_TEXT → 查看 Selenium 代码与执行结果

使用指南帮助中心常见问题

下方导航栏包含多个链接，使用 PARTIAL_LINK_TEXT 可模糊匹配：

关于我们公司简介联系我们加入我们使用帮助隐私政策服务条款新闻动态

教程类链接（用"教程"可匹配全部）：

Python 编程入门教程 Selenium 自动化测试教程 Appium 移动端自动化教程接口自动化测试实战教程

链接定位选择建议

LINK_TEXT：文本固定且较短时首选，完全匹配更精确。
PARTIAL_LINK_TEXT：文本较长或可能变化时使用，关键词匹配更灵活。
两种方式均只适用于 <a> 标签，其他标签需用 XPath 或 CSS。

定位后操作效果展示区域

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

By.XPATH

⑦ XPath 定位

XML 路径语言，支持路径/属性/文本/轴等复杂定位

XPath 定位语法：
单个元素 (find_element)
driver.find_element(By.XPATH, "/html/body/div[1]/header/h1")（绝对路径（从根节点开始））
driver.find_element(By.XPATH, "//input[2]")（元素索引，从 1 开始）
driver.find_element(By.XPATH, "//input[@id='userName']")（属性）
driver.find_element(By.XPATH, "//input[starts-with(@type,'pass')]") （模糊属性值）
driver.find_element(By.XPATH, "//div[contains(@class,'demo')]")（模糊属性值，包含属性匹配）
driver.find_element(By.XPATH, "//button[normalize-space()='提交表单']")（文本精确匹配）
driver.find_element(By.XPATH, "//div[@class='form-grid']/div[last()]")（函数条件匹配）
driver.find_element(By.XPATH, "//*[@name='email' and @type='text']")（逻辑运算符，多属性组合）
driver.find_element(By.XPATH, "//form[@id='xpathForm']/following-sibling::div/button")（轴定位）
多个元素 (find_elements)
driver.find_elements(By.XPATH, "/html/body/div[1]/header/h1")（绝对路径（从根节点开始））
driver.find_elements(By.XPATH, "//input[2]")（元素索引，从 1 开始）
driver.find_elements(By.XPATH, "//input[@id='userName']")（属性）
driver.find_elements(By.XPATH, "//input[starts-with(@type,'pass')]") （模糊属性值）
driver.find_elements(By.XPATH, "//div[contains(@class,'demo')]")（模糊属性值，包含属性匹配）
driver.find_elements(By.XPATH, "//button[normalize-space()='提交表单']")（文本精确匹配）
driver.find_elements(By.XPATH, "//div[@class='form-grid']/div[last()]")（函数条件匹配）
driver.find_elements(By.XPATH, "//*[@name='email' and @type='text']")（逻辑运算符，多属性组合）
driver.find_elements(By.XPATH, "//form[@id='xpathForm']/following-sibling::div/button")（轴定位）
特点：功能最强大，支持路径/属性/文本/轴等复杂定位，但语法较复杂、不同浏览器可能略有差异。

实操练习：By.XPATH → 查看 Selenium 代码与执行结果

练习表单：form#demoXpathForm（仅用于 loc-practice-area）

用户名（name="demo_uname"）

邮箱（name="demo_email"）

手机号（class="demo-mobile" name="demo_phone"）

密码（name="demo_user_pwd"）

第二文本框（第二个 type="text"：name="demo_second"）

验证码（name="demo_captcha"，placeholder 含「验证码」）

备注（textarea name="demo_remark"）

示例表单（id="xpathForm"）

用户名（id="userName"）

邮箱（name="email"，type="text"）

手机号（id="userPhone"，class="mobile-input"）

密码（type="password"，name="user_pwd"）

个人简介（textarea，name="remark"）

所在城市（select，name="city"）

验证码（placeholder="请输入验证码"）

XPath 实战技巧

优先使用 相对路径 //，不推荐用 /html/body/div... 绝对路径。
组合 @id/@name/@class/@type 等属性，多属性 and 更稳定。
文本匹配：text()='xxx' 或 contains(text(),'xxx')。
索引：(//...)[n]，XPath 下标从 1 开始。

定位后操作效果展示区域

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

By.CSS_SELECTOR

⑧ CSS 选择器定位

浏览器原生支持，语法简洁，通常比 XPath 更快

CSS 选择器定位语法：
单个元素 (find_element)
driver.find_element(By.CSS_SELECTOR, "html body div.container div.product-list div.product-card") （绝对路径）
driver.find_element(By.CSS_SELECTOR, "#userName") （id 选择器）
driver.find_elements(By.CSS_SELECTOR, ".product-card") （class 选择器）
driver.find_element(By.CSS_SELECTOR, "input[name='email']") （属性选择器）
driver.find_element(By.CSS_SELECTOR, "input[name]") （属性名称选择器）
driver.find_element(By.CSS_SELECTOR, "a[href*='selenium']") （部分属性值选择器）
driver.find_element(By.CSS_SELECTOR, "a") （标签名选择器）
driver.find_element(By.CSS_SELECTOR, ".product-card:nth-child(3)") （伪类选择器）
driver.find_element(By.CSS_SELECTOR, "div.product-list > div.product-card") （父子层级）
多个元素 (find_elements)
driver.find_elements(By.CSS_SELECTOR, "html body div.container div.product-list div.product-card") （绝对路径）
driver.find_elements(By.CSS_SELECTOR, "#userName") （id 选择器）
driver.find_elements(By.CSS_SELECTOR, ".product-card") （class 选择器）
driver.find_elements(By.CSS_SELECTOR, "input[name='email']") （属性选择器）
driver.find_elements(By.CSS_SELECTOR, "input[name]") （属性名称选择器）
driver.find_elements(By.CSS_SELECTOR, "a[href*='selenium']") （部分属性值选择器，href 以 https 开头）
driver.find_elements(By.CSS_SELECTOR, "a") （标签名选择器）
driver.find_elements(By.CSS_SELECTOR, ".product-card:nth-child(3)") （伪类选择器）
driver.find_elements(By.CSS_SELECTOR, "div.product-list > div.product-card") （父子层级）
特点：浏览器原生支持，语法简洁，定位速度通常比 XPath 更快。常用符号：^= 开头 $= 结尾 *= 包含。

实操练习：By.CSS_SELECTOR → 查看 Selenium 代码与执行结果

CSS 选择器练习商品卡 & 操作按钮（仅 loc-practice-area）

Selenium 速通

书籍类

¥199

测试开发架构师

精选 · 书籍类

¥499

Appium 移动端

商品卡片列表（CSS 选择器演示）

Python 自动化实战

Selenium + Pytest 全解

¥299

接口自动化高级篇

Requests + Allure 报告

¥399

性能测试 JMeter

从入门到压测实战

¥199

测试开发架构师

平台开发 + 持续集成

¥499

Appium 移动端测试

Android + iOS 双端

¥159

面试通关宝典

软件测试高频 300 题

¥99

CSS 选择器实战技巧

ID 选择器：#idValue，比 XPath 更简洁。
多 class：.product-card.featured 同时包含两个 class。
属性匹配：[attr='val'] 完全等于，[attr*='val'] 包含，[attr^='pre'] 开头。
层级关系：空格后代，> 直接子元素，+ 相邻兄弟。

定位后操作效果展示区域

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

driver.execute_script

⑨ JavaScript 定位

通过 execute_script 执行 JS，适合特殊场景与 Selenium 原生 API 无法覆盖的需求

JavaScript 定位语法：
通过 execute_script 执行 JS 定位
driver.execute_script("return document.getElementById('demo-js-username');") （getElementById）
driver.execute_script("return document.getElementsByName('demo-js-input')[0];") （getElementsByName）
driver.execute_script("return document.getElementsByClassName('demo-js-btn')[0];") （getElementsByClassName）
driver.execute_script("return document.getElementsByTagName('button')[0];") （getElementsByTagName）
driver.execute_script("return document.querySelector('.demo-js-card');") （querySelector）
driver.execute_script("return document.querySelectorAll('.demo-js-card');") （querySelectorAll）
特点：当 Selenium 原生定位方式受限时（如 Shadow DOM、iframe 嵌套、动态属性），可通过 execute_script 直接调用浏览器原生 JS API 定位元素。但可读性较差，调试不便。

实操练习：JavaScript 定位 → 查看 Selenium 代码与执行结果

JS 定位练习元素（仅 loc-practice-area）

JS 定位 — Selenium 脚本入门

工具类 · ¥299

JS 定位 — 自动化测试进阶

精选 · 书籍类 · ¥399

JS 定位 — 浏览器 DevTools

视频类 · ¥159

JS 定位练习提示条目（li）：

getElementById：返回单个元素（最快）
querySelector：CSS 选择器语法（返回首个）
querySelectorAll：CSS 选择器语法（返回 NodeList）
arguments[0]：向 execute_script 传参

JS 定位演示元素（execute_script 实战）

Selenium 脚本入门

JS 定位 — getElementById

¥299

测试开发架构师

JS 定位 — querySelector

¥499

DevTools 调试技巧

JS 定位 — getElementsByClassName

¥159

接口自动化进阶

JS 定位 — arguments 传参

¥399

JavaScript 定位实战技巧

getElementById：document.getElementById('id')，返回单个元素，速度最快。
querySelector：document.querySelector('.cls')，CSS 选择器语法，返回首个匹配。
querySelectorAll：document.querySelectorAll('.cls')，返回 NodeList，需 list() 转换。
arguments 传参：arguments[0]，向 execute_script 传递已定位的 WebElement。
直接修改属性：.value = '...'，绕过 send_keys 直接注入值。

定位后操作效果展示区域

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

综合对比

九种定位方式对比总结

一张表看懂所有定位方式的优缺点

定位方式	语法	适用场景	优点	缺点
By.ID	`By.ID`	元素有唯一 id	最快最稳定	id 必须唯一
By.NAME	`By.NAME`	表单元素	表单常用	可能不唯一
By.CLASS_NAME	`By.CLASS_NAME`	同类元素批量	批量定位方便	只能单个 class
By.TAG_NAME	`By.TAG_NAME`	按标签名获取	获取同类元素	过于宽泛
By.LINK_TEXT	`By.LINK_TEXT`	a 链接完整文本	精准匹配	仅 a 标签
By.PARTIAL_LINK_TEXT	`By.PARTIAL_LINK_TEXT`	a 链接部分文本	灵活模糊	仅 a 标签
By.XPATH	`By.XPATH`	任何复杂结构	功能最强大	语法稍复杂
By.CSS_SELECTOR	`By.CSS_SELECTOR`	任何元素	简洁快速	部分高级功能不支持
execute_script	`driver.execute_script`	特殊场景（Shadow DOM / iframe / 动态属性）	浏览器原生 API，灵活强大	可读性差，调试不便

元素定位教学 · 全方式详解

页面导读

① ID 属性定位

② Name 属性定位

③ Class 属性定位

④ 标签名定位

By.TAG_NAME 练习小卡

标题标签（h1~h6）

段落标签（p）

列表标签（ul/ol/li）

图片标签（img）

表格标签（table/tr/td/th）

标签定位使用提示

⑤ 链接文本定位

⑥ 部分链接文本定位

链接定位选择建议

⑦ XPath 定位

示例表单（id="xpathForm"）

XPath 实战技巧

⑧ CSS 选择器定位

商品卡片列表（CSS 选择器演示）

CSS 选择器实战技巧

⑨ JavaScript 定位

JS 定位演示元素（execute_script 实战）

JavaScript 定位实战技巧

九种定位方式对比总结