前言
大部分人在使用selenium定位元素時,用的是xpath元素定位方式,因為xpath元素定位方式基本能解決定位的需求。xpath元素定位方式更直覺,更好了解一些。
css元素定位方式往往被忽略掉了,其實css元素定位方式也有它的價值;相對于xpath元素定位方式來說,css元素定位方式更快,文法更簡潔。
css元素定位:通過元素的标簽或者元素的id、class屬性定位
1、css元素定位方式可以通過元素的id、class、标簽這三個正常屬性直接定位。
2、舉例:如下是百度輸入框的的html代碼:
<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>
①css元素定位使用#号表示id屬性,如:#kw
②css元素定位方式使用.表示class屬性,如.s_ipt
③css元素定位方式也可以直接使用标簽名稱,而沒有任何辨別符,如:input
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SO2kjN4EWN2UzNldDNmJWYyYzX0UjNyETM3EzLcZDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
css元素定位:通過元素的其它屬性定位
1、css元素定位除了可以通過标簽、class、id這三個正常屬性定位外,也可以通過元素的其它屬性定位。例如:
三、css元素定位:通過标簽與屬性的組合來定位元素
四、css元素定位:通過元素的層級關系來定位
1、css元素定位可以達到類似xpath元素定位通過元素的層級關系來定位,例如:
xpath元素定位: //form[@id='form']/span/input 和 //form[@class='fm']/span/input 也可以用css實作
五、css元素定位:通過元素的并列索引來定位
1、以下圖為例:與四相似。
2、css元素定位也可以通過索引option:nth-child(1)來定位子元素,這點與xpath寫法用很大差異,其實很好了解,直接翻譯過來就是第幾個小孩
六、css元素定位:通過對元素屬性的邏輯運算來定位
1、css同樣也可以實作邏輯運算,同時比對兩個屬性,這裡跟xpath不一樣,無需寫and關鍵字。
七、處理selenium中的css_selector定位元素的模糊比對問題
① 比對元素的id屬性,先指定一個html标簽,然後加上“#”符号,再加上id的屬性值。
driver.find_element_by_css_selector('div#ID').click()
②比對元素的class屬性,先指定一個html标簽,然後加上“.”符号,再加上class的屬性值。
driver.find_element_by_css_selector('div.CLASS').click()
③比對元素的其他屬性。【這裡不再是‘.’或者‘#’符号,而是采用了"标簽名[屬性名=屬性值]"的方式定位元素】
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()