摘要：測(cè)試框架通常提供測(cè)試驅(qū)動(dòng)開(kāi)發(fā)或行為驅(qū)動(dòng)開(kāi)發(fā)的測(cè)試語(yǔ)法來(lái)編寫測(cè)試用例。利用上面的工具基本上就可以開(kāi)始進(jìn)行測(cè)試腳本的測(cè)試工作了。下面一篇文章就會(huì)介紹如何使用來(lái)對(duì)應(yīng)用進(jìn)行測(cè)試。

單元測(cè)試：

以模塊為單元，測(cè)試你代碼的本身，確保你編寫的模塊還有邏輯正確。只要輸入的值不變，輸出的值也應(yīng)該不發(fā)生改變

前端自動(dòng)化測(cè)試：

界面回歸測(cè)試 測(cè)試界面是否正常，包括文案，圖片等。

功能測(cè)試 包括交互邏輯和功能模塊是否符合預(yù)期。

性能測(cè)試 頁(yè)面性能越來(lái)越受到關(guān)注，并且性能需要在開(kāi)發(fā)過(guò)程中持續(xù)關(guān)注，否則很容易隨著業(yè)務(wù)迭代而下降。

本文主要的內(nèi)容集中在界面回歸測(cè)試和功能測(cè)試。這2部分的測(cè)試工作是通過(guò)模擬用戶進(jìn)行頁(yè)面操作，通過(guò)查看頁(yè)面狀態(tài)的變化，從而檢測(cè)功能是否運(yùn)行正常：它的測(cè)試流程是：

DOM元素選取

觸發(fā)DOM元素綁定事件

查看綁定事件結(jié)果是否符號(hào)預(yù)期

要完成前端UI自動(dòng)化測(cè)試至少需要測(cè)試框架，斷言庫(kù)。

PhantomJS.包含了WebKit瀏覽器引擎和JavaScript API的腳本解釋器，因此可以去運(yùn)行js代碼。只不過(guò)不提供圖形界面，其他的功能都和瀏覽器一樣。比如一些爬蟲爬了網(wǎng)站，這個(gè)網(wǎng)站并不是靜態(tài)的，那么需要執(zhí)行Js才行。因此PhantomJS提供了執(zhí)行頁(yè)面中的代碼功能。

casperjs.基于PhantomJS進(jìn)行開(kāi)發(fā)，提供的功能也和PhantomJS，不過(guò)語(yǔ)法更加簡(jiǎn)練。不像PhantomJS callback hell那樣惡心。同時(shí)和PhantomJS不同的地方還在于它直接提供了測(cè)試的功能，比如對(duì)遠(yuǎn)程DOM的斷言測(cè)試，還能編寫功能測(cè)試套件。具體的API文檔參見(jiàn)casperjs的官網(wǎng)。

    casper.start("http://www.google.fr/", function() {                                          //打開(kāi)谷歌主頁(yè),添加頁(yè)面加載完成時(shí)的回調(diào)函數(shù)
    this.test.assertTitle("Google", "google homepage title is the one expected");           //檢測(cè)頁(yè)面標(biāo)題是否是"Google",如果是,輸出第二個(gè)參數(shù)指定的字符串
    this.test.assertExists("form[action="/search"]", "main form is found");                 //檢測(cè)頁(yè)面中是否存在選擇器指定的元素,如果存在輸出第二個(gè)參數(shù)指定的字符串
    this.fill("form[action="/search"]", {                                                   //填充表單并提交,執(zhí)行搜索操作
        q: "foo"
    }, true);
});

casper.then(function() {
    this.test.assertTitle("foo - Recherche Google", "google title is ok");                  //檢測(cè)搜索結(jié)果頁(yè)的頁(yè)面標(biāo)題是否正確    
    this.test.assertUrlMatch(/q=foo/, "search term has been submitted");                    //檢測(cè)搜索結(jié)果頁(yè)的網(wǎng)址是否匹配指定的正則表達(dá)式
    this.test.assertEval(function() {
        return __utils__.findAll("h3.r").length >= 10;                                      //自定義一個(gè)檢測(cè)函數(shù)
    }, "google search for "foo" retrieves 10 or more results");
});

casper.run(function() {
    this.test.renderResults(true);                                                          //輸出檢測(cè)結(jié)果
});

nightwatch (簡(jiǎn)單的語(yǔ)法，可以快速上手使用強(qiáng)大的 Selenium WebDriver API 來(lái)在 DOM 元素上執(zhí)行命令和斷言)

    module.exports = {
  "Demo test Google" : function (client) {
    client
      .url("http://www.google.com")
      .waitForElementVisible("body", 1000)
      .assert.title("Google")
      .assert.visible("input[type=text]")
      .setValue("input[type=text]", "rembrandt van rijn")
      .waitForElementVisible("button[name=btnG]", 1000)
      .click("button[name=btnG]")
      .pause(1000)
      .assert.containsText("ol#rso li:first-child",
        "Rembrandt - Wikipedia")
      .end();
  }
};

nightmare.js 基于phatomJS為測(cè)試封裝的的一套High level Api(非常的語(yǔ)義化：click, refresh, goto...).同時(shí)nightmare還基于electron，那么它也提供了GUI的界面工具，當(dāng)你使用nightmare.js進(jìn)行自動(dòng)化測(cè)試的時(shí)候就可以看到所有的模擬用戶動(dòng)作了。

yield Nightmare()
  .goto("http://yahoo.com")
  .type("input[title="Search"]", "github nightmare")
  .click(".searchsubmit");

protractor angular的親兒子，angular團(tuán)隊(duì)自己開(kāi)發(fā)的e2e測(cè)試工具。同樣提供模擬用戶的操作的API，來(lái)驗(yàn)證Angular運(yùn)行狀況。

selenium 暫時(shí)還沒(méi)用過(guò)，網(wǎng)上有大量的關(guān)于它的資料

macaca 本系列要講的重點(diǎn)

Appium 支持ios/android/firefoxos多種平臺(tái)的測(cè)試，native、h5、hybrid都支持，以及所有支持jsonWireProtocal協(xié)議的腳本語(yǔ)言：python，java，nodejs ruby都可以用來(lái)書寫用例.它實(shí)際上包含了: a. 基于express的server用于發(fā)送/接收client端的協(xié)議命令;

作為bootstrap客戶端用于將命令傳遞給對(duì)應(yīng)的UIAutomator/UIAutomation/Google’s Instrumentation

測(cè)試框架的作用就是運(yùn)行測(cè)試開(kāi)發(fā)人員編寫的腳本工具，測(cè)試框架會(huì)抓取到代碼拋出的AssertionError，并在控制臺(tái)或者網(wǎng)頁(yè)中輸出。測(cè)試框架提供了特定的測(cè)試語(yǔ)法，一般分為兩類TDD(測(cè)試驅(qū)動(dòng)開(kāi)發(fā))和BDD(行為驅(qū)動(dòng)開(kāi)發(fā))。測(cè)試框架通常提供TDD（測(cè)試驅(qū)動(dòng)開(kāi)發(fā)）或BDD（行為驅(qū)動(dòng)開(kāi)發(fā)）的測(cè)試語(yǔ)法來(lái)編寫測(cè)試用例。

TDD：是指先寫好測(cè)試代碼，然后再根據(jù)測(cè)試來(lái)寫代碼。它的步驟一般是：

寫個(gè)測(cè)試

寫出最少數(shù)量的代碼，使其保持測(cè)試通過(guò)

優(yōu)化代碼

重復(fù)前面的工作

BDD：不去針對(duì)代碼細(xì)節(jié)，而是針對(duì)行為進(jìn)行測(cè)試

現(xiàn)在用的比較多的測(cè)試框架是:

mocha

jasmine

斷言的作用就是判斷源碼的實(shí)際執(zhí)行結(jié)果與預(yù)期結(jié)果是否相同，如果不一致就拋出一個(gè)錯(cuò)誤。

chai

chai.js提供了assert, expect, should三種風(fēng)格的斷言?？筛鶕?jù)自己的喜好去選擇斷言風(fēng)格。具體API請(qǐng)查閱相關(guān)的文檔。

利用上面的工具基本上就可以開(kāi)始進(jìn)行測(cè)試腳本的測(cè)試工作了。

下面一篇文章就會(huì)介紹如何使用macaca來(lái)對(duì)hybird應(yīng)用進(jìn)行測(cè)試。