Robot Framework自動化測試（二）---元素定位

時間 2019-12-09

原文原文鏈接

說明：css

不要誤認爲Robot framework 只是個web UI測試工具，更正確的理解Robot framework是個測試框架，之因此能夠拿來作web UI層的自動化是國爲咱們加入了selenium2的API。好比筆者所處工做中，更多的是拿Robot framework來作數據庫的接口測試，固然，須要先將相關的數據庫包導入。html

那麼測試框架的本質是什麼？我的以爲有如下幾個方面。前端

一、比較web

測試實質就是「比較」，在測試以前須要先寫用例，假設通過各類操做以後會獲得一個預期的結果，而後，在測試的過程當中按照用例的步驟會獲得一個實際的結果，拿實際結果與預期結果比較。從並且進一步判斷用例的成功與失敗。數據庫

二、用例的組織前端工程師

爲何要組職用例，由於用例有不少條，咱們或在一個文件中寫多條用例，或多個文件中寫多條用例，總之要很好的把這些用例組織起，自動化用例是給程序去跑的，因此，更應該規範的組織起來。app

三、執行結果展現框架

用例跑完了，成功了，失敗了？用例執行到哪一步失敗了？總要把這些信息展現給用戶吧。工具

=============學習

回到主題，在Robot framework中元素的定位。

　　由於Robot framework 引入的selenium2 包，因此，假如咱們學過selenium 的話，定位是同樣的。由於沒找到相關資料，因此，通過驗證id 、name ，xpath 、css 四種定位方式是能夠的，尤爲後兩種是「萬能的」，因此能夠解決99%的定位問題。

id 和name 定位

　　假如把一個元素看做一我的的話，id 和name能夠看做一我的的身份證號和姓名。固然，這些屬性值是否惟一要看前端工程師如何設計了。

百度搜索框和搜索按鈕

……
<input id="kw1" class="s_ipt" type="text" maxlength="100" name="wd" autocomplete="off">
……
<input id="su1" class="bg s_btn" type="submit" onmouseout="this.className='bg s_btn'" onmousedown="this.className='bg s_btn s_btn_h'" value="百度一下">
……

根據上面的例子，百度輸入框能夠取id 或 name進行定位。（前提是id和name的值在當頁面上惟一）

id = kw1

name = wd

在Robot framework 中就是這樣寫的：

Input Text	id=kw1	robot framework學習
input text	name=wd	robot framework學習

Input text 用於輸入框的關鍵字，「robot framework學習」是要給輸入框輸入的內容。

百度按鈕只id數據能夠利用：

Id=su1

Click Button

id=su1

Click Button是按鈕點擊的關鍵字。

xpath定位

　　假如，一我的沒身份證號沒名字怎麼找呢？想一想你是怎麼找朋友吃飯的，他手機不通，電話不回呢？直接上他家去唄，那你必定有他家住址，xx市xx區xx路xx號。Xpath 就能夠經過這種層級關係找到元素。

來看看百度輸入框在整個頁面上的位置吧：

<html>
    <head>
    <body link="#0000cc">
    <div id="wrapper" style="display: block;">
        <div id="debug" style="display:block;position:absolute;top:30px;right:30px;border:1px solid;padding:5px 10px;"></div>
        <div id="u">
        <div id="head">
        <div id="content" style="display: block;">
            <div id="u1" style="display: block;">
            <div id="m">
                <p id="lg">
                <p id="nv">
                <div id="fm">
                    <form id="form1" class="fm" action="/s" name="f1">
                        <span class="bg s_ipt_wr">
                            <input id="kw1" class="s_ipt" type="text" maxlength="100" name="wd" autocomplete="off">

一、Xpath的絕對路徑：

Xpath = /html/body/div[1]/div[4]/div[2]/div/form/span[1]/input

咱們能夠從最外層開始找，html下面的body下面的div下面的第4個div下面的....input標籤。經過一級一級的鎖定就找到了想要的元素。

二、Xpath的相對路徑：

絕對路徑的用法每每是在咱們無可奈何的時候才用的。大多時候用相對路徑更簡便。

2.1、元素自己：

Xpath一樣能夠利用元素自身的屬性：

Xpath = //*[@id=’kw1’]

//表示某個層級下，*表示某個標籤名。@id=kw1 表示這個元素有個id等於kw1 。

固然，通常也能夠制定標籤名：

Xpath = //input[@id=’kw1’]

元素自己，能夠利用的屬性就不僅侷限爲於id和name ，如：

Xpath = //input[@type=’text’]

Xpath = //input[@autocomplete=’off’]

但要保證這些元素能夠惟一的識別一個元素。

2.2、找上級：

　　當咱們要找的一我的是個剛出生的嬰兒，還沒起名子也沒有入戶口（身份證號），可是你會永遠跟在你父親的身邊，你的父親是有惟一的名字和身份證號的，這樣咱們能夠先找到你父親，天然就找到你的。

元素的上級屬性爲：

<form id="form1" class="fm" action="/s" name="f1">
　　<span class="bg s_ipt_wr">
　　　　<input id="kw1" class="s_ipt" type="text" maxlength="100" name="wd" autocomplete="off">

找爸爸：

xpath = //span[@class=’bg s_ipt_w’]/input

若是爸爸沒有惟一的屬性，能夠找爺爺：

xpath = //form[@id=’form1’]/span/input

這樣一級一級找上去，直到html ，那麼就是一個絕對路徑了。

2.3、布爾值寫法：

　　若是一我的的姓名不是惟一的，身份證號也不是惟一的，可是同時叫張三而且身份證號爲123 的人卻能夠惟一的肯定一我的。那麼能夠這樣寫：

Xpath = //input[@id=’kw1’ and @name=’wd’]

能夠and ，固然也能夠or :

Xpath = //input[@id=’kw1’ or @name=’wd’]

但or的實際意義不太。咱們通常不須要說，找的人名字或者叫張三，或者身份證號是123 也能夠。

Robot framework 中的寫法：

Input Text

xpath = //*[@id=’kw1’]

robot framework學習

input text

xpath = //span[@class=’bg s_ipt_w’]/input

robot framework學習

input text

xpath = //input[@id=’kw1’ and @name=’wd’]

robot framework學習

CSS定位

　　Css的定位更靈活，由於他它用到的更多的匹配符和規格。

http://www.w3school.com.cn/cssref/css_selectors.asp

選擇器	例子	例子描述
.class	.intro	選擇 class="intro" 的全部元素。
#id	#firstname	選擇 id="firstname" 的全部元素。
*	*	選擇全部元素。
element	p	選擇全部 <p> 元素。
element,element	div,p	選擇全部 <div> 元素和全部 <p> 元素。
element element	div p	選擇 <div> 元素內部的全部 <p> 元素。
element>element	div>p	選擇父元素爲 <div> 元素的全部 <p> 元素。
element+element	div+p	選擇緊接在 <div> 元素以後的全部 <p> 元素。
[attribute]	[target]	選擇帶有 target 屬性全部元素。
[attribute=value]	[target=_blank]	選擇 target="_blank" 的全部元素。
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的全部元素。
[attribute\|=value]	[lang\|=en]	選擇 lang 屬性值以 "en" 開頭的全部元素。

一樣以百度輸入框的代碼，咱們來看看CSS如何定位。

<form id="form1" class="fm" action="/s" name="f1">
　　<span class="bg s_ipt_wr">
　　　　<input id="kw1" class="s_ipt" type="text" maxlength="100" name="wd" autocomplete="off">