前言

大部分人在使用selenium定位元素時，用的是xpath元素定位方式，因為xpath元素定位方式基本能解決定位的需求。xpath元素定位方式更直觀，更好理解一些。

css元素定位方式往往被忽略掉了，其實css元素定位方式也有它的價值；相對于xpath元素定位方式來說，css元素定位方式更快，語法更簡潔。

一、css元素定位：通過元素的標(biāo)簽或者元素的id、class屬性定位

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

2、舉例：如下是百度輸入框的的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元素定位：通過元素的其它屬性定位

1、css元素定位除了可以通過標(biāo)簽、class、id這三個常規(guī)屬性定位外，也可以通過元素的其它屬性定位。例如： 

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

四、css元素定位：通過元素的層級關(guān)系來定位

1、css元素定位可以達(dá)到類似xpath元素定位通過元素的層級關(guān)系來定位，例如：

xpath元素定位： //form[@id='form']/span/input 和 //form[@class='fm']/span/input 也可以用css實現(xiàn) 

五、css元素定位：通過元素的并列索引來定位 

1、以下圖為例：與四相似。 

2、css元素定位也可以通過索引option：nth-child(1)來定位子元素，這點與xpath寫法用很大差異，其實很好理解，直接翻譯過來就是第幾個小孩 

六、css元素定位：通過對元素屬性的邏輯運算來定位

1、css同樣也可以實現(xiàn)邏輯運算，同時匹配兩個屬性，這里跟xpath不一樣，無需寫and關(guān)鍵字。

七、處理selenium中的css_selector定位元素的模糊匹配問題

① 匹配元素的id屬性，先指定一個html標(biāo)簽，然后加上“#”符號，再加上id的屬性值。

driver.find_element_by_css_selector('div#ID').click()

②匹配元素的class屬性，先指定一個html標(biāo)簽，然后加上“.”符號，再加上class的屬性值。

driver.find_element_by_css_selector('div.CLASS').click()

③匹配元素的其他屬性。【這里不再是‘.’或者‘#’符號，而是采用了"標(biāo)簽名[屬性名=屬性值]"的方式定位元素】

driver.find_element_by_css_selector('div[name=NAME]').click()

④組合匹配【支持定位元素對象通過兩組或兩組以上的屬性】

driver.find_element_by_css_selector('div[name=NAME][type=TYPE]').click()

⑤匹配頭部

driver.find_element_by_css_selector('div[style^="sp.gif"]').click()

⑥匹配尾部

driver.find_element_by_css_selector('div[style$="sp.gif"]').click()

⑦匹配中間

driver.find_element_by_css_selector('div[style*="sp.gif"]').click()

到此這篇關(guān)于CSS元素定位之通過元素的標(biāo)簽或者元素的id、class屬性定位的文章就介紹到這了,更多相關(guān)css元素定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論