本文首發於：行者AI
目前，在自動化測試的實際應用中，接口自動化測試被廣泛使用，但UI自動化測試也並不會被替代。讓我們看看二者的對比：
- 接口自動化測試是跳過前端界面直接對服務端的測試，執行效率和覆蓋率更高，維護成本更低，整體而言投出產出比更高，因此在項目上的使用更廣泛。
- 而UI自動化測試則是模擬用戶在前端頁面中的操作行為進行測試，雖然在執行過程中易收到其他因素的影響（如電腦卡頓，瀏覽器卡頓，網速等）而導致用例執行失敗，且后期維護成本較高，但是UI自動化測試更貼近用戶使用時的真實情況，也能夠發現一些接口自動化無法發現的bug。
因此，在實際項目的自動化測試中，通常采用以接口自動化為主、系統穩定后通過UI自動化對重點業務流程進行覆蓋的方案。而UI自動化的基礎，就是元素定位。只有完成了元素定位，才可以操作定位到的元素，模擬手工測試進行一系列的頁面交互，比如點擊、輸入等。
1. 常用的元素定位方式
對於web端的UI自動化測試，元素定位通常使用selenium提供的以下8種定位方式：
- id：根據id定位，是最常用的定位方式，因為id具有唯一性，定位准確快捷。
- name：通過元素的【name】屬性定位，會存在不唯一的情況。
- class_name：通過class 屬性名稱進行定位。
- tag_name：通過標簽名定位，一般不建議使用。
- link_text：專用於定位超鏈接元素（即a標簽），需要完全匹配超鏈接的內容。
- partial_link_text：同樣用於定位超鏈接元素，但可以模糊匹配超鏈接的內容。
- xpath：根據元素路徑進行定位，分為絕對路徑和相對路徑，可以定位到所有目標元素。
- css_selector：selenium官方推薦的元素定位方式，比xpath效率更高，但需要掌握一些css基礎。
在實際的項目中，更推薦使用xpath和css定位方式，這兩種可以定位到頁面中的所有元素，使用限制較小。如果對css沒有了解的話，推薦使用xpath的方式，上手更快；如果對css有一定基礎的朋友，更推薦使用css進行元素定位。
接下來，以百度首頁為例，在實際使用中對各種定位方式進行詳細介紹。
2. 元素定位的實際應用
以百度首頁的搜索框為例，介紹id、name、class、tag_name四種元素定位方式。
2.1 id定位
通過id屬性對百度首頁的的輸入框進行定位。
# 通過input標簽的id屬性進行定位
find_element_by_id('su')
2.2 name定位
通過name屬性對百度首頁的輸入框進行定位。
# 通過input標簽的name屬性進行定位
find_element_by_name('wd')
2.3 class_name定位
通過class屬性對百度首頁的輸入框進行定位。
# 通過input標簽的class屬性進行定位
find_element_by_class_name('s_ipt')
2.4 tag_name定位
通過標簽名稱來定位，這種方式很少會使用，因為頁面中的同一個標簽通常都會重復。
# 通過input標簽名進行定位
find_element_by_tag_name('input')
接下來，以頁面底部的“意見反饋”為例，介紹linkText和partialLinkText兩種定位方式。
2.5 linkText定位
通過a標簽的文本信息進行定位，僅用於定位超鏈接a標簽。
# 通過a標簽的文本信息進行定位
find_element_by_link_text('意見反饋')
2.6 partialLinkText定位
通過對a標簽的部分文本信息模糊匹配進行定位。
# 通過對a標簽的部分文本信息模糊匹配進行定位
find_element_by_partial_link_text('反饋')
2.7 xpath定位
xpath定位方式是通過頁面元素的屬性和路徑進行元素定位，理論上可以對頁面中所有的元素精選定位。下面介紹xpath的幾種定位方式。
首先，介紹一下xpath的路徑節點表達式，如圖：
（1） xpath絕對路徑定位
仍已百度首頁的搜索框為例進行介紹。
find_element_by_xpath('/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input')
通常情況下，不會選擇使用xpath絕對路徑進行元素定位，原因有二：一是絕對路徑繁瑣冗長，影響運行速度；二是涉及的層級較多，任何一個層級發生變化都會導致定位失敗，需要重新進行修改，不利於后期維護。
（2） xpath相對路徑和元素屬性結合定位
若目標元素的某個屬性具有唯一性，則可直接對目標元素進行定位；否則，需要在目標元素附近尋找一個具有唯一性的元素，然后通過二者的層級關系進行定位。
接下來，依然以百度首頁的頁面元素為例，對xpath定位的方式舉例說明。
# 通過元素屬性定位百度首頁的搜索框
find_element_by_xpath("//input[@id='su']")
find_element_by_xpath("//input[@name='wd']")
find_element_by_xpath("//input[@class='s_ipt']")
find_element_by_xpath("//input[@autocomplete='off']")
# 通過文本信息定位(和text_link方法不同，不局限於a標簽)
find_element_by_xpath("//a[text()='意見反饋']")
find_element_by_xpath("//span[text()='設置']")
# 通過父級定位子級元素，舉例百度首頁搜索按鈕
find_element_by_xpath("//span[@class='bg s_btn_wr']/input")
# 通過子級定位父級元素，舉例百度首頁百度熱榜的換一換
find_element_by_xpath("//span[text()='換一換']/..")
# 通過contains方法模糊匹配定位，舉例百度首頁搜索按鈕
find_element_by_xpath("//input[contains(@class,'s_btn')]")
find_element_by_xpath("//a[contains(text(),'反饋')]")
（3） 瀏覽器復制xpath
除了上述兩個方法之外，還有一個簡單的方法，就是在瀏覽器的F12開發者工具中找到目標元素，鼠標右鍵進行復制即可，如下圖。
但復制的xpath路徑可能會很冗長，還是推薦大家根據需求自己寫目標元素的xpath路徑。
2.8 css_selector定位
（1） css定位簡介
css_selector定位（下文簡稱css定位），它的定位方式，利用選擇器進行的。在CSS 中，選擇器是一種模式，用於選擇需要添加樣式的對象。通過css進行元素定位，理論上也是可以定位到頁面中的所有元素的。
和xpath相比，css的語法更簡潔、定位速度更快，但是css的語法比xpath較為復雜一些，相對難記。
（2） css定位實例
下面，仍以百度首頁搜索框為例，對css定位方式舉例說明。
# 通過id定位，id名前加#
find_element_by_css_selector("#kw")
# 通過class定位，class名前加.
find_element_by_css_selector(".s_ipt")
# 通過標簽定位
find_element_by_css_selector("input")
# 通過其它屬性定位
find_element_by_css_selector("[name='wd']")
# 標簽和屬性組合定位
find_element_by_css_selector("input#kw")
find_element_by_css_selector("input.s_ipt")
find_element_by_css_selector("input[name='wd']")
find_element_by_css_selector("[name='wd'][autocomplete='off']")
# 通過父級定位子級元素
find_element_by_css_selector("from#form>span[@class='bg s_ipt_wr']>input")
3. 小結
以上，就是selenium的各種元素定位方法的簡單介紹。項目的實際使用中，在定位方法的選擇上，比較推薦大家采用“id > name > xpath/css > 其它”的順序進行選擇。
雖然UI自動化測試沒有接口自動化測試使用廣泛，但也是自動化測試中不可獲取的一部分，希望本文能對學習UI自動化的小伙伴產生一定的幫助。
PS：更多技術干貨，快關注【公眾號 | xingzhe_ai】，與行者一起討論吧！