前言：最近在做基於RF框架的Web自動化測試，其中涉及到元素的定位，主要用到id、name、xpath、css四中定位方法，尤其后面的兩種方法特別有效，可以解決大部分的定位問題。
id和name定位
假設把一個元素看做是一個人的話，那么name就相當於人的姓名、id近似於人的身份證號；當然，id和name的屬性值是否唯一是需要看前端工程師是怎么進行設計的。
這里我們使用大家常用的百度首頁輸入框和搜索按鈕進行驗證：
html源碼：
1 輸入框： 2 <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off"> 3 搜索按鈕： 4 <input type="submit" id="su" value="百度一下" class="bg s_btn">
輸入框：
如上，百度輸入框有id和name兩個屬性，我們可以取id或者name進行定位。（前提條件是id和name屬性的值在頁面上是唯一的）
如果我們想在百度搜索框中輸入"秦朗的天空",在Robotframework中我們的代碼可以這樣寫：
其中1和2是或的關系，任選一個都可以。
搜索按鈕：
百度的搜索按鈕只有id一個屬性，因此我們只能通過id來定位並點擊按鈕，在Robotframework中代碼如下：
XPATH定位
如果一個人沒有身份證也沒有名字，你也不知道他的電話，但是你知道他的家庭住址為武漢市洪山區xxx街xx小區xx層xx單元xx號，假設你想找他出去蹦迪恰巧他也在家，那是不是可以通過家庭住址直接去找到他的人呢？同樣在前端Web元素定位中我們的xpath就是通過"家庭住址"這種層級關系找到元素的。
百度輸入框在整個頁面的位置：
1 <html> 2 <head> 3 <body link="#0000cc"> 4 <div id="wrapper" style="display: block;"> 5 <div id="debug" style="display:block;position:absolute;top:30px;right:30px;border:1px solid;padding:5px 10px;"></div> 6 <div id="u"> 7 <div id="head"> 8 <div id="content" style="display: block;"> 9 <div id="u1" style="display: block;"> 10 <div id="m"> 11 <p id="lg"> 12 <p id="nv"> 13 <div id="fm"> 14 <form id="form1" class="fm" action="/s" name="f1"> 15 <span class="bg s_ipt_wr"> 16 <input id="kw" class="s_ipt" type="text" maxlength="100" name="wd" autocomplete="off">
1、xpath絕對路徑
Xpath = /html/body/div[1]/div[4]/div[2]/div/form/span[1]/input
絕對路徑是從整個頁面的頂端開始尋找，html下的body下的div下的第四個div下的第二個div下的div下的form下的第一個span下的input標簽，通過一層一層的定位到元素。
2、xpath相對路徑
由於使用絕對路徑對前端頁面的架構要求較高，只要前端工程師隨意改動一個標簽的位置，通過絕對路徑定位就定位不到，因此我們可以使用相對路徑來定位。
2.1通過元素屬性
xpath可以通過元素自身的屬性進行定位：
Xpath = //*[@id="kw"]
解析：//是層級通配符表示某個層級下；*是標簽名通配符表示某個標簽名；@id=kw表示定位的這個元素有個id=kw。
當然這里我們也可以指定標簽名來定位：
xpath = //input[@id="kw"]
元素的屬性並不只局限於id以及name，也可以是type、class、autocomplete等，但是必須要保證這個元素的屬性值是唯一的。
這里我們也可以通過autocomplete屬性來定位：
Xpath = //input[@autocomplete="off"]
2.2通過上級元素
可以這樣去理解，打個比方說，你的朋友又想找你蹦迪，恰巧又找不到你的人，那他可以通過什么途徑來找呢，是不是可以通過找你爸媽來找你？（當然這里這是打個比方，如果現實中真的這樣，估計你會被你爸媽打死），實際上我們的xpath也可以這樣通過上級元素來定位。
依舊拿百度的輸入框來舉例：
上級元素： <form id="form" name="f" action="/s" class="fm"> <span class="bg s_ipt_wr quickdelete-wrap"> 輸入框： <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
找上層：
xpath = //span[@class="bg s_ipt_wr quickdelete-wrap"]/input
如果上層沒有唯一的屬性值可以找上上層：
xpath = //form[@id="form"]/span/input
如果還沒有的話就往更上一層查找，知道html，那么這樣就是一個絕對路徑了。
2.3通過布爾運算
若一個人的名字不是唯一、身份證號不是唯一，但是名字和身份證號兩個加起來可以確認一個人的身份，同樣我們xpath定位也可以這么玩，通過布爾運算來定位：
依舊舉例百度輸入框：
1 輸入框： 2 <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
這里主要運用到布爾運算中的and，or的實際意義不大：
xpath = //input[@id="kw"and@name="wd"]
CSS定位
css定位相對於上面的幾種定位方式來看更靈活，因為它用到更多的匹配符，類似於正則表達式。
注：在 CSS 中，選擇器是一種模式，用於選擇需要添加樣式的元素。
下面來看看常用的一些CSS選擇器：
| 選擇器 |
例子 |
例子描述 |
| .intro |
選擇 class="intro" 的所有元素。 |
|
| #firstname |
選擇 id="firstname" 的所有元素。 |
|
| * |
選擇所有元素。 |
|
| p |
選擇所有 <p> 元素。 |
|
| div,p |
選擇所有 <div> 元素和所有 <p> 元素。 |
|
| div p |
選擇 <div> 元素內部的所有 <p> 元素。 |
|
| div>p |
選擇父元素為 <div> 元素的所有 <p> 元素。 |
|
| div+p |
選擇緊接在 <div> 元素之后的所有 <p> 元素。 |
|
| [target] |
選擇帶有 target 屬性所有元素。 |
|
| [target=_blank] |
選擇 target="_blank" 的所有元素。 |
|
| [title~=flower] |
選擇 title 屬性包含單詞 "flower" 的所有元素。 |
|
| [lang|=en] |
選擇 lang 屬性值以 "en" 開頭的所有元素。 |
這里我們還是拿百度輸入框來做實驗：
1 上級元素： 2 <form id="form" name="f" action="/s" class="fm"> 3 <span class="bg s_ipt_wr quickdelete-wrap"> 4 輸入框： 5 <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
1.id定位
css = #kw
2.class定位
css = .s_ipt
3.其他屬性定位
css = [name=wd]
css = [autocomplete=off]
4.層級定位
css = span>input
css = form>span>input
5.標簽定位
css = input
以上只是舉例了部分css定位方式，實際情況下同一個元素根據css的不同規則可以有幾十種，甚至幾百種寫法。
總結：
元素的定位方法遠遠不止以上這些，據不完全統計元素定位方法有18種，但是萬變不離其中，大部分是根據這四類進行衍生。在日常工作中，主要掌握好以上幾種方法，根據實際情況進行選擇；css相對於xpath來說定位速度更快更靈活，比較強大，但是學習成本比xpath成本更高，因此根據個人的特點和喜好，xpath和css必須學好其中的任意一個，方能開展自動化測試。