1.1 id 和name 定位
Web頁面都是由許多標簽和元素組成的,每個標簽或元素都是很多屬性,好比一個人 id 和name 可以看作一個人的身份證號和姓名。下面看下教育局招生系統的用戶名輸入框的標簽id 和name屬性值。
<input id="txtUserName" class="form-control account-input" type="text" required="" name="account" autofocus="" placeholder="請輸入帳號" autocomplete="off"/>
根據上面的例子,百度輸入框可以取id 或name 進行定位。(前提是id 和name 的值在當頁面上唯一)。
id = txtUserName
name = account
在Robot framework 中代碼實現:
1.2 Link 定位
Link定位就是根據元素的文本信息進行定位。
項目例子:
代碼實現:
1.3 xpath 定位
XPath 是一種在XML 文檔中定位元素的語言。因為HTML 可以看做XML 的一種實現,所以selenium用戶可是使用這種強大語言在web 應用中定位元素。
假如,一個人沒身份證號沒名字怎么找呢?想想你是怎么找朋友吃飯的,他手機不通,電話不回呢?直接上他家去唄,那你一定有他家住址,xx 市xx 區xx 路xx 號。xpath 就可以通過這種層級關系找到元素。
4.2.1 xpath 的絕對路徑
1、xpath 的絕對路徑:
xpath = /html/body/div[1]/div[4]/div[2]/div/form/span[1]/input
我們可以從最外層開始找,html 下面的body 下面的div 下面的第4 個div 下面的....input 標簽。通過一級一級的鎖定就找到了想要的元素。
4.2.2 xpath 的相對路徑
絕對路徑易讀性很差,而且很容易受頁面某一元素的調整而失效,絕對路徑的用法往往是在我們迫不得已的時候才用的。大多時候用相對路徑更簡便。相對路徑的定位有多種方法。
一)元素本身
Xpath 同樣可以利用元素自身的屬性:
Xpath = //*[@id=’ txtUserName’]
//表示某個層級下,*表示某個標簽名。@id= txtUserName 表示這個元素有個id 等於txtUserName 。
當然,一般也可以制定標簽名:
Xpath = //input[@id=’ txtUserName’]
元素本身,可以利用的屬性就不只局限為於id 和name ,如:
Xpath = //input[@type=’text’]
Xpath = //input[@autocomplete=’off’]
但要保證這些元素可以唯一的識別一個元素。
項目例子:
代碼實現:
二)通過找上級
當我們要找的一個人是個剛出生的嬰兒,還沒起名子也沒有入戶口(身份證號),但是你會永遠跟在你父親的身邊,你的父親是有唯一的名字和身份證號的,這樣我們可以先找到你父親,自然就找到你的。
元素的上級屬性為:
代碼實現:
xpath = //div[@class=’ mar’]/input
如果爸爸沒有唯一的屬性,可以找爺爺:
xpath = //form[@id=’ loginForm’]/div[2]/input
這樣一級一級找上去,直到html ,那么就是一個絕對路徑了。
三)布爾值寫法:
如果一個人的姓名不是唯一的,身份證號也不是唯一的,但是同時叫張三並且身份證號為123 的人卻可以唯一的確定一個人。那么可以這樣寫:
Xpath = //input[@id=’ txtUserName’ and @name=’ account’]
可以and ,當然也可以or :
Xpath = //input[@id=’ txtUserName’ or @name=’ account’]
但or 的實際意義不太。我們一般不需要說,找的人名字或者叫張三,或者身份證號是123 也可以。
1.4 css 定位
CSS(Cascading Style Sheets)是一種語言,它被用來描述HTML 和XML 文檔的表現。CSS 使用選擇器來為頁面元素綁定屬性。這些選擇器可以被selenium 用作另外的定位策略。
CSS 可以比較靈活選擇控件的任意屬性,一般情況下定位速度要比XPath 快,但對於初學者來說比較難以學習使用,下面我們就詳細的介紹CSS 的語法與使用。
CSS 選擇器的常見語法:
選擇器 |
例子 |
描述 |
* |
* |
class 選擇器,選擇class="intro"的所有元素 |
.class |
.intro |
選擇所有元素 |
#id |
#firstname |
id 選擇器,選擇所有id="firstname"所有元素 |
element |
p |
元素所有<p>元素 |
element > element |
div > input |
選擇父元素為<div> 元素的所有<input> 元素 |
element + element |
div + input |
選擇緊接在<div> 元素之后的所有<p> 元素 |
[attribute=value] |
[target=_blank] |
選擇target="_blank" 的所有元素 |
通過class 屬性定位:
css=. mar
css=. form-signin
csscss_selector()方法用於CSS 語言定位元素,點號(.)表示通過class 屬性來定位元素。
通過id 屬性定位:
css=#kw
css=#su
井號(#)表示通過id 屬性來定位元素。
通過標簽名定位:
css=input
在CSS 語言中用標簽名定位元素不需要任何符號標識,直接使用標簽名即可,但我們前面已經了解到標簽名重復的概率非常大,所以通過這種方式很難唯一的標識一個元素。
通過父子關系定位:
css=span>input
上面的寫法表示有父親元素,它的標簽名叫span,查找它的所有標簽名叫input 的子元素。
通過屬性定位:
css=input[autocomplete='off']
css=input[maxlength='100']
css=input[type='submit']
在CSS 當中也可以使用元素的任意屬性,只要這些屬性可以唯一的標識這個元素。
組合定位:
我們當然可以把上面的定位策略組合起來使用,這樣就大大加強了元素的唯一性。
css=span. form-signin>input. mar
css=span. form-signin>input# txtUserName
有一個父元素,它的標簽名叫span,它有一個class 屬性值叫form-signin,它有一個子元素,標簽名叫input,並且這個子元素的class 屬性值叫mar。好吧!我們要找的就是具有這么多特征的一個子元素。
項目例子:
代碼實現: