Selenium使用CSS定位的方法有哪些

本篇內(nèi)容介紹了“Selenium使用CSS定位的方法有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

大部分人在使用selenium定位元素時，用的是xpath定位，css定位往往被忽略掉了，其實(shí)css定位也有它的價(jià)值，css定位更快，語法更簡潔

一、CSS 選擇器

常見符號：
#表示 id選擇器
.表示 class選擇器
>表示子元素，層級
一個空格也表示子元素，但是是所有的后代子元素，相當(dāng)于 xpath 中的相對路徑

二、CSS:屬性定位

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

如下是百度輸入框的的html代碼：
<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

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_ipt input#kw input[id='kw']

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

//form的id屬性form#form>span>input
//form的class屬性form.fm>span>input

六、CSS:索引

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

Select控件第三個Opel
#select>select>option:nth-child(3)CheckBox第一個Volvo
#checkbox>input:nth-child(1)CheckBox第二個Saab
#checkbox>input:nth-child(4)RadioBox第二個Saab
#radio>input:nth-child(4)

七、CSS:邏輯運(yùn)算

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

[type='checkbox'][name='checkbox1']

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

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

單一屬性定位

type selector
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']")

九、百度首頁點(diǎn)擊按鈕為例

模糊匹配屬性值方法

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屬性，如：
class="s_ipt"可以寫成：.s_ipt
③. 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,"//*[@class=‘s_ipt’]")

其他屬性

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’]")

標(biāo)簽

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’]")

層級關(guān)系

CSS
如：//form[@id=‘form’]/span/input和//form[@class=‘fm’]/span/input
①. css通過層級關(guān)系定位driver.find_element(By.CSS_SELECTOR,“form#form>span>input”)
②. css通過層級關(guān)系定位driver.find_element(By.CSS_SELECTOR,“form.fm>span>input”)

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#nr>option:nth-child(1)”)
②. 選擇第二個子元素driver.find_element(By.CSS_SELECTOR,“select#nr>option:nth-child(2)”)
③. 選擇第三個子元素driver.find_element(By.CSS_SELECTOR,“select#nr>option: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強(qiáng)大的模糊匹配
2、by_partial_link，模糊匹配定位
driver.find_element(By.XPATH,"//*[contains(text(),‘hao123’)]")

“Selenium使用CSS定位的方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！