摘要：測試框架通常提供測試驅動開發或行為驅動開發的測試語法來編寫測試用例。利用上面的工具基本上就可以開始進行測試腳本的測試工作了。下面一篇文章就會介紹如何使用來對應用進行測試。

單元測試：

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

前端自動化測試：

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

功能測試 包括交互邏輯和功能模塊是否符合預期。

性能測試 頁面性能越來越受到關注，并且性能需要在開發過程中持續關注，否則很容易隨著業務迭代而下降。

本文主要的內容集中在界面回歸測試和功能測試。這2部分的測試工作是通過模擬用戶進行頁面操作，通過查看頁面狀態的變化，從而檢測功能是否運行正常：它的測試流程是：

DOM元素選取

觸發DOM元素綁定事件

查看綁定事件結果是否符號預期

要完成前端UI自動化測試至少需要測試框架，斷言庫。

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

casperjs.基于PhantomJS進行開發，提供的功能也和PhantomJS，不過語法更加簡練。不像PhantomJS callback hell那樣惡心。同時和PhantomJS不同的地方還在于它直接提供了測試的功能，比如對遠程DOM的斷言測試，還能編寫功能測試套件。具體的API文檔參見casperjs的官網。

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

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

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

nightwatch (簡單的語法，可以快速上手使用強大的 Selenium WebDriver API 來在 DOM 元素上執行命令和斷言)

    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為測試封裝的的一套High level Api(非常的語義化：click, refresh, goto...).同時nightmare還基于electron，那么它也提供了GUI的界面工具，當你使用nightmare.js進行自動化測試的時候就可以看到所有的模擬用戶動作了。

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

protractor angular的親兒子，angular團隊自己開發的e2e測試工具。同樣提供模擬用戶的操作的API，來驗證Angular運行狀況。

selenium 暫時還沒用過，網上有大量的關于它的資料

macaca 本系列要講的重點

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

作為bootstrap客戶端用于將命令傳遞給對應的UIAutomator/UIAutomation/Google’s Instrumentation

測試框架的作用就是運行測試開發人員編寫的腳本工具，測試框架會抓取到代碼拋出的AssertionError，并在控制臺或者網頁中輸出。測試框架提供了特定的測試語法，一般分為兩類TDD(測試驅動開發)和BDD(行為驅動開發)。測試框架通常提供TDD（測試驅動開發）或BDD（行為驅動開發）的測試語法來編寫測試用例。

TDD：是指先寫好測試代碼，然后再根據測試來寫代碼。它的步驟一般是：

寫個測試

寫出最少數量的代碼，使其保持測試通過

優化代碼

重復前面的工作

BDD：不去針對代碼細節，而是針對行為進行測試

現在用的比較多的測試框架是:

mocha

jasmine

斷言的作用就是判斷源碼的實際執行結果與預期結果是否相同，如果不一致就拋出一個錯誤。

chai

chai.js提供了assert, expect, should三種風格的斷言。可根據自己的喜好去選擇斷言風格。具體API請查閱相關的文檔。

利用上面的工具基本上就可以開始進行測試腳本的測試工作了。

下面一篇文章就會介紹如何使用macaca來對hybird應用進行測試。