如果沒有元素定位，ui 自動化測試将寸步難行。如果元素定位不精準，自動化測試就很難穩定運作。也許你經常聽前輩們講解如何提高自動化程式運作的穩定性，我得說，一個精準的元素定位表達式，是一切自動化測試程式正常執行的基礎。
什麼是元素定位呢？無論自動化程式想要操作網頁的任何按鈕、連結或者輸入框，都必須先找到要操作的網頁元素，這個過程就是元素定位。
現如今，我們會運用機器學習等智能化手段提高元素定位的精準性，但不是每個公司和測試員有精力研究機器學習。實際上，你隻需要編寫一個良好的 xpath 表達式，就能做到精準控制想要操作的網頁元素。
如何在浏覽器中定位元素
定位元素的方式有很多，有基于網頁 DOM 的元素定位方式，有基于圖像識别的元素定位方式，甚至有基于坐标的定位方式。通常會使用 DOM 解析的方式來擷取元素。
首先，打開浏覽器，在任意網頁中按快捷鍵 F12 打開開發者工具，在 element 标簽中能看到網頁的源代碼。任何網頁元素，不管是連接配接，按鈕還是輸入框，都由一個個 HTML 标簽組成。 标簽包含了标簽名、屬性、文本、嵌套子标簽等組成部分。
定位元素時，就是根據這些組成部分的特征來查找元素。比如想定位一個輸入框：
那麼可以作為定位依據的特征有标簽名 input、size 屬性、name 屬性、type 屬性等等。 在浏覽器的控制台中，可以輸入
document.getElementsByName
指令擷取到這個元素。
擷取方式可以通過 name 屬性、id 屬性，class 屬性等等。
本篇所有示例都使用同一個網址，你可以直接打開進行練習。 網址：https://petstore.octoperf.com
為什麼要用 xpath
上面這些方式都是通過單個屬性定位定位元素，一旦元素中沒有這些屬性，方法就失效了。還有就是在一個網頁中，使用同一個屬性值可能找出來多個元素，不夠精準。
xpath 和 css 選擇器都能提供更精準的元素定位服務。他們可以組合多個屬性和特征，進一步篩選元素的範圍，直到找到唯一的那個元素。
在浏覽器中如何編寫 xpath
在浏覽器中調試xpath。
第一種方式是在開發者工具中按 ctrl + f，輸入 xpath 表達式後可以通過上下箭頭檢視效果。
第二種方式在控制台中輸入
$x("//div")
，更推薦使用，谷歌浏覽器和火狐浏覽器都可以。 輸入 xpath 表達式後，在控制台中直接顯示定位到的元素。在接下來的所有的文法講解中，都可以通過打開浏覽器練習。
核心用法
接下來是使用 xpath 必須掌握的核心知識點，隻要掌握好這些知識點，基本上能定義到想要的元素。
//input[@name='accout'] - // 開頭表示相對路徑， 也可以用 / 開頭表示絕對路徑，一般用相對路徑。
- [] 内表示屬性條件
- [@name=‘accout’] 表示擷取name屬性等于accout 的元素
屬性選擇器
網頁元素的任何屬性都可以用來定位元素，常見的 name 屬性、id 屬性、type 屬性、class 屬性等等。需要注意的是，如果需要用 text 文本定位，則使用 text() 表示。
//input[@type="submit"]
//a[text()="Sign In"] 組合多個屬性
多個屬性之間可以互相組合，進而更精準的定位到想要的元素。組合可以使用 and 連接配接，也可以直接在第一個 [] 後繼續加第二個 []
//a[1 and contains(@href, "FISH")]
//a[1][contains(@href, "FISH")] 索引
當通過表達式取出來多個元素時，可以通過索引指定擷取第幾個。
//div[@id="QuickLinks"]/a[position()=1]
//div[@id="QuickLinks"]/a[position()>3]
//div[@id="QuickLinks"]/a[1]
//div[@id="QuickLinks"]/a[last()] 函數
某些屬性的值很長，用等于符号會讓表達式看起來很長，是以有時候我們可以使用 contains, starts-with 等函數來精簡。
//a[contains(@href, 'FISH')] 通過祖先找後代
//div//input
//div/input
//div/* 通過後代找祖先
//a[.//img[@src="../images/sm_fish.gif"]]
//a[img[@src="../images/sm_fish.gif"]]
//img[@src="../images/sm_fish.gif"]/../.. 軸
基本上以上的操作就可以滿足95%的使用場景了，還有就是同級元素的查找，尤其是像表格、菜單選項這樣的元素經常會用到同級元素。 此時可以使用軸，會更加友善一些。 經常用到的軸有 follow-sibling 和 preceding-sibing。
//div[@id="QuickLinks"]/a[1]/following-sibling::a[1] 直接擷取文本
xpath 也支援直接在表達式内擷取 text 文本。
//div[@id="MenuContent"]/a[2]/text()' 擷取元素的屬性
xpath 也支援直接在表達式内擷取屬性。
$x('//a[text()="Sign In"]/@href') 福利
最後，送一張 xpath 常見用法的高清大圖，下載下傳儲存好，遇到不會的用法直接查一查，非常友善。對本文有任何問題和建議，歡迎私信一起交流。
- 你已經閱讀完本文所有内容。
- 相信你一定是個耐心和踏實的人，也是一個可交的朋友。
- https://en.wikipedia.org/wiki/XPath
- https://developer.mozilla.org/en-US/docs/Web/XPath
- https://devhints.io/xpath