Selenium系列（十三） - 自動化必備知識之Xpath的詳細使用
阿新 • • 發佈：2020-04-04
如果你還想從頭學起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 |