你必須了解Selenium使用CSS定位總結(jié)

第你必須了解Selenium使用CSS定位總結(jié)大部分人在使用selenium定位元素時，用的是xpath定位，CSS定位往往被忽略掉了，其實css定位也有它的價值，css定位更快，語法更簡潔

一、CSS選擇器

常見符號：

.表示class選擇器

表示子元素，層級

一個空格也表示子元素，但是是所有的后代子元素，相當(dāng)于xpath中的相對路徑

二、CSS:屬性定位

css可以通過元素的id、class、標(biāo)簽這三個常規(guī)屬性直接定位到

如下是百度輸入框的的html代碼：

inputid=kw>

css用#號表示id屬性,如：#kw

css用.表示class屬性，如：.s_ipt

css直接用標(biāo)簽名稱，無任何標(biāo)示符，如：input

三、CSS:其它屬性

css可以通過標(biāo)簽、class、id這三個常規(guī)屬性定位，也可以通過其它屬性定位

以下是定位其它屬性的格式[name=wd][autocomplete=off][maxlength=255]

四、CSS:標(biāo)簽

css可以通過標(biāo)簽與屬性的組合來定位元素

input.s_iptinput#kwinput[id=kw]

五、CSS:層級關(guān)系

//form的id屬性form#formspaninput

//form的class屬性form.fmspaninput

六、CSS:索引

css也可以通過索引來定位子元素

Select控件第三個Opel

#selectselectoption:nth-child(3)CheckBox第一個Volvo

#checkboxinput:nth-child(1)CheckBox第二個Saab

#checkboxinput:nth-child(4)RadioBox第二個Saab

#radioinput:nth-child(4)

七、CSS:邏輯運算

css同樣也可以實現(xiàn)邏輯運算，同時匹配兩個屬性，跟xpath不一樣

[type=checkbox][name=checkbox1]

八、百度搜索框?qū)嵗?/p>

拿百度的搜索框來具體看看CSS定位

定位輸入框

單一屬性定位

typeselector

driver.find_element_by_css_selector(input)id定位

driver.find_element_by_css_selector(#kw)class定位

driver.find_element_by_css_selector(.s_ipt)其他屬性定位

driver.find_element_by_css_selector([name=wd])driver.find_element_by_css_selector([type=text])

組合屬性定位

id組合屬性定位

driver.find_element_by_css_selector(input#kw)class組合屬性定位

driver.find_element_by_css_selector(input.s_ipt)其他屬性組合定位

driver.find_element_by_css_selector(input[name=wd])僅有屬性名，沒有值也可以

driver.find_element_by_css_selector(input[name])兩個其他屬性組合定位

driver.find_element_by_css_selector([name=wd][autocomplete=off])

九、百度首頁點擊按鈕為例

模糊匹配屬性值方法

1屬性值由多個空格隔開，匹配其中一個值的方法

driver.find_element_by_css_selector(input[class~=btn])2匹配屬性值為字符串開頭的方法

driver.find_element_by_css_selector(input[class^=btn])3匹配屬性值字符串結(jié)尾的方法

driver.find_element_by_css_selector(input[class$=s_btn])

十、CSS與Xpath定位的區(qū)別

CSS

css可以通過元素的id、class、標(biāo)簽這三個常規(guī)屬性直接定位

①.css用#號表示id屬性，如：

id=kw可以寫成：#kw

②.css用.表示class屬性，如：

>③.css直接用標(biāo)簽名稱，無任何標(biāo)識符，如：input

Xpath

xpath也可以通過元素的id、name、class這些屬性定位

①.用xpath通過id屬性定位

driver.find_element(By.XPATH,//[@id=kw])

②.用xpath通過name屬性定位

driver.find_element(By.XPATH,//[@name=wd])

③.用xpath通過class屬性定位

driver.find_element(By.XPATH,//*[@>

CSS

css除了上述以外，也可以通過其他屬性定位

①.css通過name屬性定位：

driver.find_element(By.CSS_SELECTOR,[name=wd])

②.css通過autocomplete屬性定位：

driver.find_element(By.CSS_SELECTOR,[autocomplete=off])

③.css通過type屬性定位:

driver.find_element(By.CSS_SELECTOR,[type=text])

Xpath

沒有上述屬性，可以通過其他屬性定位

driver.find_element(By.XPATH,//*[@autocomplete=off])

CSS

css頁可以通過標(biāo)簽與屬性的組合來定位元素

①.css通過標(biāo)簽與class屬性的組合定位driver.find_element(By.CSS_SELECTOR,input.s_ipt)

②.css通過標(biāo)簽與id屬性的組合定位driver.find_element(By.CSS_SELECTOR,input#kw)

③.css通過標(biāo)簽與其他屬性組合定位driver.find_element(By.CSS_SELECTOR,input[id=kw])

Xpath

1、如果同一個屬性，同名的比較多，可以通過標(biāo)簽篩選

①.用xpath通過其他屬性定位driver.find_element(By.XPATH,//input[@autocomplete=off])

②.用xpath通過id屬性定位driver.find_element(By.XPATH,//input[@id=kw])

③.用xpath通過name屬性定位driver.find_element(By.XPATH,//name[@id=wd])

CSS

如：//form[@id=form]/span/input和//form[@>①.css通過層級關(guān)系定位driver.find_element(By.CSS_SELECTOR,form#formspaninput)

②.css通過層級關(guān)系定位driver.find_element(By.CSS_SELECTOR,form.fmspaninput)

Xpath

1、如果一個元素，他的屬性不明顯，無法直接定位，可以先找到他的父元素，找到父元素，再找下一級就能定位

①.通過定位父元素來定位input輸入框driver.find_element(By.XPATH,//span[@id=s_kw_wrap]/input)

②.通過定位爺元素來定位input輸入框driver.find_element(By.XPATH,//form[@id=form]/span/input)

CSS

1、css也可以通過索引option：nth-child(1)來定位子元素

①.選擇第一個子元素driver.find_element(By.CSS_SELECTOR,select#nroption:nth-child(1))

②.選擇第二個子元素driver.find_element(By.CSS_SELECTOR,select#nroption:nth-child(2))

③.選擇第三個子元素driver.find_element(By.CSS_SELECTOR,select#nroption:nth-child(3))

Xpath

1、可以通過排序定位

①.用xpath定位第一位driver.find_element(By.XPATH,//select[@id=nr]/option[1])

②.用xpath定位第二位driver.find_element(By.XPATH,//select[@id=nr]/option[2])

③.用xpath定位第三位driver.find_element(By.XPATH,//select[@id=nr]/option[3])

CSS

driver.find_element(By.CSS_SELECTOR,input:contAIns(kw))

Xpath

1、xpath強大的模糊匹配

2、by_partial_link，模糊匹配定位