Web UI自動化中XPath的使用
XPath 是XML Path的簡稱缠导，是一門在xml文檔中查找信息的語言朴恳。由于HTML文檔本身就是一個標(biāo)準(zhǔn)的XML頁面窜骄。selenium支持八大定位方式蛾魄，其中xpath是非常強(qiáng)大的元素查找方式餐曹，特別是在以文本方式查找元素逛拱，父級，兄弟級節(jié)點(diǎn)元素查找中台猴。
在Chrome中檢查xpath是否正確
在說xpath使用之前朽合，先說一個在chrome中檢查xpath是否正確的方法
在chrome瀏覽器中，用F12打開devtools
進(jìn)入到Console tab
然后輸入$x("xpath")
當(dāng)xpath正確并在頁面中有符合的元素時饱狂，就會顯示出頁面上的元素曹步，如下圖
當(dāng)頁面不包含此xpath的元素，顯示為[]休讳，如下圖
當(dāng)寫入的xpath錯誤時讲婚，就報(bào)xpath不正確錯誤
例如如下圖報(bào)錯：“is not a valid XPath expression”
$x("path")結(jié)果解析
如上圖 xpath為.//a 即查找當(dāng)前頁面所有的a標(biāo)簽
紅箭頭指向個數(shù)14, 說明此頁面檢查出滿足此.//a xpath的元素有14個
? ? ? 點(diǎn)擊前面的三角箭頭，如下圖所示衍腥，顯示出所有的滿足xpath標(biāo)簽的元素磺樱，并且當(dāng)鼠標(biāo)移動到對應(yīng)的結(jié)果后，頁面的元素會有一個藍(lán)色的背景婆咸，說明此時鼠標(biāo)執(zhí)行的元素對應(yīng)頁面上的此元素竹捉。（當(dāng)鼠標(biāo)移動到對應(yīng)元素后，在頁面看不到對應(yīng)的元素的顯示尚骄，說明此時這個元素是在頁面不可見的）
雙擊對應(yīng)的元素后块差，會跳轉(zhuǎn)到對應(yīng)的DOM頁面中
在web UI自動化中常用到的Xpath
以文本查找元素
text()
例如查找如上圖中span的文本為“發(fā)行申請”的元素
.//span[text()='發(fā)行申請']
從截圖結(jié)果看 查找到了兩個span元素，是因?yàn)轫撁嬷羞€有一個span元素的為不可見
注意text()查找元素的時候倔丈，只能查找到當(dāng)前標(biāo)簽中包含了文本信息的控件
例如如上圖憨闰，我們查找div中文本為“發(fā)行申請”的元素
.//div[text()='發(fā)行申請']
如上圖所示，可見符合要求的元素為空需五，是因?yàn)闆]有div中文本為發(fā)行申請的標(biāo)簽鹉动，只有span中文本為發(fā)行申請的標(biāo)簽，那么如果我們還是需要找到文本為發(fā)行申請的div呢宏邮？
string()
當(dāng)要查找不是標(biāo)簽中直接文本的控件此時需要用string()函數(shù)
如下查找包含文本為首頁發(fā)行申請的div
查找包含某個文本的控件
contains()
例如查找文本包含“發(fā)行”的label控件
.//label[contains(text(),'市場')]
查找不包含某個文本的控件
not(contains())
例如查找不包含“市場”的label控件
.//label[not(contains(text(),'市場'))]
去掉文本兩邊的空格和回車
normalize-space()
例如泽示，如上圖要找到button下文字為“新增”的span標(biāo)簽
如果直接用：.//button[text()='新增']這個進(jìn)行查找呢
如下圖所示可以看到查找結(jié)果為空缸血，這是因?yàn)镈OM結(jié)構(gòu)中的新增的末尾帶有空格和回車
.//button//span[normalize-space(text())='新增']
XPath軸
下面例子都以百度首頁為例
XPath軸的使用
XPath提供了如下的軸對稱節(jié)點(diǎn)
以下主要從我在UI自動化中經(jīng)常使用到的節(jié)點(diǎn)做一些具體說明
parent - 父級元素
查找“百度熱搜”的父級a標(biāo)簽
ancestor - 祖先元素
查找“百度熱搜”的所有祖先元素
.//div[@aria-label='百度熱搜']//ancestor::*
查找“百度熱搜”的class為s-hotsearch-title的祖先級div元素
.//div[@aria-label='百度熱搜']//ancestor::div[@class='s-hotsearch-title']
下面的例子以下面DOM結(jié)構(gòu)為例（百度首頁的DOM片段）
following-sibling - 當(dāng)前元素節(jié)點(diǎn)標(biāo)簽之后的所有兄弟節(jié)點(diǎn)
例如查找id為s-hotsearch-wrapper的向下兄弟textarea節(jié)點(diǎn)
.//div[@id='s-hotsearch-wrapper']//following-sibling::textarea
preceding-sibling - 當(dāng)前元素節(jié)點(diǎn)標(biāo)簽之前的所有兄弟節(jié)點(diǎn)
例如查找id為s-hotsearch-wrapper的向上兄弟form節(jié)點(diǎn)
.//div[@id='s-hotsearch-wrapper']//preceding-sibling::form
preceding - 當(dāng)前元素節(jié)點(diǎn)標(biāo)簽之前的所有節(jié)點(diǎn)
例如查找id為s-hotsearch-wrapper的div標(biāo)簽，之前的id為lm-new的標(biāo)簽
.//div[@id='s-hotsearch-wrapper']//preceding::*[@id='lm-new']
following - 當(dāng)前元素節(jié)點(diǎn)標(biāo)簽之后的所有節(jié)點(diǎn)?
例如查找id為m的標(biāo)簽之后的class為hot-title的標(biāo)簽
.//div[@id='m']//following::*[@class='hot-title']
根據(jù)多個條件查找
and - 與條件
.//div[@aria-label='百度熱搜' and contains(@class,'title-text')]
or - 或條件
例如查找class為hot-title 或者class包含title-text的標(biāo)簽
.//*[@class='hot-title' or contains(@class,'title-text')]
查找多個控件 - 使用“|”連接
當(dāng)需要一次性查找多個不同xpath的元素時械筛，可以使用"|" 對xpath路徑進(jìn)行相連
例如查找id為u和id為u1的控件
.//*[@id='u'] | .//*[@id='u1']
starts-with 查找以XX開頭的元素
例如查找class為head開頭的div
.//div[starts-with(@class,'head')]
在用Selenium做Web UI自動化時捎泻，對元素的定位是最基礎(chǔ)的需要，在八中定位方式中Xpath是最強(qiáng)大的一種定位方式埋哟，但是有些同學(xué)在使用XPath時笆豁，會直接通過瀏覽器復(fù)制出DOM中的xpath,這個是不可取的，直接復(fù)制出來的xpath穩(wěn)定性不高（當(dāng)開發(fā)只是刪除或新增以個div這個小小的改動赤赊，就需要更改xpath）闯狱，所以在實(shí)際的使用中需要我們寫出穩(wěn)定性相對比較高的XPath. 以上是我在做UI自動化時常用的XPath，所以分享給大家砍鸠，希望可以幫助到大家扩氢。
