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> 元素。