视频二区国产精品职场同事_日韩精品网站免费进入_最近的中文字幕在线mv视频_波多野A∨无码高清中文_骚虎999在线视频免费观看_欧美视频国产区一区二区_亚洲动作一级片高清无码_久久精品韩国日本国产_丁香花免费高清视频完整版_惠民福利亚洲欧美精品一中文字幕

現(xiàn)在我們來分解下輸入用戶名這個動作

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

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

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

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

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

那么如何才能學(xué)會這個控件定位呢？第一步就是簡單了解下前端的語言。和我一起往下看即可輕松學(xué)會。

二、WEB網(wǎng)頁文本—HTML5

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

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

web前端的基礎(chǔ)語言就是HTML5

拿博客園舉例：

用戶打開瀏覽器，看到的用戶名輸入框、密碼輸入框、登陸按鈕、立即注冊等等所有，都是瀏覽器展示的HTML5語言的對象。

我們按下F12鍵即可打開瀏覽器的調(diào)試模式，來查看網(wǎng)頁的HTML5源代碼。

如下圖：

按下F12后右邊頁面中Elements選項對應(yīng)的就是網(wǎng)頁的html5代碼

第一次接觸肯定覺得非?；逎y懂、云里霧里。但是相信我，萬事開頭難！你在看我自動化測試思維的文章以前不也是覺得自動化測試非常高大上嗎?

HTML5一個控件的寫法一般是2個尖括號成對出現(xiàn)。

一、第一個尖括號的第一個單次為控件類型，之后是控件屬性。

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

三、2個尖括號中間為控件在前端顯示的文字部分。

舉例說明的話?？丶愋褪枪返念愋停ㄖ腥A田園犬、哈巴狗、牧羊犬等），控件屬性就是這條狗的名字、性別、體重、毛發(fā)顏色等。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"

三、基于控件的唯一控件屬性定位

了解了什么是控件，現(xiàn)在我們在上手控件的定位。

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"

對應(yīng)的定位方法：

id屬性來定位此控件

寫法為：

find_element_by_id(mat-input-0)

name屬性來定位此控件

此控件前端開發(fā)沒有定義name屬性，則無法使用此定位方法

tag屬性來定位此控件（控件的類型）

寫法為：

find_element_by_tag_name('input')

class屬性來定位此控件

寫法為：

find_element_by_class_name(mat-input-0)

另外兩種定位是針對link屬性的控件，也就是鏈接控件。如下圖：

依舊是老老路。使用博客園登陸頁舉例：

【立即注冊】就是頁面中的一個link控件，其作用就是跳轉(zhuǎn)到注冊頁面。

<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的文本值非常長，所以就發(fā)明了partial_link定位。

如下圖中的百度文庫的某一頁面：

link的文本值為：全國2018年10月04741計算機網(wǎng)絡(luò)原理真題以及答案解析

定位的腳本就可以寫成：（只取文本的某一段值即可）

find_element_by_link_text('04741計算機網(wǎng)絡(luò)')

但是這樣的定位方式存在一個致命且常見的問題：

隨著前端的技術(shù)不斷的發(fā)展，頁面的復(fù)雜度越來越高。一個頁面的控件越來越多（tag不唯一），id、name、class_name可能有很多重名或者完全是動態(tài)的一串字母（id、name、class_name、link_name可能都不唯一），我們基于唯一控件屬性定位的在特別復(fù)雜的項目上可能完全無法完成UI自動化測試的定位工作。

為了解決上述情況，偉大工程師們又發(fā)明了XPATH定位和CSS定位！這兩種定位在現(xiàn)在的前端框架中，幾乎是萬能的定位方法了。但是學(xué)會他們的前提，也是需要掌握H5語言的基本的原理，于是有了此文。