CSS Selectors
前言
在刚学习 UI 自动化时, 对于定位方式一窍不通, 在使用插件辅助工具加上对定位方式的一些了解, 算是磕磕绊绊用了起来, 随着编写用例数量的增加, 定位方式的稳定性也更加重要, 只懂一些基本的定位知识已经不能够满足要求, 百度搜索到的使用方法也大都看的云里雾里, 因此花费些时间整理了下 CSS 和 Xpath(后续补充)两种定位方法, 发现还是有很多细节需要掌握(使用粗体标记), 根据学到的自己对使用方法作了三种划分, 当然这并不代表所有 CSS 定位方法, 更多可参考文末链接学习.
1. 基本表示法
通配符:*
*
使用 * 可以匹配到所有节点, 即页面上的所有元素
元素: element
div
直接使用元素名就可以匹配到所有此类型的元素, 如 div; 若需要匹配多个元素, 使用逗号隔开, 如:
- em,span
- ID:#id
- #login
根据该元素的 ID 属性中的值匹配元素, ID 属性值必须完全匹配. ID 在 CSS 中具有唯一性, 含有 ID 属性的元素尽量选择使用 ID 来定位.
类:.class
.demo
根据元素的类属性中的值匹配元素 , 当有多个 class 属性值时, 必须与其中一个完全匹配, 匹配多个类名使用逗号隔开
属性:[attr]
*[href]
上述表达式可以匹配到所有含链接属性的元素
属性选择器通过已经存在的属性名或属性值匹配元素, 是对元素节点的具体描述
ID 和类都可以和元素选择器配合使用
2. 节点描述法
节点描述法即对元素的进一步描述, 主要是针对属性, 也是属性选择器的补充
单个属性:[attr=value]
h2[class=demo]
匹配到含有 class 属性且值为 demo 的 h2 元素
注意:
使用注意事项:
注意值必须是全匹配, 像 class 使用空格隔开的多值不能匹配(参考属性模糊匹配)
因属性值不需要引号, 所以属性值中含有.# 字符以及空格不适用, 如 herf 属性
多个属性:[attr=value] [attr=value]
div[class=demo][name=test]
匹配到含有属性 class 和 name 且值分别为 demo 和 test 的 div 元素
使用方法和注意点和单个属性一致, 只是添加了多个不同属性名称
属性值模糊匹配
html 示例代码
- <div class="one two three">
- 元素 A
- </div>
- <div class="test-one two">
- 元素 B
- </div>
- 1. [attr~=value] div[class~=one]
匹配到元素 A, 表示属性值以空格作分隔的列表, 且其中一个能匹配到 value
- 2. [attr|=value]
- div[class|=test]
匹配到元素 B, 表示属性值以 value 为前缀且使用连字符'-'连接
- [attr^=value]
- div[class^='on']
匹配到元素 A, 表示属性值是以 "value" 开头的元素
- [attr$=value]
- div[class$='wo']
匹配到元素 B, 表示属性值是以 "value" 结尾的元素.
- [attr*=value]
- div[class*='one']
匹配到元素 A 和元素 B, 表示属性值包含有 "value" 的元素
注意:~= 和 |= 是 css2 版本定义的, value 不需要使用引号
3. 家族关系法
- <div id="body">
- <span > 后天更美好</span>
- <p > 世界很大 < span > 我想去看看</span></p>
- <p > 海浪向往着陆地</p>
- </div>
- <span > 我向往着你</span>
子元素: element>element
#body>span
匹配到第一个 span 元素, 表示只会匹配作为第一个元素的直接后代 (子元素) 的第二元素
后代元素: element element
#body span
匹配到 div 中的所有 span 元素, 和子元素选择器相似, 只是不需要相匹配元素之间要有严格的父子关系, 也可能是孙子关系
兄弟元素: element+element
span+p
匹配到 p 元素, 表示两个元素相邻且在同一个父元素下, 第二个元素选中.
第 N 个子元素( :nth-child(n) )
#body>p:nth-child(2)
匹配到 div 内的第二个 p 元素, 表示匹配其父元素下的的第二个子元素, n 从 1 开始
注意经常犯的错误:
除了兄弟元素, 其他关系定位必须指定父元素(可能因为兄弟可以相互参考所以不需要)
匹配多个中的某一个时, 父元素必须是唯一的, 否则 nth-child 永远是多个的
家族关系定位只能向内或同级定位(即往里查找子元素或后代元素), 不能向外定位
参考
CSS Selectors - CSS(层叠样式表) | MDN
CSS 选择器参考手册
来源: http://www.bubuko.com/infodetail-3303010.html