元素定位方法

?

?

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

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

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

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

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

?

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

按照在以往項目經(jīng)驗中，按照優(yōu)先使用的優(yōu)先級順序排序

定位方法	定位方式	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表達式’)”)	?

?

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

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

?

[NH(1]?

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

?

?

?

?

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

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

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

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

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

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

XPath 路徑表達式

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

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

?

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

?

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

?

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

?

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

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

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

?

?

?

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

?

?

?

常用xpath表達式的使用例子

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

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

//input? 同上

//div/input 查找div節(jié)點下的子節(jié)點input標簽元素

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

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

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

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

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

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

?

Xpath常用函數(shù)的表達式例子

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

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

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

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

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

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

XPath 軸

?

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

?

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

?

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

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

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

任務目標：

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

---

?[NH(1]

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

總結

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

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