XPath (XML Path Language) 常用來作為自動化抓取元素路徑的語法，這篇會主要講抓取 XPath 的一些用法以及優劣。
透過 Chrome DevTools 快速抓取 XPath 路徑
Chrome DevTools 可謂目前最強大的前端開發、Debug 工具，抓 XPath 用 Chrome DevTools 是最簡單的方法，可以利用 HTML Elements 選取直接找到 XPath 路徑。
- 以 shazi.info 網站為例，抓取作者的頭像 XPath 路徑
- 到 shazi.info 開啟 Chrome DevTools (「F12」或者「右鍵 -> 檢查」)
- 點選 Elements 頁籤並用 「Elements 選取工具」選取頁面要抓的位置
- 可以看到 Elements 選到指定的 HTML Elements 位置，右鍵選擇「Copy -> Copy XPath」
- 拿到
//*[@id="grofile-2"]/img的 XPath 值
XPath 語法以及 DevTools 的優劣
雖然說 Chrome 提供夠強大的 XPath 抓取方式，但 DevTools 抓的 XPATH 並不會非常精準，還是要理解一下 XPath 是怎麼產生出來的。
以同一個案例來看，整個 Elements 結構是如下：
<html>
<head></head>
<body>
<div id="container">
<div id="header">
<div id="wrapper">
<div id="contentwrapper" class="animated fadeIn">
<div id="content">
<div id="rightbar">
<div id="grofile-2" class="widget widget-grofile grofile">
<img src="https://secure.gravatar.com/avatar/62a517c88ea8bfc9c5f9ff6720e8b00a?s=320" class="grofile-thumbnail no-grav" alt="shazi7804">
<div id="media_gallery-2">
... more div
<div id="footer">
</body>
</html>中間我省略了許多跟這個 XPath 不相關的 HTML Element，XPath 的寫法可以很嚴謹或者很鬆散，取決於現在的 Element 設計樣式，詳細的 XPath 語法可以參考「W3schools – XPath Syntax」以下幾種寫法參考：
- 以
div id作為 Keyword 的 XPath
/html/body/div[@id='container']/div[@id='wrapper']/div[@id='contentwrapper']/div[@id='rightbar']/div[@id='grofile-2']/img以 div id 作為 Keyword 的 XPath 好處是當 div id 不變時這個 XPath 就不會跑掉。
- 利用
//大範圍搜尋並用 class 作為 Keyword 的 XPath
/html/body//*[@class='animated fadeIn']//*[@class='widget widget-grofile grofile']/img如果 div id 不可信的話，也能拿其他 Element 作為 Keyword 搜尋，這個案例來看除了 div id 以外還有 div class，也因為不是每一個 div 都有 class 參數，所以可以更簡短的找到 XPath 位置。
- 利用 id unique 的特性找到 XPath
//*[@id="grofile-2"]/img這也是 Chrome DevTools 抓到的 XPath 路徑，非常簡短的寫法，能這麼簡短是因為整個 Element 內僅有一個 id="grofile-2" 的值，有點像是在整個 Element 內直接搜尋 id="grofile-2" 然後抓這底下的 img tag
這個方法並沒有不好，但在需要長期維護的自動化測試情境就必須要考量較多的問題，舉例：
- 缺點：當在不同結構下同時有兩個
id="grofile-2"時，//*[@id="grofile-2"]/img就會抓錯 element。 - 優點：當有需求要把
id="grofile-2"要移到另一個結構下時，//*[@id="grofile-2"]/img的作法就不需修改 XPath。
總結
XPath 其實跟 Regex 有異曲同工之妙，可以寫的很精準也可以用 * 寫的很寬鬆，所以實務上 XPath 到底要不要抓這麼精準，其實是需要和 Front-end 工程師做好溝通，而好的 XPath 精準路徑也能讓 XPath 在抓取時效能大幅提昇。
References
