元素定位方法

?

?

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

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

對操作對象進(jìn)行操作，比如：點(diǎn)擊、輸入、回車等。

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

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

?

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

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

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

?

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

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

?

[NH(1]?

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

?

?

?

?

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

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

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

2．????????? 通過xpath表達(dá)式定位

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

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

XPath 路徑表達(dá)式

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

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

?

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

?

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

?

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

?

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

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

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

?

?

?

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

?

?

?

常用xpath表達(dá)式的使用例子

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

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

//input? 同上

//div/input 查找div節(jié)點(diǎn)下的子節(jié)點(diǎn)input標(biāo)簽元素

//div//input 查找div節(jié)點(diǎn)下所有節(jié)點(diǎn)的input標(biāo)簽元素，參考前兩個表達(dá)式

//div/input/.? .表示當(dāng)前節(jié)點(diǎn)，所以可以理解為//div/input

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

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

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

//input[1]? 查找html頁面中的一個input標(biāo)簽

?

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

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

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

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

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

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

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

XPath 軸

?

軸可定義相對于當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)集。請結(jié)合下面xpath軸關(guān)鍵字的解釋以及樹結(jié)構(gòu)理解示例的xpath表達(dá)式

?

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

?

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

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

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

任務(wù)目標(biāo)：

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

---

?[NH(1]

轉(zhuǎn)載于:https://www.cnblogs.com/hylinux/p/7444478.html

總結(jié)

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

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