软件测试入门到精通-第10周-ui自动化测试-css层级选择器+模糊匹配
·
🎨 CSS层级选择器：像侦探一样精准定位元素
各位前端侦探们好！今天我们要破获的是一起"元素失踪案"——如何用CSS层级选择器在复杂的HTML结构中精准定位目标元素。准备好你的放大镜和思维导图，我们开始吧！
🔍 层级选择器家族档案
在CSS的世界里，我们有两位性格迥异的侦探：
| 成员 | 代号 | 办案风格 | 口头禅 | 适用案件 |
|---|---|---|---|---|
| 严格父亲 | > | 只查直接关系 | “必须是我亲生的！” | 简单直接的父子结构 |
| 包容祖先 | 空格 | 查遍整个家族树 | “只要是我家的都算！” | 复杂多层嵌套结构 |
举个栗子🌰：
<!-- 家族聚会现场 -->
<div class="family-reunion">
<ul id="grandpa">
<li>爷爷的直接孩子
<ul>
<li>这是孙子辈的</li>
</ul>
</li>
</ul>
</div>
- 严格父亲(
>):#grandpa > li只抓爷爷的直接孩子 - 包容祖先(
空格):.family-reunion li把全家老小一网打尽
🕵️♂️ 实战破案记录
案件1：表单迷宫探险
<form class="mystery-form">
<input type="text" placeholder="线索1">
<fieldset>
<input type="password" placeholder="重要密码">
<div class="red-herring">
<input type="text" placeholder("干扰项">
</div>
</fieldset>
</form>
侦探笔记：
/* 精准定位密码框 */
.mystery-form > fieldset > input[type="password"] {
border: 2px solid red; /* 重要证据标记 */
}
/* 排除干扰项 */
.mystery-form .red-herring input {
display: none; /* 这个假线索我们不要 */
}
案件2：导航栏秘密行动
<nav class="spy-network">
<ul class="level-1">
<li>特工A
<ul class="level-2">
<li>下线1</li>
<li>下线2</li>
</ul>
</li>
</ul>
</nav>
卧底代码：
/* 只策反一级特工 */
.spy-network > ul.level-1 > li {
color: red; /* 标记为内应 */
}
/* 不惊动下线成员 */
.spy-network li li {
background: transparent; /* 保持原样 */
}
🚨 常见办案失误
-
过度自信症：
/* 错误：以为所有按钮都是直接孩子 */ .dashboard > .btn /* 正确：考虑可能的多层嵌套 */ .dashboard .btn -
方向搞反症：
/* 错误：孙子想指挥爷爷 */ .content .article > .header /* 正确：从上往下查 */ .article > .header
- 选择器肥胖症：
/* 过度精确反而脆弱 */ body > div > main > section > div > p /* 适当放松更健壮 */ .content-section p
💡 侦探成长指南
-
必备工具：
- Chrome开发工具的Elements面板是你的"侦探手册"
- 用
Ctrl+F测试选择器就像使用指纹识别器
-
训练方法：
- 每天破解一个CSS Diner关卡
- 在CodePen上创建"犯罪现场"自己破案
-
晋升路径：
实习生：只会用标签选择器 👇 初级侦探：掌握class和id选择器 👇 资深侦探：精通层级选择器 👇 福尔摩斯：熟练使用:has()等新式武器
🎯 终极办案口诀
“大于号是亲爹，空格能找全家，
查案先从近处看，复杂结构慢慢扒。”
记住：好的CSS选择器就像精准的狙击枪，而不是散弹枪。下次当你面对一团乱麻的HTML结构时，深呼吸，拿出这些层级选择器工具，像侦探一样冷静分析，一定能找到完美路径！
案件结束，但侦探生涯永无止境！ 🕶️
🚀《CSS定位黑科技手册》—— 选择器玩出花的进阶指南
一、模糊匹配的魔法艺术 ✨
1. 通配符的奇妙用法
- 符号解密：
*=不是乘法运算，而是"包含"关系的秘密代号 - 实战咒语：
# 当placeholder像火锅里的配菜一样混着中英文时： driver.find_element_by_css_selector("[placeholder*='⽤']").click()
2. 适用场景大公开
- 变装达人元素：像百变马丁一样的动态ID（今天叫
layer-123明天变layer-456） - 话痨型属性：placeholder比毕业论文还长的输入框
- 版本号狂魔：
btn-v2.3.1-alpha.rc1这种类名（开发者是有多爱升级？）
3. CSS vs XPath 世纪对决
| 对比项 | CSS选手 | XPath选手 | 解说点评 |
|---|---|---|---|
| 语法 | 像发短信一样简单 | 像写政府公文一样正式 | CSS新人友好度+1分 |
| 速度 | 原生支持的跑车 | 需要翻译器的电动车 | 关键业务CSS胜出 |
| 灵活性 | 直球选手 | 诡计多端 | XPath后招更多 |
二、组合拳定位大法 🥋
1. 多重条件锁定
- 基本套路：
标签[身份证][手机号]（像查户口一样严格） - 缩写黑话：
#ID≡[id='ID']（像007的代号）.class≠[class='class']（注意这是个美丽的误会）
2. 真实案例拆解
/* 案例1：给元素办个身份证 */
#user007[name='詹姆斯·邦德']
/* 案例2：双因素认证 */
input[type='密码'][name='保险箱']
3. 为什么这很酷
- 精准如狙击：再也不用担心找到一堆双胞胎元素
- 健壮如犀牛：某个属性变了？还有其他属性顶着！
- 万能适配：从祖传jQuery到时髦React通吃
三、驯服动态元素的野性 🦁
1. 对付变色龙ID
- 狩猎技巧：
[id*='固定特征']（记住它身上的胎记） - 经典场景：
[id*='千层饼-iframe'] /* 匹配所有千层饼式的弹窗 */
2. 电商实战套路
- 购物车把戏：
div[class*='买买买-弹窗'] - 进度条魔术：
li[class*='第几步'] - 轮播图戏法：
div[id*='无限循环广告']
3. 黄金三原则
- 抓大放小：逮住元素身上最稳定的特征
- 家族连坐：顺便记住它家住在哪
- 多方印证：至少记住它的三个特征点
四、技术选型修罗场 ⚔️
1. 能力PK赛
| 能力 | CSS | XPath | 血泪教训 |
|---|---|---|---|
| 模糊匹配 | ⭐⭐⭐ | ⭐⭐⭐ | 平手 |
| 组合查询 | ⭐⭐☆ | ⭐⭐⭐ | XPath略胜一筹 |
| 抗动态能力 | ⭐⭐ | ⭐⭐⭐ | XPath的拿手好戏 |
| 浏览器兼容 | ⭐⭐⭐ | ⭐⭐ | 老项目慎用XPath |
2. 连招示范
/* 三合一必杀技 */
div.头部[name*='导航']
/* 家族遗传定位法 */
form#登录 > [type='密码']
五、避坑指南 🚧
-
语法地雷区
- 类选择器要用完整咒语
[class='全称'] *=/^=/$=三胞胎别认错- 中括号间空格是魔鬼（
[a][b]≠[a] [b]）
- 类选择器要用完整咒语
-
考试重点画圈
- 动态ID的三大抓捕方式
- 多属性查户口的标准流程
- 选择器权重计算（比大学绩点还复杂）
-
工程化生存指南
# 防御性编程典范 WebDriverWait(driver,10).until( EC.presence_of_element_located(( By.CSS_SELECTOR, "[id*='固定前缀']" )) )
💡 专业建议：把常用选择器像收集邮票一样整理好，给重要元素准备至少两套定位方案（就像给重要文件备份）。对于核心业务元素，建议定期做定位健壮性检查，就像给网站做体检一样！
更多推荐
10
0- 0
已为社区贡献3条内容
所有评论(0)