如果你還想從頭學起Selenium,可以看看這個系列的文章哦!

https://www.cnblogs.com/poloyy/category/1680176.html

 

其次,如果你不懂前端基礎知識,需要自己去補充哦,博主暫時沒有總結(雖然我也會,所以我學selenium就不用複習前端了哈哈哈...)

 

什麼是Xpah

官方:XPath 是一門在 XML 文件中查詢資訊的語言。XPath 用於在 XML 文件中通過元素和屬性進行導航

【XPath 使用路徑表示式來選取 XML 文件中的節點或者節點集】

 

Xpath的缺點

Xpath 這種定位方式, webdriver會將整個頁面的所有元素進行掃描以定位我們所需要的元素, 這是個非常費時的操作,  如果指令碼中大量使用xpath做元素定位的話, 指令碼的執行速度可能會稍慢

 

Xpath在UI自動化中的應用場景

  • 在Web UI自動化中,其實用Xpath的定位元素的優先順序並不高,但它是萬能的;所以如果用其他方式無法定位時,可以用Xpath進行定位
  • 在App UI自動化中,Xpath是唯一可以定位元素的方式

 

Xpath常見的表示式

表示式等價於CSS描述
nodename 標籤 選取此節點的所有子節點,類似 css 中的標籤選擇器
/ > 從根節點選取,也就是當前節點的最頂層(預設情況下當前節點是 html 最頂層,若從某元素開始,當前節點為此元素)
// 空格,後代選擇器 從匹配選擇的當前節點選擇文件中的節點,而不考慮它們的位置
. 選取當前節點
.. 選取當前節點的父節點
@ 選取屬性
* * 萬用字元,代表任意型別的標籤

 

Xpath定位方式的簡單栗子

絕對路徑定位

作用:從頂層 html 開始往下找,像資料夾一樣寫的完整路徑;它是以 / 開頭的,如: /html/body/div/ul/li 

缺點:一旦頁面結構發生改變,路徑也隨之失效,必須重新定位。 所以不推薦使用絕對路徑的寫法

 

相對路徑定位

作用:相對路徑  以"//" 開頭, 讓xpath 從文件的任何元素節點開始解析(也就是說每個節點都作為起點找一下)

和絕對路徑的區別:絕對路徑  以 "/"  開頭,讓xpath 從文件的根節點開始解析

 

索引定位

跟Python的列表一樣,通過[ 1 ]下標去找,注意!它是從1開始的

如: //input[2] ,表示任意節點下的第二個 input 標籤

 

Xpath等價於CSS選擇器的栗子

  • 首先我們訪問:https://www.51job.com/
  • 然後按F12,選中Elements,按Ctrl+F
  • 將下面的表示式放進去,逐一驗證匹配出來的元素是否一致
  • 注意:這裡可能需要你懂CSS的各種選擇器寫法哦,不太瞭解的可以看這篇博文:
Xpath路徑表示式 CSS選擇器表示式
只通過絕對路徑、標籤定位
/html/body html>body
/html/body/div/div[@class="bar"] html>body>div>div.bar
/html//div html div
/html//div/ul//li html div>ul li
通過相對路徑、標籤、屬性值定位
//div[@class="header"] div.header
//div[@class="ush top_wrap"] div.top_wrap
//div[@class="ush top_wrap"]/a[@class="more"] div.top_wrap>a.more 
通過標籤、屬性值、萬用字元定位
//* *
//*[@class="header"] [class="header"]或 .header
//*[@id="languagelist"] [id="languagelist"]或 #languagelist
//*[@id="languagelist"]/li[2] #languagelist>li:nth-child(2)
//div[@class="header"]//ul[@id="languagelist"]/* div.header ul#languagelist >*
通過下標 或 屬性定位  
//@href [href]
//a[@href] a[href]
//div[@class="header"]//ul/li[last()] div.header ul >li:last-child
//div[@class="ush top_wrap"]//ul[@id]/li[1] div.top_wrap ul[id]>li:first-child
若干路徑  
//body | //ul body , ul
//ul[@id="kwdTypeSelUl"] | //ul[@id="area_channel_layer_list"] ul#kwdTypeSelUl , ul#area_channel_layer_list

 

Xpath一些常用函式和特殊寫法

繼續拿:https://www.51job.com/做小案例哦

表示式 描述
//title[@*] 選取所有帶有屬性的 title 元素
條件表示式and、or、not
//div[@id="zoomer" and  @style="display:none;"] 找到id="zoomer"和style="display:none"的div元素
//div[@class="cresume" or @class="footer"] 找到class="cresume"或 "footer"的div元素
//*[@id="showguide" and not(@class="footer")] 找到id="showguide"且class != "footer"的任意元素
模糊匹配函式starts-with、contains
//*[starts-with(@id,"s")] 找到id開頭為 s 的任意元素
//*[ends-with(@id,"s")] 找到id結尾為 s 的任意元素
//*[contains(text(),'註冊')]   找到標籤間文字包含 註冊 的任意元素
定位函式position  
//*[contains(@id,"languagelist")]/li[position()=3] 找到第三個 li
//*[contains(@id,"languagelist")]/li[position()<=2] 找到前兩個 li

 

Xpath的其他定位方式

定位方式描述
ancestor 選取當前節點的所有先輩(父、祖父等)
ancestor-or-self 選取當前節點的所有先輩(父、祖父等)以及當前節點本身
child 選取當前節點的所有子元素【/可替代,略顯多餘】
descendant 選取當前節點的所有後代元素(子、孫等)【//可替代,略顯多餘】
descendant-or-self 選取當前節點的所有後代元素(子、孫等)以及當前節點本身
following 選取當前節點的結束標籤之後的所有節點
following-sibling 選取當前節點之後的所有同級節點
parent 選取當前節點的父節點【../可替代,略顯多餘】
preceding 選取文件中當前節點的開始標籤之前的所有節點
preceding-sibling 選取當前節點之前的所有同級節點

 

Xpath其他方式的實際栗子

繼續拿:https://www.51job.com/做小案例哦

其他定位方式  是否有等價寫法?
//*[contains(@class,"top_wrap")]/parent::div //*[contains(@class,"top_wrap")]/..
//*[contains(@class,"content")]/div/child::div //*[contains(@class,"content")]/div/div
//*[contains(@id,"userid")]/preceding-sibling::input //*[contains(@id,"userid")]/../input[position()<=4]
//*[contains(@id,"userid")]/following-sibling::div //*[contains(@id,"userid")]/../div[position()=2]
//*[contains(@class,"content")]/descendant::div //*[contains(@class,"content")]//div