Selenium 自動化測試從零實戰
說在前面：達人課是GitChat的一款輕閱讀產品，由特約講師獨家發布。每一個課程你都可獲得6-12篇的深度文章，同時可在讀者圈與講師互動交流。GitChat達人課，讓技術分享更簡單。進入我的GitChat
這裏寫圖片描述
作者簡介
本文作者就職於中科軟科技股份有限公司高級測試工程師-王海寶（勇氣老師），3年以上軟件測試經驗，擅長接口測試、自動化測試，對分布式測試有獨到的見解，擅長測試分析。下面一起看看勇氣老師如何帶大家從零開始。查看原文
課程簡介
本課程註重自動化實踐，同時講解一些基礎的自動化測試理念，以及常用的 Java 思維，以便快速理解並掌握自動化測試體系、掌握自動化測試的基礎核心內容以及自動化框架的整合實現。以“亞馬遜購物流程”為例，著重講解調用被測元素、測試框架 TestNG 的使用，盡量做到讓剛入門自動化的讀者也能感受到自動化的魅力。
導讀：自動化定位解析
寫在前面的話
測試自動化是現在的一種趨勢，更是許多厭倦功能測試想轉型高端測試的測試從業者的迫切需求。關於測試自動化的資料比比皆是，但是雜亂無章，而且好多知識只是一帶而過，並且更多針對 Selenium 這塊的測試以 Python 語言居多，Java 語言很少。其實，Java 語言更加靈活，畢竟面向對象語言中 Java 才是當之無愧的王者。
怎樣良好的整合 Java 知識與 Selenium 完美結合，是本課要講解的內容，同時，會以實際案例來逐步引出 Selenium 的使用。課程主要有以下特色：
（1）內容由淺入深，零基礎自動化人員也能看得懂。
（2）始終以解決實際問題為出發點，通過實際案例引出 Selenium 的相關知識，最大限度的避免課程枯燥，用生動的語言來描述自動化。
（3）細化每個實施的細節，希望講解一個知識點就能徹底的講透，並且會以一種由淺入深的形式進行講解。
說了這麽多，希望讀者閱讀完全部文章後會以最大限度的掌握自動化，並且愛上自動化！好了，下面開始步入正題。
準備工作
“工欲善其事必先利其器”，做自動化也是如此，所以先花一點時間來介紹要準備的工作。
（1）軟件工具準備：JDK 和 Eclipse，搭建 Java 的開發環境，需要註意的是二者的版本必須統一，即 32 位的 JDK 必須對應 32 位的 Eclipse。
（2）框架軟件準備：TestNG
安裝方式有兩種：
help-Eclipse Markplace 市場查找下載安裝。 在 TestNG 官網上下載對應版本的插件，help-Install
new Software 安裝已經下載好的插件。
當然所有的插件安裝都是這兩種方式。
（3）Foxfire（火狐瀏覽器，建議使用 30~32 版本，目前最新的版本兼容性不好且對插件的支持不夠理想）。在火狐瀏覽器裏要下載其插件，必須使用的有：
Firebug+firepath 用來輔助我們進行元素定位。
Selenium IDE 主要用來驗證自動化腳本是不是與實際情況一致。
需要說明的是，Selenium IDE 本身就有用來做簡單 UI 界面錄制回放的功能。
（4）Google Chrome（谷歌瀏覽器），演示的時候可能只調用火狐瀏覽器，但是谷歌瀏覽器是當前 UI 自動化測試的首選，因為其穩定，插件更新快。
（5）必要的 jar 包
log4j-1.2.11.jar，用來支持日誌功能的 jar。
selenium-server-standalone-2.43.1.jar，核心 jar 必須要有。
（6）瀏覽器必要的 driver
谷歌的 chromedriver.exe。
IE 的 IEDriverServer64.exe。
Windows 10 自帶的 Microsoft Edge 的 Microsoft WebDriver。
寫到這裏有可能會問，為什麽需要這麽多的 driver，其實如果只針對一套流程進行自動化操作，只需要操作一個瀏覽器即可，但是如果想用同一個流程驗證不同瀏覽器的兼容性時，那麽需要同時啟動多個瀏覽器，所以提前準備好主流瀏覽器的 driver，對我們的工作來說是非常有必要的。
上面的工作全都完成，在 Eclipse 裏創建一個純凈的自動化工作目錄，將下載好的插件、驅動、jar 都配置好，此時 Eclipse 的工程目錄如下圖所示：
這裏寫圖片描述
其中 files 是新建的目錄，用來存儲各種瀏覽器的驅動。lib 也是新建的目錄，用來存儲各種 jar 包。當然，這兩個文件的名稱都可以自行改變。好了準備工作到此結束，下面進行定位的講解。
定位實戰
- UI 自動化的實質其實就是做下面兩件事情：
- 定位到 Web 界面的被測試元素；
對定位到的元素進行錄入、單擊、雙擊、拖拽、上傳文件、清空等等操作的過程。
請看下面的例子。
（1）打開百度網站的首頁：
這裏寫圖片描述
（2）在輸入框輸入 GitChat：
這裏寫圖片描述
此場景運用自動化的思維解決就是：首先要打開一個瀏覽器 | 在導航欄處輸入百度的網址 | 定位到輸入框 | 鍵盤敲入 GitChat 的過程。操作火狐瀏覽器實現 Java 代碼如下：
package com.test.baidu;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Baidu {
public static void main(String[] args) {
//啟動火狐瀏覽器
WebDriver driver = new FirefoxDriver();
//將導航欄導航到百度首頁
driver.navigate().to("http://www.baidu.com");
//定位到輸入框
WebElement element = driver.findElement(By.id("kw"));
//輸入 GitChat
element.sendKeys("GitChat");
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
這裏重點先講解裏面的定位問題：
WebElement element = driver.findElement(By.id("kw"));
1
定位方式
常用的定位方式如下：
這裏寫圖片描述
這些都是常用的定位方式，有 by.id、by.name、by.cssSelector、by.xpath 等等。其中除了 by.cssSelector、by.xpath 外，其他的 by 後面的 id、name、link Text 等指的是 HTML 標記語言中頁簽內的屬性內容，如百度輸入框的 HTML 源代碼如下：
<span class="bg s_ipt_wr quickdelete-wrap ipthover">
<span class="soutu-btn"/>
<input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd"/>
<a id="quickdelete" class="quickdelete" href="javascript:;" title="清空" style="top: 0px; right: 0px; display: none;"/>
</span>
1
2
3
4
5
這段代碼裏的 class、id 就是屬性。所以針對百度輸入框我們使用的是其 id 的屬性。
xpath 定位
首先要明白為什麽使用 xpath 定位，它的好處有如下幾個方面：
方便維護
定位準確
推薦以後大家無論任何被測試對象都采用 xpath 定位的方式
其次需要了解 xpath 常用符號說明，常用的符號及含義如下所示：
- /：表示絕對路徑，絕對路徑是指從跟目錄開始
- //：表示相對路徑
- .：表示當前層
- ..：表示上一層
- *：表示通配符
- @：表示屬性
- []：屬性的判斷條件表達式
最後運用上面的符號結合 xapth 的相關語法進行定位演示。
演示場景
任找一個 HTML 網頁進行定位實戰，按照頁面代碼結構逐級定位得出的結果解釋如下，希望通過下面的逐級定位內容能理解相對路徑、HTML 的層級結構。
（1）/html/div：沒有節點可以被選擇，因為 / 代表絕對路徑，本定位表示的是 HTML 下一級目錄的元素，很明顯 HTML 的下一級是 head 和 body，所以本寫法無法定位到任何元素。
（2）/html//div：選中 HTML 標簽中的所有 div 元素，// 相對路徑。就完全等價於 //div 的寫法。
（3）//div/div 表示所選擇的 div 元素下又包含 div 元素的所有元素。此時完全等價於 //div/div/. 的寫法。
（4）//div/div/..：表示 //div/div 定義到的上一層 div 上。
（5）//div/div/*：此時會將 div 下的子節點含有 div 的這層節點下的所有元素都匹配到。
（6）//div[@id=”input”]：此時表示在 div 目錄下選擇一個 id=input 的子節點。
and 與 or 連接符在 xpath 中的使用
and 的使用：此種定位的應用場景為下圖所示：
這裏寫圖片描述
此種場景的 HTML 編碼為：
<td class="widgetStyle">
<div id="radio">
<input class="Volvo" type="radio" name="identity"/>
<label>Volvo</label>
<br/>
<input class="Saab" type="radio" name="identity"/>
<label>Saab</label>
<br/>
<input class="Opel" type="radio" name="identity"/>
<label>Opel</label>
<br/>
<input class="Audi" type="radio" name="identity"/>
<label>Audi</label>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
此時我們想定位到 Saab 怎麽寫呢？（當然也可以不使用 and 連接符進行書寫）書寫為：//input[@class=”Saab” and @name=”identity”]，當然若寫成 //input[@class=”Saab”] 肯定也不會有問題。
or 的使用：如果定位到 Saab 或者定位到 Opel，此時書寫方式為：//input[@class=”Saab” or @class=”Opel”]。
定位順序（從1開始切記）
現在學習第二種方式，比如定位 Saab。可以這樣寫：//input@name=’identity’，同理定位 Volvo，//input@name=’identity’（這就是一開始強調的，這種寫法必須從 1 開始編號）。
定位 Opel，寫成：//input@name=’identity’
定位 Audi，寫成：//input@name=’identity’
常用函數
Xpath 定位還可以使用一些函數，常用的函數如下：
（1）contains(www.huachenguoj.com )：包含。若要匹配出 Saab 還可以這樣寫：//input[@name=”identity” and contains(@class,’S’)]
（2）text()：一個節點的文本值。舉個例子，這裏面籃字顯示的英文結果，HTML 代碼為：
<a target="_self" href="/s?rsv_idx=1&wd=111&usm=3&ie=utf-8&sl_lang=en&rsv_www.mayiyule158.cn srlang=en&rsv_rq=en&rqlang=cn">英文結果</a>
1
可見這四個字沒有任何屬性值信息，所以定位此信息的時候需要使用 text() 函數。場景如下圖所示：
這裏寫圖片描述
此時定位英文結果即可使用：//a[text()=”英文結果”]
（3）last()函數，定位 Audi 寫成 //input@name=’identity’，可以看到 Audi 這個元素本身就處於 input 最後一個了，此時可以使用 last() 函數進行匹配：//input[@name=”identity”][last()]。
（4）starts-with：以 starts-with 為開頭寫法實例：//input[starts-with(@id,’user’)]代表 input 下 id 以 user 為開頭的元素。
（5）not()：表示否定，一般情況下會與返回值為 true 或者 false 的函數組合起來使用。比如上面提到的 contains() 與 starts-with。
用實例來說：現在想要定位到不是 Audi 車除外的三種車元素，此時寫法為：//input[@name=”identity” and not (contains(@class,’A’))]。
當然 not() 還有一種特殊用法就是直接 Not。//input[not(@class)] 表示匹配出 input 下所有不含 class 屬性的元素。
總結：唯一需要註意的是所有函數的寫法 function(@屬性,’內容’)。
Xpath 軸定位說明
（1）基本軸
軸可以在位置路徑中快捷引用特定的節點（忽略屬性和名稱空間節點）。child 例子：
"child::*"
當前節點的子節點。
"child::childnodename"
當前節點名為childnodename的子節點。
"child::text()"
當前節點文本子節點。
"child::node()"
當前節點的子節點。
"child::*/www.huachenguoj.com child::nodename"
取當前節點的子節點的名為nodename的子節點。
（2）特殊軸
self 當前節點
descendant 當前節點的後代（子節點或子節點的子節點…）
parent 當前節點的父節點
ancestor 當前節點的祖先節點（父節點和父節點的父節點…）
preceding 按文檔順序位於當前節點之前的非祖先節點
attribute 當前節點的屬性
namespace 當前節點的名稱空間
preceding-sibling 當前節點之前的所有兄弟節點
following 當前節點之後的所有節點
following-sibling 當前節點之後的所有兄弟節點
descendant-or-self 當前節點和後代節點
ancestor-or-self 當前節點和祖先節點
以上的兩種軸類型，沒什麽好說的，先記住吧。具體怎麽用請看下面實例。
第一個實例：繼續定位上述中的 Volvo，使用 xpath 軸書寫如下：//div[@id=”radio”]/descendant::input1 也可以定位到。
第二個實例：定義 Audi 上的所有節點，使用 xpath 軸寫法如下：//input[@name=”identity” and @class=”Audi”]/preceding-sibling::*
（3）需要註意的幾個問題。
[] 後面需要跟 /，/ 後面在加上關鍵字。
軸關鍵字後面必須使用 ::，這個後面可以接節點名稱，如 input、div 等。如果後面跟的是 *，代表全部。
軸後面接節點名稱是節點前面的定位方式全部可以繼續適用。
對於軸的使用建議是能不用就不用，條條大路通羅馬，沒必要非使用軸進行定位。
cssSelector 定位
了解即可，能用 xpath 就不用 cssSelector。原因很簡單，HTML 的代碼我們更熟悉。
CSS 常用符號說明
#表示 id
.表示class
: 表示子元素，層級
值得註意的是：一個空格也表示子元素，但是所有的後代子元素，就相當於 xpath 中的相對路徑。
想知道所有的 CSS 屬性建議搜索其他資料學習下。
最後請記住定位沒有最好，只有是否合適。選擇最合適的定位方法，就能使得定位變得得心應手。
Selenium 自動化測試從零實戰