使用macaca進(jìn)行移動(dòng)端hybird自動(dòng)化測試(一)
部分基本概念及內(nèi)容：
單元測試：
以模塊為單元，測試你代碼的本身，確保你編寫的模塊還有邏輯正確。只要輸入的值不變，輸出的值也應(yīng)該不發(fā)生改變
前端自動(dòng)化測試：
- 界面回歸測試 測試界面是否正常，包括文案，圖片等。
- 功能測試 包括交互邏輯和功能模塊是否符合預(yù)期。
- 性能測試 頁面性能越來越受到關(guān)注，并且性能需要在開發(fā)過程中持續(xù)關(guān)注，否則很容易隨著業(yè)務(wù)迭代而下降。
本文主要的內(nèi)容集中在界面回歸測試和功能測試。這2部分的測試工作是通過模擬用戶進(jìn)行頁面操作，通過查看頁面狀態(tài)的變化，從而檢測功能是否運(yùn)行正常：它的測試流程是：
- DOM元素選取
- 觸發(fā)DOM元素綁定事件
- 查看綁定事件結(jié)果是否符號預(yù)期
如何去做前端UI自動(dòng)化測試
要完成前端UI自動(dòng)化測試至少需要測試框架，斷言庫。
工具的選擇
Headless無界面:
- PhantomJS.包含了WebKit瀏覽器引擎和JavaScript API的腳本解釋器，因此可以去運(yùn)行js代碼。只不過不提供圖形界面，其他的功能都和瀏覽器一樣。比如一些爬蟲爬了網(wǎng)站，這個(gè)網(wǎng)站并不是靜態(tài)的，那么需要執(zhí)行Js才行。因此PhantomJS提供了執(zhí)行頁面中的代碼功能。
- casperjs.基于PhantomJS進(jìn)行開發(fā)，提供的功能也和PhantomJS，不過語法更加簡練。不像PhantomJS callback hell那樣惡心。同時(shí)和PhantomJS不同的地方還在于它直接提供了測試的功能，比如對遠(yuǎn)程DOM的斷言測試，還能編寫功能測試套件。具體的API文檔參見casperjs的官網(wǎng)。
- casper.start('http://www.google.fr/', function() { //打開谷歌主頁,添加頁面加載完成時(shí)的回調(diào)函數(shù)
- this.test.assertTitle('Google', 'google homepage title is the one expected'); //檢測頁面標(biāo)題是否是'Google',如果是,輸出第二個(gè)參數(shù)指定的字符串
- this.test.assertExists('form[action="/search"]', 'main form is found'); //檢測頁面中是否存在選擇器指定的元素,如果存在輸出第二個(gè)參數(shù)指定的字符串
- this.fill('form[action="/search"]', { //填充表單并提交,執(zhí)行搜索操作
- q: 'foo'
- }, true);
- });
- casper.then(function() {
- this.test.assertTitle('foo - Recherche Google', 'google title is ok'); //檢測搜索結(jié)果頁的頁面標(biāo)題是否正確
- this.test.assertUrlMatch(/q=foo/, 'search term has been submitted'); //檢測搜索結(jié)果頁的網(wǎng)址是否匹配指定的正則表達(dá)式
- this.test.assertEval(function() {
- return __utils__.findAll('h3.r').length >= 10; //自定義一個(gè)檢測函數(shù)
- }, 'google search for "foo" retrieves 10 or more results');
- });
- casper.run(function() {
- this.test.renderResults(true); //輸出檢測結(jié)果
- });
UI測試
nightwatch (簡單的語法，可以快速上手使用強(qiáng)大的 Selenium WebDriver API 來在 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為測試封裝的的一套High level Api(非常的語義化：click, refresh, goto...).同時(shí)nightmare還基于electron，那么它也提供了GUI的界面工具，當(dāng)你使用nightmare.js進(jìn)行自動(dòng)化測試的時(shí)候就可以看到所有的模擬用戶動(dòng)作了。
- yield Nightmare()
- .goto('http://yahoo.com')
- .type('input[title="Search"]', 'github nightmare')
- .click('.searchsubmit');
- protractor angular的親兒子，angular團(tuán)隊(duì)自己開發(fā)的e2e測試工具。同樣提供模擬用戶的操作的API，來驗(yàn)證Angular運(yùn)行狀況。
- selenium 暫時(shí)還沒用過，網(wǎng)上有大量的關(guān)于它的資料
- macaca 本系列要講的重點(diǎn)
- Appium 支持ios/android/firefoxos多種平臺的測試，native、h5、hybrid都支持，以及所有支持jsonWireProtocal協(xié)議的腳本語言：python，java，nodejs ruby都可以用來書寫用例.它實(shí)際上包含了: a. 基于express的server用于發(fā)送/接收client端的協(xié)議命令;
- 作為bootstrap客戶端用于將命令傳遞給對應(yīng)的UIAutomator/UIAutomation/Google’s Instrumentation
測試框架
測試框架的作用就是運(yùn)行測試開發(fā)人員編寫的腳本工具，測試框架會抓取到代碼拋出的AssertionError，并在控制臺或者網(wǎng)頁中輸出。測試框架提供了特定的測試語法，一般分為兩類TDD(測試驅(qū)動(dòng)開發(fā))和BDD(行為驅(qū)動(dòng)開發(fā))。測試框架通常提供TDD(測試驅(qū)動(dòng)開發(fā))或BDD(行為驅(qū)動(dòng)開發(fā))的測試語法來編寫測試用例。
TDD：是指先寫好測試代碼，然后再根據(jù)測試來寫代碼。它的步驟一般是：
- 寫個(gè)測試
- 寫出最少數(shù)量的代碼，使其保持測試通過
- 優(yōu)化代碼
- 重復(fù)前面的工作
BDD：不去針對代碼細(xì)節(jié)，而是針對行為進(jìn)行測試
現(xiàn)在用的比較多的測試框架是:
- mocha
- jasmine
斷言庫
斷言的作用就是判斷源碼的實(shí)際執(zhí)行結(jié)果與預(yù)期結(jié)果是否相同，如果不一致就拋出一個(gè)錯(cuò)誤。
- chai
chai.js提供了assert, expect, should三種風(fēng)格的斷言。可根據(jù)自己的喜好去選擇斷言風(fēng)格。具體API請查閱相關(guān)的文檔。
利用上面的工具基本上就可以開始進(jìn)行測試腳本的測試工作了。
下面一篇文章就會介紹如何使用macaca來對hybird應(yīng)用進(jìn)行測試。
