Selenium系列（十三） - 自動化必備知識之Xpath的詳細使用

若是你還想從頭學起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