css選擇器用法，使用css定位元素，css和xpath元素定位的區別

css定位元素

1.什么是css？

CSS(Cascading Style Sheets)層疊樣式表，是一種語言，用來描述html或者xml的顯示樣式。在css語言中有css選擇器，在selenium中同樣適用。

提示：在selenium中相比較xpath，更推薦使用css選擇器，因為css速度更快

2.css定位方法

driver.find_element_by_css_selector()

3.css定位常用策略

1. id選擇器，通過id屬性定位
2. class選擇器，通過class屬性定位
3. 元素選擇器，通過元素定位
4. 屬性選擇器，通過屬性定位
5. 層級選擇器，用空格或者大於號表示層級關系

3.1 id選擇器

以百度首頁為例，通過id選擇就只需要：#su

driver.find_element_by_css_selector(‘#su’)

#表示后面跟的是id的屬性值，’#su’意思是id屬性為’su’的元素

3.2 class選擇器

上面的例子可以找到“百度一下”這個按鈕，如果想通過class屬性找的話，就：.bg s_btn

‘.’這個點表示后面跟的是class屬性的值，driver.find_element_by_css_selector(‘.bg s_btn’)就是通過class屬性查找屬性值為’bg s_btn’的元素

3.3元素選擇器

input就是查找所有input元素

driver.find_element_by_css_selector(‘input’)

3.4 屬性選擇器

[id = ‘su’]查找id屬性為‘su’的元素，等同於#su

 

driver.find_element_by_css_selector(‘[name='ie']’)

3.5 層級選擇器

根據元素的父子關系來選擇，格式為 element > element 大於號可以用空格代替

 

driver.find_element_by_css_selector(‘div > [name='ie']’)這個就是查找div下的name屬性為ie的元素

 

注意：直接子節點才可以用>

 

3.6 css延伸

input[type^=’P’]  找一個input元素，type屬性的值以P開頭

input[type$=’d’]  找一個input元素，type屬性的值以d結尾

input[type*=’w’]  找一個input元素，type屬性的值包含w

 

css元素定位和xpath元素定位的對比

定位方式	xpath	css
元素名	//input	input
id	//input[@id=’su’]	#su
class	//input[@class=’su’]	.su
屬性	//*[starts_with(@屬性名,’XXX’)] //*[contains(@屬性名,’XXX’)] //*[text()=””]	input[type$=’XXX’] input[type*=’XXX’] input[type^=’XXX’]

xpath定位元素參考鏈接：

https://www.cnblogs.com/sy_test/p/12201868.html