元素定位方法

?

?

在Web UI自動化測試過程中，通常的要完成測試用例編寫需要進行如下幾步：

找到Web的頁面元素，并把定位路徑保存在一個對象中

對操作對象進行操作，比如：點擊、輸入、回車等。

指定頁面元素操作的值，比如輸入什么，執行某個操作。

所以UI 界面交互的自動化測試就是動作、對象、數值的結合，所以我們要對一個頁面進行操作，必須先找到要操作的對象，如果找不到頁面元素，那么步驟2，步驟3都無法進行。并且在大多數的項目實踐中，由于Web頁面技術的復雜性以及前端的頻繁改動，造成大量的頁面元素很難定位或者變動，造成自動化用例無法編寫或者執行失敗。

?

因為Selenide底層還是Selenium,所以定位方法相同如下：

按照在以往項目經驗中，按照優先使用的優先級順序排序

定位方法	定位方式	Selenide使用方法
使用id定位	Id值	#kw
使用name定位	Name值	byName("password")
使用cssName定位	元素Class屬性的值	.welcome-message
使用xpath定位	Xpath表達式	byXpath("//*[@id='search-results']
使用css定位	Css的表達式	byCssSelector("#kw")
使用鏈接的文字定位	link的全部文字內容	byLinkText("link")
使用標簽名稱定位	Html的標簽名稱	?
使用jquery定位	Js.executeScript(“return jQery.find(‘jquery表達式’)”)	?

?

總結以往的項目經驗，最常用的定位方式為ID/Name/Xpath這三種定位方式就足夠滿足95%以上的元素定位了，所以這里只對這三種方式將一下，其他的可以自我了解并靈活運用在實際工作中。

為了方便練習元素定位，這里簡單寫一個demo供練習使用

?

[NH(1]?

如何查看以及定位網頁元素呢，常見的瀏覽器IE/Chrome/Firefox都提供元素查看的的插件，可以很直觀的看到頁面html結構樹，目前使用最多的是chrome瀏覽器，所以已chrome為例打開上面的demo頁面，找到我們需要定位的元素，然后右擊點開查看元素就可以看到元素的id/name/class屬性，并可以觀察 到html結構

?

?

?

?

我通常情況下要定位一個元素大概分為三步：

1．????????? 通過查找id/name定位

查看元素是否存在id/name屬性，這是比較簡單高效的方法，并且相對于其他定位方式相對穩定，觀察頁面username輸入框可以id定位，值為input，lastname輸入框可以用name定位，值為lastname，如果不存在id/name，則嘗試通過xpath查找

2．????????? 通過xpath表達式定位

什么是Xpath？(取自w3school，如果要了解更多內容，可以去w3school上看看)

XPath 是一門在 XML 文檔中查找信息的語言。XPath 可用來在 XML 文檔中對元素和屬性進行遍歷。

XPath 路徑表達式

XPath 使用路徑表達式來選取 XML 文檔中的節點或者節點集。這些路徑表達式和我們在常規的電腦文件系統中看到的表達式非常相似。

備注：當然也有很多人推薦使用css，原因可能有兩個：1，xpath的查找速度比css慢一些；2，在IE瀏覽器下，css的兼容性比xpath好。當時我覺得xpath比css靈活很多，并且更容易上手。

?

Xpath分為絕對路徑定位以及相對路徑的定位方式，絕對路徑方法從根元素寫起，當元素層級很深的時候，路徑寫的會很長，閱讀性不好，也維護成本高。在非特殊情況下不建議使用(當然我在接觸的項目需求也存在需要絕對路徑處理的特殊場景，后面會在博客補充)，所以也不寫例子了，下面都是都是相對路徑的例子，一步步學習。

?

Xpath是通過路徑表達式來獲取元素節點，下面是常用的路徑表達式符號：

?

表達式	描述
/	表示絕對路徑，從根節點選取。
//	從匹配選擇的當前節點選擇文檔中的節點，而不考慮它們的位置。
.	取當前節點。
..	選取當前節點的父節點。
@	選取屬性
*	表示通配符
[]	屬性的條件表達式

?

通過xpath相對定位方式驗證Username輸入框

表達式為//input[@id=’ input’] 理解為，通過xpath尋找id屬性為input ‘的input元素。

如何驗證xpath是否正確呢？在chrome下非常方便，點擊到查看元素的html節點上按Ctrl+F，則彈出如下搜素框

?

?

?

輸入我們寫好的xpath表達式，觀察結果，在html結構中查找到的元素節點高亮為黃色，在搜索框的右側顯示查找結果的節點總數，可以通過向上/向下查找元素

?

?

?

常用xpath表達式的使用例子

/html/input? 查找html節點下的input標簽元素，注意/代表是絕對路徑

/html//input 查找html節點下所有的input標簽元素，//代表是相對路徑，所有會查找所有的input節點

//input? 同上

//div/input 查找div節點下的子節點input標簽元素

//div//input 查找div節點下所有節點的input標簽元素，參考前兩個表達式

//div/input/.? .表示當前節點，所以可以理解為//div/input

//div/input/.. .. 表示為上層節點，所以可以理解為//div

//input[@id=’ input’] 理解為，通過xpath尋找id屬性為input ‘的input元素

//input[@id=’ input’]/a理解為，通過xpath尋找id屬性為input ‘的input節點下的a標簽元素

//input[1]? 查找html頁面中的一個input標簽

?

Xpath常用函數的表達式例子

//button[starts-with(@class,'button')] 表示class屬性已button開頭的button元素節點，常用于動態生成的class元素定位中

(//button)[last()] 表示頁面最后一個button元素節點

//button[contains(@class,'button')] 表示class屬性包括button字符串的button元素節點

//a[contains(text(),'Google')] 表示元素文本值包含Google字符串的a元素節點，常用于動態生成的class元素定位

這些都是常用的xpath的定位方式，如果還不能解決問題，那么再看看xpath軸

3．????????? 通過xpath軸定位

XPath 軸

?

軸可定義相對于當前節點的節點集。請結合下面xpath軸關鍵字的解釋以及樹結構理解示例的xpath表達式

?

軸名稱	結果
ancestor	選取當前節點的所有先輩（父、祖父等）。
ancestor-or-self	選取當前節點的所有先輩（父、祖父等）以及當前節點本身。
attribute	選取當前節點的所有屬性。
child	選取當前節點的所有子元素。
descendant	選取當前節點的所有后代元素（子、孫等）。
descendant-or-self	選取當前節點的所有后代元素（子、孫等）以及當前節點本身。
following	選取文檔中當前節點的結束標簽之后的所有節點。
namespace	選取當前節點的所有命名空間節點。
parent	選取當前節點的父節點。
preceding	選取文檔中當前節點的開始標簽之前的所有節點。
preceding-sibling	選取當前節點之前的所有同級節點。
self	選取當前節點。

?

???????????????? 常用xpath軸的例子：

表達式示例	表達式解釋
//img[@alt=’div2-img2’]/ancestor::div	查找到alt屬性值為div2-img的圖片，并且基于當圖片位置找到它上級的所有div元素
//div[@name=’div2’]/descendant::img	查找到name屬性值的div頁面上元素，并基于div的位置找到它下級所有節點中的img頁面元素。
//div[@id=‘div1’]//following::img	查找到id屬性值為div1的div元素，并基于div1找到它后面節點中的img元素
//img[@alt=‘div2-img2’]/preceding::div	查找到alt屬性值為div2-img2的img，并基于圖片的位置到找它前面節點中的div頁面元素。
//img[@alt=‘div1-img]/ following-sibling::a	查找到屬性為div1-img的img元素并在它前面的同級節點中查找a標簽元素
//input[@alt=‘div1-input’]/ following-sibling::a	查找到屬性為div1-input的input元素并在它后續同級節點中查找a標簽元素

? 在 UI層的自動化測試用例編寫的時，其實我們大部分時間都在定位元素，并且自動化測試的元素定位一直是困擾自動化測試新手的一個障礙，因為在自動化實施過程中會碰到各式各樣的對象元素，各種前端技術，所以元素的定位方式不至上面提到的這些，我們需要更靈活的調整定位方式。如何提高UI元素的穩定性和可維護性仍然是當前最值得思考的問題。

任務目標：

把上面所有提到的xpath定位表達式在testDemo頁面上練習一遍，并且自己要補充其他定位方式的知識，真的很重要～！

---

?[NH(1]

轉載于:https://www.cnblogs.com/hylinux/p/7444478.html

總結

以上是生活随笔為你收集整理的第三章Selenide测试框架（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。