skyoo61

一般Web UI怎么測(cè)試它們運(yùn)行是不是正確呢？例如說按下某個(gè)按鈕后，是不是跑出我們預(yù)期的結(jié)果?答案其實(shí)很簡(jiǎn)單，找?guī)讉€(gè)人來試就可以了。

的確大部分的Web應(yīng)用程序開發(fā)團(tuán)隊(duì)如果不是工程師自己測(cè)試UI，就是讓實(shí)習(xí)生或者讓負(fù)責(zé)這個(gè)程序的策劃來測(cè)試。但大家也都明白，這樣的測(cè)試真的是非常花時(shí)間，所以大部分的測(cè)試都是只做到70%或者80%就交給客戶了。

而如果今天在策劃里又加入了新功能，不確定會(huì)不會(huì)影響現(xiàn)在系統(tǒng)的執(zhí)行，或者是想對(duì)系統(tǒng)程序進(jìn)行重構(gòu)的話，我們都必須再一次開啟瀏覽器來驗(yàn)證原有的功能是否還是正確執(zhí)行。假設(shè)頁(yè)面操作的步驟很繁鎖時(shí)，那么這樣的測(cè)試可能就會(huì)要了測(cè)試人員的小命。

其實(shí)如果可以讓UI測(cè)試這件事自動(dòng)化不是很好嗎？也就是說如果我們能把頁(yè)面操作流程以及預(yù)期它會(huì)出現(xiàn)的結(jié)果編寫成測(cè)試代碼的話，就可以減少花費(fèi)在測(cè)試人力的成本了。

Selenium 就是這樣概念下誕生的一套測(cè)試框架，它最大的特色就是[直接用真實(shí)的瀏覽器來為我們測(cè)試頁(yè)面上的UI]。換句話說，我們建立的測(cè)試是真的可以反映出瀏覽器操作時(shí)的狀況，當(dāng)然其中也包含JavaScript!

注：不過頁(yè)面偏了幾個(gè)pixels這個(gè)問題，就是Selenium能勝任的工作了。

接下來就是我簡(jiǎn)略研究心得，如果有錯(cuò)誤之處，還望大家指正。

Selenium IDE

既然Selenium 是以真實(shí)的瀏覽器做為測(cè)試工具，那么我們?cè)撊绾谓y(cè)試案例呢？因此Selenium就提供了一個(gè)名稱Selenium IDE的工具來協(xié)助透過瀏覽器來建立測(cè)試案例。

目前Selenium IDE 是透過 Firefox 的 Add-on 機(jī)制來實(shí)現(xiàn)，也就是說目前只能用在Firefox或能夠安裝Firefox Add-on的瀏覽器上。不過它所產(chǎn)生出來的Script就不一定只有Firefox才能執(zhí)行了。我們之后可以指定其他類型的瀏覽器來測(cè)試。

建立與執(zhí)行Test Case

首先先以Firefox 打開Selenium的下載頁(yè)面，下載并安裝最新的Selenium IDE。完成后就可以在上方的工具菜單[工具 > Selenium IDE]打開如下圖的Selenium IDE窗口：

詳細(xì)的Selenium IDE界面介紹可以參考官方手冊(cè)的IDE Features,這里簡(jiǎn)單介紹怎么通過Selenium IDE錄制測(cè)試。

首先查看右上角的紅色錄制按鈕是否正在錄制中，如果是的話，就先按下它以停止錄制。接著在左方的[Untitled]上按下右鍵，選擇[Properties...]后出現(xiàn)下圖：

在這里我們可以為稍后要錄制的Test Case命名，這里先將Title的名稱改為 [WebTest]。

現(xiàn)在按下右上解的紅色錄制按鈕，Selenium IDE就會(huì)開始幫我們記錄下我們操作頁(yè)面的步驟。

現(xiàn)在我們以 Clicki 登錄為測(cè)試，首先切換回Firefox瀏覽器，接著打開 Clicki 登錄頁(yè)面，并輸入帳號(hào)和密碼：

按下[登錄]鍵，并出現(xiàn)登錄成功或失敗結(jié)果，這時(shí)我們可以選取預(yù)期會(huì)出現(xiàn)的提示，然后按下右鍵，在右鍵菜單中選擇驗(yàn)證的方式：

在右鍵菜單下方會(huì)出現(xiàn)幾個(gè)常用的驗(yàn)證方式，我們也可以在[Show All Available Commands]的子菜單中看到所有的可用驗(yàn)證指令。這些指令的意義可以參考官方手冊(cè)的 Selenium Commands章節(jié)，這里就不再詳細(xì)介紹。

動(dòng)作完成之后，切換回Selenium IDE 并按下紅色錄制按鈕以停止錄制。這時(shí)我們就可以看到在Table選項(xiàng)里已經(jīng)有我們剛剛所進(jìn)行的步驟：

那么現(xiàn)在來測(cè)試一下剛剛錄制的結(jié)果，按下綠色三角型的[執(zhí)行]鍵，應(yīng)該就能看到瀏覽器自動(dòng)執(zhí)行了剛剛的步驟。

而結(jié)果驗(yàn)證無誤時(shí)，上面的畫面就會(huì)出來全都是綠色的執(zhí)行結(jié)果。

按照這個(gè)方式，我們可以同時(shí)建立多組Test Case，并將它們存成HTML，供后續(xù)測(cè)試用。每個(gè)Test Case都會(huì)被存成一個(gè)HTML，最后才用一個(gè)Test Suite的HTML將所有的Test Case HTML包含進(jìn)來。

除了存為HTML之外，我們也可以將這些Test Case輸出為可以執(zhí)行的代碼，讓支持該程序語言的測(cè)試框架可以執(zhí)行,以達(dá)到完全自動(dòng)化的效果。

導(dǎo)出其它格式的Script

一般來說，在用Selenium IDE錄制好Test Case后，我們會(huì)希望它能夠自動(dòng)化執(zhí)行，因?yàn)檗D(zhuǎn)換成測(cè)試用的程序是可行的方法之一。另外一個(gè)用程序語言的優(yōu)點(diǎn)是，我們可以在測(cè)試中加入流程邏輯、錯(cuò)誤處理以及資料庫(kù)整合等等，這些都是Selenium IDE所無法完成的。

Selenium IDE 支持了多種程序語言格式的輸出，我們只要在工具菜單的[Options > Format]子菜單中，就可以看到多種程序語言的格式。

當(dāng)然這里我就選擇了PHP，Selenium IDE就會(huì)自動(dòng)幫我們轉(zhuǎn)換為PHPUnit可以執(zhí)行的Test Case代碼：

然后我們把Source復(fù)制下來，新建一個(gè)空白文件中，保存為 WebTest.php：

<?php
require_once 'PHPUnit/Extensions/SeleniumTestCase.php';
class Example extends PHPUnit_Extensions_SeleniumTestCase
{
  protected function setUp()
  {
    $this->setBrowser("*chrome");
    $this->setBrowserUrl("http://change-this-to-the-site-you-are-testing/");
  }
  public function testMyTestCase()
  {
    $this->open("/login.html");
    $this->type("LoginForm_email", "test@clicki.cn");

    $this->type("LoginForm_password", "123456");

$this->click("userSubmit"); $this->waitForPageToLoad("30000"); $this->assertTrue($this->isTextPresent("郵箱不存在,請(qǐng)先注冊(cè).")); } } ?>

不過在生成的Script中，網(wǎng)址的部分似乎還有Bug，因?yàn)樗粫?huì)改寫為我們目前要測(cè)試的網(wǎng)址。所以請(qǐng)把：

$this->setBrowserUrl("http://change-this-to-the-site-you-are-testing/");

改為：

$this->setBrowserUrl("http://www.clicki.cn");

另外我們也可以在工具菜單上選擇[文件 > Export Test Case As]來另存為其他格式的文件。

注：關(guān)于PHPUnit 整合 Selenium 的說明，可以參考 PHPUnit 官方手冊(cè)的 PHPUnit and Selenium 章節(jié)。

每個(gè)Test Case都可以按照這些方式來生成可以用PHPUnit測(cè)試的PHP代碼，然后將它們放在測(cè)試目錄中。

不過在使用PHPUnit來執(zhí)行這些Test Case時(shí)，它們要怎么啟動(dòng)瀏覽器來測(cè)試呢？這就得靠以下所要介紹的Selenium RC服務(wù)器來輔助了。

Selenium RC

在通過PHPUnit或其他xUnit來執(zhí)行我們建立的Test Case測(cè)試時(shí)，必須要能夠啟動(dòng)瀏覽器來測(cè)試，這個(gè)工作就要交給Selenium RC Server來幫我們代勞了。由于Selenium RC Server是用Java所開發(fā)的，
所以不限制執(zhí)行的平臺(tái)，只要這些平臺(tái)能夠啟動(dòng)瀏覽器代測(cè)試即可。

請(qǐng)按照以下步驟安裝與執(zhí)行Selenium RC Server：

1. 下載Selenium RC(selenium-remote-control-1.0.x.zip)。
2. 解壓，將selenium-server-1.0.x 解壓至某一目錄，并改名為Selenium-server。
3. 在Windows下，將Firefox(或其他瀏覽器)的執(zhí)行腳本所在的路徑加入Path系統(tǒng)環(huán)境變量中。
4. 在命令行模式下執(zhí)行[java -jar /path/to/selenium-server.jar]，啟動(dòng)Selenium RC Server。
完成后應(yīng)該就會(huì)出現(xiàn)下圖所示的結(jié)果了：

接下來重新打開一個(gè)命令行窗口，以phpunit指令來測(cè)試我們的Test Case:

注：在此之前，請(qǐng)先確認(rèn)已經(jīng)安裝好PHPUnit 3，請(qǐng)參考PHPUnit官方手冊(cè)的Installing PHPUnit章節(jié)。

在執(zhí)行測(cè)試的過程中，你應(yīng)該會(huì)看到Selenium RC Server自動(dòng)啟動(dòng)了我們的Firefox瀏覽器，然后進(jìn)行先前我們建制的測(cè)試。

如果你有注意到我們?cè)赥est Case里指定的瀏覽器是[ *chrome ]，但Selenium RC Server啟動(dòng)的卻是Firefox，請(qǐng)別太驚訝。這是國(guó)為 [ *chrome ]在這里用來執(zhí)行一個(gè)特別模式的Firefox,跟Google的Chrome無關(guān)。如果需要用Google Chrome的話，就要改用 [ *googlechrome ]。

注：由于我本身對(duì)Selenium RC也是剛剛?cè)腴T，所以許多功能還在摸索中；因此如果想了解更多有關(guān)Selenium RC的特性的話，可以參考官方手冊(cè)或者評(píng)論討論。

心得與想法

以下是我在研究Selenium時(shí)的一些想法，或者從前輩那里聽來的一些經(jīng)驗(yàn)，供大家參考學(xué)習(xí)。

用設(shè)計(jì)樣版建立測(cè)試

在策劃初期，我們常常都會(huì)先拿到設(shè)計(jì)人員完成的HTML樣版，這些樣版通常已經(jīng)會(huì)設(shè)定好連接或者表單顯示的結(jié)果(當(dāng)然是靜態(tài)數(shù)據(jù)）；這么做的目的當(dāng)然是為了讓客戶了解網(wǎng)站執(zhí)行的流程，也可以修正是否有不順暢的問題。

當(dāng)客戶確認(rèn)之后，或許我們就可以利用這些樣版，通過Selenium IDE來生成Test Case；這樣一來就可以省下一些上線前所要花費(fèi)用來測(cè)試UI的人力。

注：不過也因?yàn)橛袝r(shí)樣版做得太好，客戶以為離上線時(shí)間不遠(yuǎn)，然后工程師的惡夢(mèng)就開始了。而且還要小心在程序開發(fā)期間，客戶突然對(duì)界面不滿意的狀況發(fā)生。

安排夜間測(cè)試

通常執(zhí)行Selenium測(cè)試是很花時(shí)間及機(jī)器性能的，因?yàn)闉g覽器要不停啟動(dòng)、關(guān)閉、啟動(dòng)、關(guān)閉，這樣一來就有可能耗掉程序員使用的機(jī)器開發(fā)的時(shí)間。

因此如果能將測(cè)試全部先寫好，然后安排在下班后的夜間來做測(cè)試，應(yīng)該會(huì)是一個(gè)比較好的解決方式。當(dāng)然如果發(fā)現(xiàn)問題，也可以依賴Selenium RC Server的記錄來檢查。

當(dāng)然是否要利用這樣的模式來做Selenium測(cè)試，還是要看各位實(shí)際的狀況與開發(fā)經(jīng)驗(yàn)，這些想法就供大家參考。

相關(guān)參考文章

目前網(wǎng)上能找到許多不錯(cuò)的Selenium文章，介紹了更多Selenium的有趣特色：

Selenium IDE – 測(cè)試，原來也可以這么輕松

Selenium IDE 的一些心得

Selenium tutorial/overview

How to run Google Chrome with Selenium RC?

以 Apache proxy 與 rewrite modules 解決 Selenium Core 的運(yùn)行限制

A patch of isEditable of Selenium Core 0.83