一、WEB控制元件定位是什麼
要想弄懂這個問題，我們還是基於實踐來學習。我們先來看一條入門級別自動化測試用例的構成。
DemoCase:正確使用者名稱和密碼登入部落格園，登入成功
URL：
https://account.cnblogs.com/signin
編寫思路（入門級別）
1、開啟谷歌瀏覽器
2、開啟部落格園登入網頁地址
3、在使用者名稱輸入框內輸入使用者名稱
4、在密碼輸入框內輸入密碼
5、點選登入
6、檢測是否跳轉到了登入成功的頁面
指令碼如下圖:
現在我們來分解下輸入使用者名稱這個動作
1、首先找到使用者名稱輸入框
2、在輸入框中輸入使用者名稱
【找到使用者名稱輸入框】實現此步驟的前提就是需要掌握控制元件的定位。具體在指令碼中實現也就是圖中的第11行：
('//*[@autocomplete="username"]')
WEB控制元件定位所做的事情，就是通過特定的方式找到我們需要操作的頁面控制元件
那麼如何才能學會這個控制元件定位呢？第一步就是簡單瞭解下前端的語言。和我一起往下看即可輕鬆學會。
二、WEB網頁文字—HTML5
要想掌握WEB自動化測試的控制元件定位，我們首選要了解控制元件是什麼。
控制元件就是瀏覽器展示的前端語言生成物件。
web前端的基礎語言就是HTML5
依舊是老套路，拿部落格園舉例：
使用者開啟瀏覽器，看到的使用者名稱輸入框、密碼輸入框、登陸按鈕、立即註冊等等所有，都是瀏覽器展示的HTML5語言的物件。
我們按下F12鍵即可開啟瀏覽器的除錯模式，來檢視網頁的HTML5原始碼。
如下圖：
按下F12後右邊頁面中Elements選項對應的就是網頁的html5程式碼
第一次接觸肯定覺得非常晦澀難懂、雲裡霧裡。但是相信我，萬事開頭難！你在看我自動化測試思維的文章以前不也是覺得自動化測試非常高大上嗎?
不瞭解什麼是自動化測試思維？可以看博主的另一篇文章
HTML5一個控制元件的寫法一般是2個尖括號成對出現。
一、第一個尖括號的第一個單次為控制元件型別，之後是控制元件屬性。
二、第二個尖括號表示此控制元件的尾部。
三、2個尖括號中間為控制元件在前端顯示的文字部分。
舉例說明的話。控制元件型別是狗的型別（中華田園犬、哈巴狗、牧羊犬等），控制元件屬性就是這條狗的名字、性別、體重、毛髮顏色等。2個尖括號中間的文字，就是你想在此頁面上展示的這個狗的'名字'。
還是拿部落格園的登陸介面舉例來說：
點選'小箭頭'定位控制元件，或者在控制元件處右鍵選中'檢查元素'，即可定位到指定的控制元件
控制元件的原始碼為：
<input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登入使用者名稱 / 郵箱"autocomplete="username"class="mat-input-element mat-form-field-autofill-control ng-tns-c100-5 cdk-text-field-autofill-monitored ng-touched ng-dirty ng-invalid" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false">
input就是控制元件型別
input以外的就都是控制元件屬性
這個輸入框的控制元件屬性有：
_ngcontent-miv-c141=""
matinput=""
formcontrolname="username"
placeholder="登入使用者名稱 / 郵箱"
autocomplete="username"
class="mat-input-element mat-form-field-autofill-control ng-tns-c100-5 cdk-text-field-autofill-monitored ng-touched ng-dirty ng-invalid"
id="mat-input-0"
aria-describedby="mat-error-0"
aria-invalid="true"
aria-required="false"
三、基於控制元件的唯一控制元件屬性定位
瞭解了什麼是控制元件，現在我們在上手控制元件的定位。
selenium有八種定位控制元件的方式，有6種都是基於HTML5原生控制元件的單一控制元件屬性來定位的。
id定位：
find_element_by_id()
name定位：
find_element_by_name()
class定位：
find_element_by_class_name()
tag定位：
find_element_by_tag_name()
link定位：
find_element_by_link_text()
partial_link定位：
find_element_by_partial_link_text()
以下兩種為特定的2種控制元件定位方法，下一篇文章再做詳解。
xpath定位：find_element_by_xpath()CSS定位：find_element_by_css_selector()
下面我將舉例來講解這6種基於單一控制元件屬性的定位方法。
還是拿部落格園的登陸介面舉例來說：
登陸使用者名稱的輸入框的HTML5原始碼為：
<input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登入使用者名稱 / 郵箱"autocomplete="username"class="mat-input-element mat-form-field-autofill-control ng-tns-c100-5 cdk-text-field-autofill-monitored ng-touched ng-dirty ng-invalid" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false">
這個輸入框的控制元件屬性有：
_ngcontent-miv-c141=""
matinput=""
formcontrolname="username"
placeholder="登入使用者名稱 / 郵箱"
autocomplete="username"
class="mat-input-element mat-form-field-autofill-control ng-tns-c100-5 cdk-text-field-autofill-monitored ng-touched ng-dirty ng-invalid"
id="mat-input-0"
aria-describedby="mat-error-0"
aria-invalid="true"
aria-required="false"
對應的定位方法：
id屬性來定位此控制元件
寫法為：
find_element_by_id(mat-input-0)
name屬性來定位此控制元件
此控制元件前端開發沒有定義name屬性，則無法使用此定位方法
tag屬性來定位此控制元件（控制元件的型別）
寫法為：
find_element_by_tag_name('input')
class屬性來定位此控制元件
寫法為：
find_element_by_class_name(mat-input-0)
另外兩種定位是針對link屬性的控制元件，也就是連結控制元件。如下圖：
依舊是老老路。使用部落格園登陸頁舉例：
【立即註冊】就是頁面中的一個link控制元件，其作用就是跳轉到註冊頁面。
<a _ngcontent-arq-c141="" class="ng-tns-c141-2" href="/signup?returnUrl=https:%2F%2Fwww.cnblogs.com%2F">立即註冊</a>
他的控制元件屬性有class="ng-tns-c141-2"
link定位(通過link控制元件的文字值)
find_element_by_link_text('立即註冊')
但是部分頁面會存在，link的文字值非常長，所以就發明了partial_link定位。
如下圖中的百度文庫的某一頁面：
link的文字值為：全國2018年10月04741計算機網路原理真題以及答案解析
定位的指令碼就可以寫成：（只取文字的某一段值即可）
find_element_by_link_text('04741計算機網路')
但是這樣的定位方式存在一個致命且常見的問題：
隨著前端的技術不斷的發展，頁面的複雜度越來越高。一個頁面的控制元件越來越多（tag不唯一），id、name、class_name可能有很多重名或者完全是動態的一串字母（id、name、class_name、link_name可能都不唯一），我們基於唯一控制元件屬性定位的在特別複雜的專案上可能完全無法完成UI自動化測試的定位工作。
為了解決上述情況，偉大工程師們又發明了XPATH定位和CSS定位！這兩種定位在現在的前端框架中，幾乎是萬能的定位方法了。但是學會他們的前提，也是需要掌握H5語言的基本的原理，於是有了此文。
本文已超過2400字，由於篇幅限制，將在下一篇文章中詳解這2種定位方法（XPATH定位和CSS定位）。敬請各位觀眾大老爺們期待。
如果你覺得本文對你有用，麻煩給本文點個贊。這是對作者最大的支援與鼓勵，我將繼續輸出更多更有價值的文章。謝謝！
關注博主的微信公眾號，免費獲取更多幹貨！
