前言
在實施UI自動化測試時，我們往往會花很多工作在元素定位這個環(huán)節(jié)，能夠準確和靈活的捕捉到頁面或端的元素時實施UI自動化測試的重要前提，故接下來我會通過幾篇文章來介紹元素定位和調(diào)試的一些方式，包括PCWeb，H5，Android，IOS以及PC桌面應(yīng)用端
本文主要簡單介紹一下在開展UI自動化測試工作中PCWeb和H5等頁面型前端的元素定位的一些方法
前端常用定位
-
在前端測試當中，我們一般用到以下的元素定位方式
定位方法 -
其實從上面的定位方式我們可以分成兩類，一類是通過相對固定的屬性值，一類就是通過層級路徑，通過屬性值比較好理解，以id為例子，元素有id這個屬性，通過對應(yīng)的屬性值就能得到對應(yīng)的元素，如百度的輸入框
百度輸入框 屬性值定位方式其實不是非常通用，我們在獲取頁面元素時，往往元素沒有id或name等屬性，同時如class和linktext這種類型會出現(xiàn)重復(fù)多個元素滿足條件的情況，這個時候通過層級方式的定位，能夠更加靈活且準確的捕獲到各種頁面元素，下面來將一下如何使用cssselector和xpath兩種定位方式以及其調(diào)試方法
層級方式的元素定位
針對前端的元素定位，基本上主流的瀏覽器都有提供相應(yīng)的定位工具，以下以chrome瀏覽器為例
以百度首頁為例，如搜索輸入框，我們選中后點擊鼠標右鍵，然后點擊檢查按鈕
這時候會打開開發(fā)者工具的Elements,會默認選中元素對應(yīng)的html代碼
然后繼續(xù)點擊鼠標右鍵，打開右鍵菜單后選擇Copy選擇，在Copy會看到Copy selector和Copy Xpath兩項
- 其中Copy selector就是針對CSS的元素定位方式，Copy Xpath則為Xpath定位方式，這兩種定位方式是在前端元素定位中最常用的兩種，本文也主要說這兩種定位方式
CSS定位方式
通過獲取class屬性來定位
-
將鼠標移動到元素附近，右鍵點擊檢查，就可以打開控制臺頁面元素頁
微信開放平臺定位.gif 通過Copy selector獲取到對應(yīng)的元素路徑，再開到Console選項，在Console輸入$('獲取到的元素路徑')，如下圖中獲取到的css路徑為
body > div.head > div.head_box > div > ul > li:nth-child(2)
#則在console輸入
$('body > div.head > div.head_box > div > ul > li:nth-child(2)')
在console輸入并正常返回對應(yīng)元素之后，通過檢查確實是否能夠定位到元素，點擊返回的輸出內(nèi)容即可
css定位兼容id定位方式
css也兼容擁有id屬性的元素定位，如下圖
- image
定位百度首頁的輸入框，使用Copy selector獲取css值，獲取之后輸入到Console進行定位檢查
- image
Copy selector得到的值為#kw，所以我們在Console輸入$('#kw') , 如果能正常出現(xiàn)返回值，那證明有定位到元素，在展開直接點擊對應(yīng)的信息，能夠定位到原來的元素即說明定位搜索輸入框成功
從獲取到的CSS路徑為#kw，可見CSS定位方式是兼容Id的定位方式的，即如果元素的id=abc，用CSS的話可以表示為css=#abc
css定位的血緣關(guān)系
- css定位的原理就是通過上級class屬性關(guān)聯(lián)下級class屬性逐層找到元素，上下級class屬性就像父子關(guān)系一樣，當然我們除了通過父子關(guān)系，爺孫關(guān)系，祖宗關(guān)系都是可以找到對應(yīng)的元素了，有點抽象，舉個例子，如上面微信開放平臺的css值
父子關(guān)系：body > div.head > div.head_box > div > ul > li:nth-child(2)
改成爺孫關(guān)系的話，就是不要中間的一些層級，如
爺孫關(guān)系：body > div.head > div.head_box li:nth-child(2)
-
對比可以見我們卻掉了> div > ul >這一部分，明顯的區(qū)別是父子關(guān)系是通過>號去關(guān)系，而爺孫之間就直接通過空格來關(guān)聯(lián)，同樣的，我們也嘗試定位一下
微信開放平臺定位3.gif 可見還是能夠找到對應(yīng)元素的，其實這樣的好處是，當一個元素藏得很深，復(fù)制出來的css路徑非常長，但同時會帶來只要里面的一個class屬性有小變動，整個css路徑都會失效，所以這樣簡化的方式更利于我們?nèi)粘Ｔ谧詣踊瘻y試用例時的維護，當然也不是百利無害，簡化的方式就像一種相對的方法，這樣會比較容易出現(xiàn)多個相同定位的元素，但這個時候就得提到css定位中的兄弟關(guān)系
-
像這種場景就會給我們返回很多相同css定位的元素 如圖所示，但我們在自動化測試的時候往往需要準確地定位到某一個元素，顯然這樣不是我們所期望的
微信元素 為了解決這個問題，我們上面的定位最后的一部分li:nth-child(2) ,nth-child選擇器其實是找css樣式元素兄弟的一種方法，也就是同級查找，輸入值n就是匹配父元素中的第 n 個子元素，當有l(wèi)ist樣式或selecor樣式以及多個a標簽樣式的時候，就是出現(xiàn)多個元素使用的樣式是一樣的，他們之間就像兄弟一樣，有大哥有小老弟，這時就是通過列表的形式幫這幾個相同的元素排序，如上圖資源中心這個元素其實是頭部幾個標簽的第2個元素
nth-child選擇器方式是正序的匹配，也就是從哥哥到弟弟，當然也可以反過來從弟弟到哥哥，也就是倒序匹配，可以使用nth-last-child選擇器方式，如要找到最小的那個弟弟，也就是最后的一個元素，則為nth-last-child(1),如
body > div.head > div.head_box li:nth-last-child(1)
-
微信元素定位2
這樣我們就能找到倒數(shù)第一的問題反饋這個元素，正序倒序都會有他們的使用場景，相同樣式元素間的同級查詢匹配就是這種方式，尤其可見css定位的強大之處
Xpath定位方式
- 獲取的操作和css差不多，通過檢查打開控制臺元素頁面后使用Copy Xpath獲取到對應(yīng)的元素路徑，如資源中心的xpath路徑
xpath:/html/body/div[1]/div[2]/div/ul/li[2]
再開到Console選項，在Console輸入$x('獲取到的元素路徑')，如下圖中定位資源中心的元素
- 從xpath路徑中可以看到，xpath通過標簽的層級，屬性和索引來匹配元素，如div[1]這種表達的是第一個div標簽，li[2]表達第二個li標簽，這種就是索引
- xpath也是能夠兼容id屬性的方式，除了之外所有的屬性值方式都可以兼容，比如id屬性的，如下圖中的
//*[@id="kw"]
-
image
或者是通過class屬性定位百度一下按鈕,如
//input[@class='btn self-btn bg s_btn']
- 百度定位1.gif
- 同樣能正常出現(xiàn)返回值，那證明有定位到元素，在展開直接點擊對應(yīng)的信息，能夠定位到對應(yīng)元素
Xpath定位高級玩法
- 除了上述常用的方式以外，xpath還有更高級的定位玩法，比如
屬性的邏輯運算
- 為了更加精準的定位，可以使用多個屬性值，如百度的搜索輸入框，通過且邏輯進行定位：
//input[@class='s_ipt' and @name='wd']
使用或邏輯
//input[@class='s_ipt' or @name='wd']
- image.png
屬性的模糊匹配
- 模糊匹配可以使用contains和starts-with這兩種選擇器
使用contains：//input[contains(@class,'s_i')] #匹配所有具備class屬性以及class包含"s_i"的元素
- image.png
使用starts-with：//input[starts-with(@class,'s')]#匹配所有具備class屬性以及class值以"s"開頭的元素
- xpath定位的方法還有很多,總結(jié)來說xpath就是通過層級+屬性+索引的方式來定位到元素，雖然xpath定位的方法有很多，但帶來的問題是變量也會變多，當我們的頁面發(fā)生改變的時候，xpath的變動往往是最大的，穩(wěn)定性相對css來說沒那么好，但會比xpath更加多樣化
代碼示例
- 以python+selenium為例，在代碼中的編寫如下：
- 同理其他的按屬性定位方式基本上都是把屬性值填入到自動化用例里面的方法參數(shù)值就好，以selenium+python為例
#屬性值定位方法
driver.find_element_by_id("testid") #id定位
driver.find_element_by_name("testname") #name定位
driver.find_element_by_class_name("soutu-btn") #class定位
driver.find_element_by_tag_name("input") #tag定位
driver.find_element_by_link_text("點我跳轉(zhuǎn)")#link定位
driver.find_element_by_partial_link_text("忘記") #partial link定位
#層級定位方法
driver.find_element_by_xpath("http://input[contains(@class,'s_i')]")#xpath定位
driver.find_element_by_css_selector("body > div.head > div.head_box li:nth-child(2)")
小結(jié)
- 元素定位是UI自動化測試的核心前提和基礎(chǔ)，沒有好的定位就寫不出好的自動化測試用例，故通過本文，希望對大家在實施UI自動化測試元素定位的過程中提供到幫助，后面我會繼續(xù)分享關(guān)于android和iOS等端的一些元素定位方式，請繼續(xù)關(guān)注，謝謝
