《手把手教你》系列技巧篇（二十）-java+ selenium自動化測試-元素定位大法之終卷（詳細教程）

2021 年 8 月 25 日
筆記
java+selenium自動化測試

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，還是能幫我們省下很多時間的！

Tags: java+selenium自動化測試