1.簡介
這篇文章主要是對前邊的文章中的一些總結和拓展。本來是不打算寫著一篇的,但是由於前後文章定位元素的時間有點長,怕大家忘記了,就在這裡簡單做一個總結和拓展。
2.Selenium八種定位方式
Selenium官方網站在使用教程中說到,定位方式有8種,分別是class name、css selector、id、name、link text、partial link text、tag name、xpath。
方法 | 語法 | 描述 |
---|---|---|
id | driver.findElement(By.id(String id)) | 使用頁面元素的id屬性 |
name | driver.findElement(By.name(String name)) | 使用頁面元素的name屬性 |
className | driver.findElement(By.className(String class)) | 使用頁面元素的類名屬性 |
tagName | driver.findElement(By.tagName(String tag)) | 使用頁面元素的HTML的標籤名屬性 |
linkText | driver.findElement(By.linkText(String text)) | 使用頁面連結元素的文字屬性(全部對應文字內容) |
partialLinkText | driver.findElement(By.partialLinkText(String text)) | 使用頁面連結元素的文字屬性(包含部分文字內容) |
xpath | driver.findElement(By.xpath(String xpath) | 使用xpath定位 |
cssSelector | driver.findElement(By.cssSelector(String css)) | 使用CSS選擇器定位 |
3.定位遵循原則
我們在選擇使用定位方法的時候,建議遵循以下原則
1.若id和name在html中是唯一的,則優先使用這2種。
2.使用css或xpath,他們都很靈活,但語法複雜。Xpath效能應該是最慢的。
3.link text、partial link text缺點在於只對連線元素起作用。
4.class name不支援複合類名的元素。
5.tag name是危險的方法,因為一個頁面上有很多相同標籤的元素。
若某種方法定位到多個元素,則會返回第一個元素。
4.元素定位除錯
4.1IDE自帶除錯
這種方法比較麻煩,也比較low,巨集哥不推薦。
釋:
- 可以不輸入,使用“select”點選元素定位,然後用“find”檢視是否可定位。
- 也可以自己輸入自己定位的方法,點選“find”檢視是否可定位。
4.2chrome控制檯除錯
chrome自帶功能,可生成xpath及css的元素定位值,如圖但是,這種生成的很繁瑣,一般不採用。這種方法主要適合一些小白,或者為了省事直接一複製一貼上就可以了。巨集哥前邊也提到過。
4.3js定位除錯
console裡面執行javascript程式碼,操作dom物件。
每個載入瀏覽器的 HTML 文件都會成為 Document 物件。Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。
通過id獲取
document.getElementById(“id”)
通過name獲取
document.getElementsByName(“Name”) 返回的是list
通過標籤名選取元素
document.getElementsByTagName(“tag”)
通過CLASS類選取元素
document.getElementsByClassName(“class”)
相容性:IE8及其以下版本的瀏覽器未實現getElementsByClassName方法
通過CSS選擇器選取元素
document.querySelectorAll(“css selector")
相容性:IE8及其以下版本的瀏覽器只支援CSS2標準的選擇器語法
例項:
1.控制檯輸入:document.getElementById("kw"); 回車,下邊輸出定位到的元素,滑鼠點選定位到的元素,在網頁檢視是否是我們想要定位的元素,有興趣的可以自己試一下其他的方法。如下圖所示:
4.4書寫除錯
就是直接書寫除錯。
(1)可以自己在控制檯,書寫路徑除錯。
1)xpath除錯:使用$x("")方法,如下圖所示:
2)css除錯:使用$("") 或$$("")方法,如下圖所示:
(2)開啟Chrome瀏覽器,F12開啟開發者工具,然後Ctrl+F調出輸入框,在輸入框中輸入xpath表示式或者css表示式,如下圖所示:
(3)滑鼠置於要定位的元素上->滑鼠右鍵->檢查->Elements->Ctrl+F
5.小結
總共有8種方法,但是在實際的運用中,我們一定要合理使用,按以下方法進行選擇
1.當頁面元素有id和name屬性時,最好儘量用id和name來定位。但由於現實專案程式碼並不規範,沒有這些屬性時,就要選擇其他方法定位。
2.xpath和cssSelector功能很強大,但定位效能並不是太好,所以當有id和name屬性可以定位時就勿用。如果元素用別的方法都無法定位,可以選擇xpath或cssSelector。
3.當要定位一組相同元素時,可以考慮用tagName、className或者name。
4.當需要定位超文字連結時,可以使用linkText或partialLinkText方式。
好了,到此所有定位就講解和分享完了,就要告一段落了,下一篇講解其他知識點。
6.拓展
6.1xpath定位工具
由於目前一些版本的火狐瀏覽器安裝不了firebug和firePath,而有些版本有安裝不了seleuinm Ide,導致做自動化測試需要安裝兩個火狐瀏覽器,一臺機器同時執行兩個火狐又很麻煩,於是想了其他Xpath的定位方法
工具:Chrome瀏覽器
外掛:XPath Helper Chrome
安裝方法:直接去Chrome商店裡搜尋XPath Helper,安裝即可(目前需要FQ,大家可自行找FQ工具)。安裝好外掛並讓外掛處於開啟狀態 ,具體的安裝方法自己百度一下,巨集哥這裡不做介紹了,後期可能巨集哥會在Chrome哪裡講解一下。
使用方法:
1.xpath helper官方文件上介紹的使用方法如下:
開啟視窗後,按shift鍵並移動滑鼠至你需要檢視的區域即可立即在外掛視窗中顯示其程式碼查詢結果。
1)開啟一個新的標籤,並導航到你最喜歡的網頁。
2)按Ctrl-Shift鍵-X以開啟XPath輔助控制檯。
3)按住Shift鍵滑鼠在頁面上的元素。查詢框會不斷更新,以顯示滑鼠指標下面的元素充分XPath查詢。結果框其右側將顯示評價結果的查詢。
4)如果需要的話,可以直接在控制檯編輯XPath查詢。在結果框中將立即反映任何變化。
5)再次按Ctrl-Shift鍵-X關閉控制檯
2.自己手寫在QUERY中輸入xpath表示式,回車定位元素,如下圖所示:
3.XPath Helper Chrome外掛注意事項
雖然XPath Helper外掛使用非常方便,但它也不是萬能的,有兩個問題:
1.XPath Helper 自動提取的 XPath 都是從根路徑開始的,這幾乎必然導致 XPath 過長,不利於維護;
2.當提取迴圈的列表資料時,XPath Helper 是使用的下標來分別提取的列表中的每一條資料,這樣並不適合程式批量處理,還是需要人為修改一些類似於*標記等。不過,合理的使用Xpath,還是能幫我們省下很多時間的!