Selenium之css怎麼實現元素定位？

 

 

世界上最遠的距離大概就是明明看到一個頁面元素站在那裏，可是我卻定位不到！！

Selenium定位元素的方法有不少種，像是經過id、name、class_name、tag_name、link_text等等，可是這些方法侷限性太大， 隨着自動化測試的深刻，和不一樣框架要求，會發現上面的定位方式沒法解決一些元素定位。尤爲對於這樣一些元素：

一、沒有id、name、class等屬性;

二、標籤的屬性或文本信息特徵沒有或者不明顯；

三、標籤嵌套複雜，層次太多等。

因此這些方法瞭解一下便可，咱們真正須要熟練掌握的是經過xpath和css定位，通常只要掌握一種就能夠應對大部分定位工做了。

CSS定位方式和XPATH定位方式基本相同，只是CSS定位表達式有其本身的格式。CSS定位方式擁有比XPATH定位速度快，且比XPATH穩定的特性。下面詳細介紹CSS定位方式的使用方法

那這裏我跟你們分享如何經過css定位元素，css定位元素的方法是
find _element_by_css_selector

以下是百度首頁html代碼：

 

 

1.css定位經過絕對路徑定位

什麼是絕對路徑？絕對路徑其實就是從開始標籤（html）一級一級找到目標元素，上下級元素分隔符爲>或者空格

例如：經過css絕對路徑定位百度輸入框，並輸入內容檢索，代碼以下：

from selenium import  webdriver
import time
# 打開瀏覽器
driver=webdriver.Chrome()
# 加載項目地址（百度）
driver.get("http://www.baidu.com")
time.sleep(3) 
#定位百度輸入框
driver.find_element_by_css_selector("html body div div div div div form span input").send_keys("程序員一凡")
driver.find_element_by_css_selector("html>body>div>div>div>div>div>form>span>input").send_keys("程序員一凡")

　　

2.css定位經過id或class定位

id選擇器符號：#，class選擇器符號：.仍是剛纔案例，經過id或者class定位代碼以下：

# 經過id定位
driver.find_element_by_css_selector("#kw").send_keys("程序員一凡")
#class進行定位
driver.find_element_by_css_selector(".s_ipt").send_keys("程序員一凡")

　　

3.經過屬性或者部分屬性定位

css定位能夠經過除元素id、class之外的其餘屬性或者經過多個屬性惟必定位元素，也能夠經過部分屬性值來定位。經過部分屬性定位，有這麼些常規匹配符，以字符^指明從字符串的開始匹配，以字符以字符*指明在須要進行模糊查詢，以字符$指明在字符串的結尾匹配，代碼以下：

driver.find_element_by_css_selector("[autocomplete='off']").send_keys("程序員一凡")
driver.find_element_by_css_selector("[autocomplete='off'][name='wd' ]").send_keys("程序員一凡")
# 4）經過部分屬性值定位
driver.find_element_by_css_selector("[autocomplete^='o'][name='wd']").send_keys("程序員一凡")
driver.find_element_by_css_selector("[autocomplete*='f']").send_keys('程序員一凡')
driver.find_element_by_css_selector("[autocomplete$='f']").send_keys("程序員一凡")
　　

　　

4.經過層級定位

層級定位通常很難惟必定位到元素，通常狀況下層級跟id/class/屬性或者部分屬性值一塊兒組合定位：

 

driver.find_element_by_css_selector("form>span>input").send_keys("程序員一凡")
driver.find_element_by_css_selector("form.fm>span>input.s_ipt").send_keys("程序員一凡")
driver.find_element_by_css_selector("form>span>input#kw").send_keys("程序員一凡")

　　

 

5.經過兄弟節點定位

什麼是兄弟節點，就是同一父級元素下，存在多個相同子標籤，那麼這些子元素就是兄弟節點，好比像下面這個html代碼

 

 如何來定位這些兄弟節點呢？ 定位第一個元素first-child,定位第2/3/4...N位置元素則用nth-child(n),定位最後一個元素last-child，代碼以下：

 

# 6)經過兄弟節點定位
driver.find_element_by_css_selector("div#u1 a:first-child").click()
driver.find_element_by_css_selector("div#u1 a:nth-child(3)").click()
driver.find_element_by_css_selector("div#u1 a:last-child").click()

　　

總結：

目前爲止，已經整理了自動化測試Python+Selenium中對於web測試定位頁面元素的兩種主流，也是最好的定位方式XPATH和CSS定位方式，在我我的看來兩個方式都很不錯，效率都很高，也很容易解決平常工做中的問題，也可以減小頁面的變更對於腳本的維護成本，固然不一樣問題還須要不一樣的方式解決，能解決問題的方法都是好方法，但願之後的日子對於定位元素再也不是難題。下面咱們對這兩種定位方式大概作個對比；

 

 XPATH定位和CSS定位很類似，XPATH功能更強大一些吧，但CSS定位方式執行速度更快，鑑於某些瀏覽器不支持CSS定位方式，而且通常在自動化測試實施過程當中使用xpath定位方式要比css更廣泛，因此建議你們先掌握xpath。