【WEB自動化測試之控件定位】基於HTML5控件的惟一控件屬性定位

  1、WEB控件定位是什麼

 

要想弄懂這個問題，咱們仍是基於實踐來學習。咱們先來看一條入門級別自動化測試用例的構成。

 

DemoCase:正確用戶名和密碼登陸博客園，登陸成功

URL：

https://account.cnblogs.com/signin

編寫思路（入門級別）

一、打開谷歌瀏覽器

二、打開博客園登陸網頁地址

三、在用戶名輸入框內輸入用戶名

四、在密碼輸入框內輸入密碼

五、點擊登陸

六、檢測是否跳轉到了登陸成功的頁面

 

腳本以下圖:

 

 

如今咱們來分解下輸入用戶名這個動做

一、首先找到用戶名輸入框

二、在輸入框中輸入用戶名

 

【找到用戶名輸入框】實現此步驟的前提就是須要掌握控件的定位。具體在腳本中實現也就是圖中的第11行：

('//*[@autocomplete="username"]')

 

WEB控件定位所作的事情，就是經過特定的方式找到咱們須要操做的頁面控件

 

那麼如何才能學會這個控件定位呢？第一步就是簡單瞭解下前端的語言。和我一塊兒往下看便可輕鬆學會。

 

 

2、WEB網頁文本—HTML5

 

要想掌握WEB自動化測試的控件定位，咱們首選要了解控件是什麼。

控件就是瀏覽器展現的前端語言生成對象。

web前端的基礎語言就是HTML5

依舊是老套路，拿博客園舉例：

 

 

 

用戶打開瀏覽器，看到的用戶名輸入框、密碼輸入框、登錄按鈕、當即註冊等等全部，都是瀏覽器展現的HTML5語言的對象。

咱們按下F12鍵便可打開瀏覽器的調試模式，來查看網頁的HTML5源代碼。

以下圖：

按下F12後右邊頁面中Elements選項對應的就是網頁的html5代碼

 

第一次接觸確定以爲很是晦澀難懂、雲裏霧裏。可是相信我，萬事開頭難！你在看我自動化測試思惟的文章之前不也是以爲自動化測試很是高大上嗎?

不瞭解什麼是自動化測試思惟？能夠看博主的另外一篇文章

 

 

 

 

HTML5一個控件的寫法通常是2個尖括號成對出現。

1、第一個尖括號的第一個單次爲控件類型，以後是控件屬性。

2、第二個尖括號表示此控件的尾部。

3、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"

 

 

3、基於控件的惟一控件屬性定位

 

瞭解了什麼是控件，如今咱們在上手控件的定位。

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定位）。敬請各位觀衆大老爺們期待。

 

 

 

若是你以爲本文對你有用，麻煩給本文點個贊。這是對做者最大的支持與鼓勵，我將繼續輸出更多更有價值的文章。謝謝！

 

 

關注博主的微信公衆號，免費獲取更多幹貨！