详解Selenium系列第十二篇:探索自动化必备知识——深入理解CSS选择器的使用方法
如果你还想从头学起Selenium,可以看看这个系列的文章哦!
https://www.cnblogs.com/poloyy/category/1680176.html
其次,如果你不懂前端基础知识,需要自己去补充哦,博主暂时没有总结(虽然我也会,所以我学selenium就不用复习前端了哈哈哈...)
Web UI自动化中,定位方式的优先级
- 优先级最高:ID
- 优先级其次:name
- 优先级再次:CSS selector
- 优先级再次:Xpath
针对css selector和xpath的优先级做一个简单的说明
在项目中我们可能用的最多的是css或者xpath,那么针对这两种,我们优先选择css,原因在哪些?
- 原因1:css是配合html来工作,它实现的原理是匹配对象的原理,而xpath是配合xml工作的,它实现的原理是遍历的原理,所以两者在设计上,css性能更优秀
- 原因2:语言简洁,明了,相对xpath
- 原因3:前端开发主要是使用css,不使用xpath,所以在技术上面,我们可以获得帮助的机会非常多
定位元素的注意事项(划重点)
- 找到待定位元素的唯一属性
- 如果该元素没有唯一属性,则先找到能被唯一定位到的父元素/子元素/相邻元素,再使用 等进行辅助定位
> , " " , +
- 不要使用随机唯一属性定位
- 最重要的是多跟研发沟通,尽量把关键元素加上ID或者name,并减少不合理的页面元素,例如重复ID这样的事情最好不要发生
首先,基础的CSS选择器
选择器 |
名字 |
例子 |
例子描述 |
---|---|---|---|
基础选择器 | |||
.class |
class选择器 |
.intro |
选择 class="intro" 的所有元素。 |
#id |
id选择器 |
#firstname |
选择 id="firstname" 的所有元素。 |
* |
通配符 |
选择所有元素。 |
|
element |
标签选择器 |
p |
选择所有 <p> 元素。 |
多层选择器 | |||
element,element |
分组选择器 |
div,p |
同时选择所有 <div> 元素和所有 <p> 元素。 |
element element |
后端选择器 |
div p |
选择 <div> 元素内部的所有 <p> 元素(包括子元素、孙子元素) |
element>element |
子元素选择器 |
div>p |
选择 <div> 元素下的 <p> 子元素。 |
element element |
相邻选择器 |
div p |
选择 <div> 元素之后的所有兄弟 <p> 元素。 |
属性选择器 | |||
[attribute] |
[target] |
选择带有 target 属性所有元素。 |
|
[attribute=value] |
[target=_blank] |
选择 target="_blank" 的所有元素。 |
|
[attribute~=value] |
[title~=flower] |
选择 title 属性包含单词 "flower" 的所有元素。 |
|
[attribute|=value] |
[lang|=en] |
选择 lang 属性值以 "en" 开头的所有元素。 |
html页面中,css正确写法的栗子
/* id选择器 */
#abc {
color: #cc0000;
font-size: 12px;
}
/* class 选择器 */
.down {
color: #66cc66;
}
/* 标签选择器 */
p {
background: cornflowerblue;
}
/* 标签选择器可以与class选择器组合使用 */
p.down {
font-size: 24px;
}
/* 分组选择器 */
ul,
div,
.up {
color: #cc0000;
}
/* 属性选择器 */
[href] {
color: #cc6600;
}
span[title="hello"] {
color: #00FFFF;
}
span[title~="python"] {
font-size: 24px;
}
/* 后代选择器 */
div li {
background: forestgreen;
}
/* 子元素选择器 */
div[id="up"]>ul {
color: #cc6600;
}
/* 相邻兄弟选择器 */
#down+li {
font-size: 24px;
}
/* 后续兄弟选择器 */
#down~li {
color: #cc0000;
}
然后,伪类选择器
选择器 |
例子 |
例子描述 |
---|---|---|
:first-child |
p:first-child |
选择属于父元素的第一个子元素的每个 <p> 元素。 |
:nth-child(n) |
p:nth-child(2) |
选择属于其父元素的第二个子元素的每个 <p> 元素。 |
:nth-last-child(n) |
p:nth-last-child(2) |
同上,从最后一个子元素开始计数。 |
:nth-of-type(n) |
p:nth-of-type(2) |
选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
同上,但是从最后一个子元素开始计数。 |
:last-child |
p:last-child |
选择属于其父元素最后一个子元素每个 <p> 元素。 |