轉(zhuǎn)載自 ：?騰訊移動(dòng)品質(zhì)中心TMQ? ?（已獲得授權(quán)）
一、版本發(fā)布前，接口測(cè)試之痛
App版本發(fā)布前，我們都要手工做接口測(cè)試，目的是保證App內(nèi)部H5頁(yè)面所使用的JSAPI的功能正常，而對(duì)所有H5頁(yè)面進(jìn)行的P0級(jí)功能測(cè)試。為什么要做接口測(cè)試呢？因?yàn)镴SAPI無(wú)法抓包，測(cè)試難度比較大，所以只能通過(guò)對(duì)H5頁(yè)面的功能進(jìn)行校驗(yàn)。但是手工測(cè)試，場(chǎng)景覆蓋不全面，且耗時(shí)耗力。
二、JSAPI自動(dòng)化測(cè)試方案
首先思考幾個(gè)問(wèn)題：一個(gè)APP有多少個(gè)JSAPI？它的用例場(chǎng)景有多少？如何能做到對(duì)用例的高效管理？
答案：對(duì)于我們app，有22條JSAPI，每條JSAPI多的話可能有幾十個(gè)場(chǎng)景。傳統(tǒng)的自動(dòng)化方案，通常是一個(gè)場(chǎng)景需要手工編寫(xiě)一條用例，這種自動(dòng)化的方案成本可以說(shuō)也是非常高的，好在JSAPI并不常變動(dòng)。但是，我們想實(shí)現(xiàn)一種更高效的自動(dòng)化方式，不需要編寫(xiě)和管理那么多條用例，提升執(zhí)行效率，同時(shí)降低學(xué)習(xí)成本。
2.1先來(lái)看看JSAPI是什么？
Html通過(guò)Jsapi，與app收發(fā)數(shù)據(jù)，形如：WebViewJavascriptBridge.callHandler
("API名稱", {調(diào)用參數(shù)}, ?<回調(diào)函數(shù)>); js調(diào)用app的指定api，該方法由頁(yè)面主動(dòng)觸發(fā)舉個(gè)例子：
如上，getMainInfo是html中一個(gè)button的響應(yīng)函數(shù)。我們?cè)趈s中，通過(guò)JSBridge實(shí)現(xiàn)對(duì)相應(yīng)JSAPI的調(diào)用，如下：實(shí)現(xiàn)H5頁(yè)面可以直接獲取到APP的maininfo數(shù)據(jù)。
2.2方案與原理
1、首先要解決用例管理的問(wèn)題，我們實(shí)現(xiàn)了一種基于配置表的自動(dòng)化測(cè)試方案，不需要編寫(xiě)腳本，只需把所有用例（含請(qǐng)求參數(shù)及返回參數(shù)的預(yù)期值），放到excel配置表中，通過(guò)解析器把所有的參數(shù)讀出來(lái)，再通過(guò)模版字符串自動(dòng)生成用例集。
2、jsapi不能脫離app執(zhí)行，因此在app增加彩蛋入口，連接到一個(gè)網(wǎng)頁(yè)，打開(kāi)網(wǎng)頁(yè)時(shí)，由js文件自動(dòng)加載用例集去調(diào)用相關(guān)的jsapi接口，并用chai斷言庫(kù)對(duì)結(jié)果進(jìn)行校驗(yàn)。
3、jsapi有兩種，一種是有參數(shù)返回的，一種是會(huì)引發(fā)UI變更的，下圖分別是兩種jsapi的自動(dòng)化校驗(yàn)方案。第一種在下文進(jìn)行了詳盡的描述，第二種需要基于UI的自動(dòng)化去實(shí)現(xiàn)，解決了h5頁(yè)面的控件在app中無(wú)法識(shí)別的問(wèn)題。采用js定時(shí)傳參給html，配合前端自動(dòng)化去觸發(fā)調(diào)用的方式實(shí)現(xiàn)。
2.3用例管理
如下圖：第一行是參數(shù)名，藍(lán)色是請(qǐng)求參數(shù)，綠色是所有返回參數(shù)，用‘/’分隔。返回參數(shù)的預(yù)期值，用正則表達(dá)式來(lái)表達(dá)。
2.4用例解析器
將上述表格解析為如下格式，params和result是兩個(gè)數(shù)組，每個(gè)sheet有幾行，數(shù)組就有幾個(gè)值，表格中每行代表一個(gè)場(chǎng)景。解析器基于Node.js，在服務(wù)端運(yùn)行。
2.5使用Node.js+模版字符串動(dòng)態(tài)生成api.js
在解析得到的所有JSAPI名稱后，將調(diào)用方法以字符串的方式寫(xiě)入文件中，動(dòng)態(tài)生成我們要調(diào)用的所有JSAPI的調(diào)用方法，再被html所引用即可：
動(dòng)態(tài)生成的api.js文件是下圖這樣的：
我們的用例配置表中有n個(gè)sheet，即有n個(gè)JSAPI的用例，我們這里就自動(dòng)生成這幾個(gè)JSAPI的調(diào)用方法，傳入的req就是我們?cè)谂渲帽碇凶x到的每一行用例中的請(qǐng)求參數(shù)。拿到回包的res，再去校驗(yàn)是否與解析配置表得到的所有返回參數(shù)一致。
2.6使用Node.js+模版字符串動(dòng)態(tài)生成測(cè)試用例
Mocha是JavaScript的自動(dòng)化測(cè)試框架，既可以運(yùn)行在nodejs環(huán)境中，也可以運(yùn)行在瀏覽器環(huán)境中。如下圖，通過(guò)調(diào)用mocha.setup(‘bdd’)，開(kāi)啟?Mocha 的測(cè)試功能（testing helpers）。然后，加載需要的測(cè)試項(xiàng)和相應(yīng)測(cè)試的文件。最后，調(diào)用了 mocha.run() 執(zhí)行相應(yīng)測(cè)試。
下圖所示部分，自動(dòng)生成測(cè)試用例，也是采用解析JSAPIList的同時(shí)寫(xiě)test.js文件的形式。
Ps：describe：稱為"測(cè)試套件"（test suite），表示一組相關(guān)的測(cè)試。它是一個(gè)函數(shù)，第一個(gè)參數(shù)是測(cè)試套件的名稱，第二個(gè)參數(shù)是一個(gè)實(shí)際執(zhí)行的函數(shù)。
it：稱為"測(cè)試用例"（test case），表示一個(gè)單獨(dú)的測(cè)試，是測(cè)試的最小單位。
所有測(cè)試用例均為動(dòng)態(tài)生成，如下圖：
2.7Mocha框架自動(dòng)化執(zhí)行測(cè)試用例集
JSAPI的測(cè)試頁(yè)面已經(jīng)完成了，我們需要把它放到app中才能執(zhí)行。在app的彩蛋頁(yè)面放一個(gè)入口，加載這個(gè)html，當(dāng)打開(kāi)這個(gè)html的時(shí)候，服務(wù)自動(dòng)的去執(zhí)行并展示結(jié)果。如圖，執(zhí)行12條用例，只用了0.14s。
2.8自動(dòng)化效果
目前，jsapi覆蓋率已達(dá)70%，用例場(chǎng)景171個(gè)，執(zhí)行耗時(shí)1.98s，Android和iPhone兩個(gè)平臺(tái)發(fā)現(xiàn)bug16個(gè)，涉及場(chǎng)景共35個(gè)，必現(xiàn)crash2個(gè)。
三、效果分析
在h5高產(chǎn)的今天，JSAPI的接口自動(dòng)化測(cè)試解決了手工測(cè)試低效且覆蓋不完全的苦惱，該方案在復(fù)用程度上也是非常友好的高度可復(fù)用的。只需創(chuàng)建自己的用例配置表，修改html中JSAPI的連接方式即可。
