技術文章 » 你必須瞭解Selenium使用CSS定位總結

你必須瞭解Selenium使用CSS定位總結

2022-02-17 19:00:19
本篇文章給大家帶來了關於Selenium使用CSS定位總結的相關知識，css定位也有它的價值，css定位更快，語法更簡潔，希望對大家有幫助。

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

一、CSS 選擇器

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

二、CSS:屬性定位

css可以通過元素的id、class、標籤這三個常規屬性直接定位到

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

css用#號表示id屬性,如：#kw
css用.表示class屬性，如：.s_ipt
css直接用標籤名稱，無任何標示符，如：input

三、CSS:其它屬性

css可以通過標籤、class、id這三個常規屬性定位，也可以通過其它屬性定位

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

四、CSS:標籤

css可以通過標籤與屬性的組合來定位元素

input.s_ipt input#kw input[id='kw']

五、CSS:層級關係

//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:邏輯運算

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

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

在這裡插入圖片描述

八、百度搜尋方塊範例

拿百度的搜尋方塊來具體看看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']")

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

在這裡插入圖片描述
模糊匹配屬性值方法

1>屬性值由多個空格隔開，匹配其中一個值的方法
driver.find_element_by_css_selector("input[class~='btn']")2>匹配屬性值為字串開頭的方法
driver.find_element_by_css_selector("input[class^='btn']")3>匹配屬性值字串結尾的方法
driver.find_element_by_css_selector("input[class$='s_btn']")

十、CSS與Xpath定位的區別

屬性定位

CSS
css可以通過元素的id、class、標籤這三個常規屬性直接定位
①. css用#號表示id屬性，如：
id=「kw」 可以寫成：#kw
②. css用.表示class屬性，如：
class="s_ipt"可以寫成：.s_ipt
③. css直接用標籤名稱，無任何識別符號，如：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’]")

標籤

CSS
css頁可以通過標籤與屬性的組合來定位元素
①. css通過標籤與class屬性的組合定位driver.find_element(By.CSS_SELECTOR,「input.s_ipt」)
②. css通過標籤與id屬性的組合定位driver.find_element(By.CSS_SELECTOR,「input#kw」)
③. css通過標籤與其他屬性組合定位driver.find_element(By.CSS_SELECTOR,「input[id=‘kw’]」)

Xpath
1、如果同一個屬性，同名的比較多，可以通過標籤篩選
①. 用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[@class=‘fm’]/span/input
①. css通過層級關係定位driver.find_element(By.CSS_SELECTOR,「form#form>span>input」)
②. css通過層級關係定位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強大的模糊匹配
2、by_partial_link，模糊匹配定位
driver.find_element(By.XPATH,"//*[contains(text(),‘hao123’)]")

十一、總結

自動化測試Python+Selenium中對於web測試定位頁面元素的兩種主流XPATH和CSS定位方式
XPATH定位和CSS定位很相似，XPATH功能更強大一些，但CSS定位方式速度更快，但是某些瀏覽器不支援CSS定位，並且一般在自動化測試過程中使用xpath定位方式要比css更普遍

（學習視訊分享：）

以上就是你必須瞭解Selenium使用CSS定位總結的詳細內容，更多請關注TW511.COM其它相關文章！