1. 程式人生 > 實用技巧 >Selenium之css怎麼實現元素定位?

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



世界上最遠的距離大概就是明明看到一個頁面元素站在那裡,但是我卻定位不到!!

Selenium定位元素的方法有很多種,像是通過id、name、class_name、tag_name、link_text等等,但是這些方法侷限性太大, 隨著自動化測試的深入,和不同框架要求,會發現上面的定位方式無法解決一些元素定位。尤其對於這樣一些元素:

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

2、標籤的屬性或文字資訊特徵沒有或者不明顯;

3、標籤巢狀複雜,層次太多等。

所以這些方法瞭解一下即可,我們真正需要熟練掌握的是通過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。