[[174581]]

部分基本概念及內容：

單元測試：

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

前端自動化測試：

• 界面回歸測試 測試界面是否正常，包括文案，圖片等。
• 功能測試 包括交互邏輯和功能模塊是否符合預期。
• 性能測試 頁面性能越來越受到關注，并且性能需要在開發過程中持續關注，否則很容易隨著業務迭代而下降。

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

1. DOM元素選取
2. 觸發DOM元素綁定事件
3. 查看綁定事件結果是否符號預期

如何去做前端UI自動化測試

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

工具的選擇

Headless無界面:

1. PhantomJS.包含了WebKit瀏覽器引擎和JavaScript API的腳本解釋器，因此可以去運行js代碼。只不過不提供圖形界面，其他的功能都和瀏覽器一樣。比如一些爬蟲爬了網站，這個網站并不是靜態的，那么需要執行Js才行。因此PhantomJS提供了執行頁面中的代碼功能。
2. 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);                                                          //輸出檢測結果 
});  

UI測試

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');  

1. protractor angular的親兒子，angular團隊自己開發的e2e測試工具。同樣提供模擬用戶的操作的API，來驗證Angular運行狀況。
2. selenium 暫時還沒用過，網上有大量的關于它的資料
3. macaca 本系列要講的重點
4. Appium 支持ios/android/firefoxos多種平臺的測試，native、h5、hybrid都支持，以及所有支持jsonWireProtocal協議的腳本語言：python，java，nodejs ruby都可以用來書寫用例.它實際上包含了: a. 基于express的server用于發送/接收client端的協議命令;
5. 作為bootstrap客戶端用于將命令傳遞給對應的UIAutomator/UIAutomation/Google’s Instrumentation

測試框架

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

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

1. 寫個測試
2. 寫出最少數量的代碼，使其保持測試通過
3. 優化代碼
4. 重復前面的工作

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

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

1. mocha
2. jasmine

斷言庫

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

• chai

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

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

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