App版本发布前，我们都要手工做接口测试，目的是保证App内部H5页面所使用的JSAPI的功能正常，而对所有H5页面进行的P0级功能测试。为什么要做接口测试呢？因为JSAPI无法抓包，测试难度比较大，所以只能通过对H5页面的功能进行校验。但是手工测试，场景覆盖不全面，且耗时耗力。
二、JSAPI自动化测试方案
首先思考几个问题：一个APP有多少个JSAPI？它的用例场景有多少？如何能做到对用例的高效管理？
答案：对于我们app，有22条JSAPI，每条JSAPI多的话可能有几十个场景。传统的自动化方案，通常是一个场景需要手工编写一条用例，这种自动化的方案成本可以说也是非常高的，好在JSAPI并不常变动。但是，我们想实现一种更高效的自动化方式，不需要编写和管理那么多条用例，提升执行效率，同时降低学习成本。
2.1先来看看JSAPI是什么？
Html通过Jsapi，与app收发数据，形如：WebViewJavascriptBridge.callHandler
("API名称", {调用参数}, <回调函数>)js调用app的指定api，该方法由页面主动触发举个例子：
如上，getMainInfo是html中一个button的响应函数。我们在js中，通过JSBridge实现对相应JSAPI的调用，如下：实现H5页面可以直接获取到APP的maininfo数据。
2.2方案与原理
1、首先要解决用例管理的问题，我们实现了一种基于配置表的自动化测试方案，不需要编写脚本，只需把所有用例（含请求参数及返回参数的预期值），放到excel配置表中，通过解析器把所有的参数读出来，再通过模版字符串自动生成用例集。
2、jsapi不能脱离app执行，因此在app增加彩蛋入口，连接到一个网页，打开网页时，由js文件自动加载用例集去调用相关的jsapi接口，并用chai断言库对结果进行校验。
3、jsapi有两种，一种是有参数返回的，一种是会引发UI变更的，下图分别是两种jsapi的自动化校验方案。第一种在下文进行了详尽的描述，第二种需要基于UI的自动化去实现，解决了h5页面的控件在app中无法识别的问题。采用js定时传参给html，配合前端自动化去触发调用的方式实现。
2.3用例管理
如下图：第一行是参数名，蓝色是请求参数，绿色是所有返回参数，用‘/’分隔。返回参数的预期值，用正则表达式来表达。
2.4用例解析器
将上述表格解析为如下格式，params和result是两个数组，每个sheet有几行，数组就有几个值，表格中每行代表一个场景。解析器基于Node.js，在服务端运行。
2.5使用Node.js+模版字符串动态生成api.js
在解析得到的所有JSAPI名称后，将调用方法以字符串的方式写入文件中，动态生成我们要调用的所有JSAPI的调用方法，再被html所引用即可：
动态生成的api.js文件是下图这样的：
我们的用例配置表中有n个sheet，即有n个JSAPI的用例，我们这里就自动生成这几个JSAPI的调用方法，传入的req就是我们在配置表中读到的每一行用例中的请求参数。拿到回包的res，再去校验是否与解析配置表得到的所有返回参数一致。
2.6使用Node.js+模版字符串动态生成测试用例
Mocha是JavaScript的自动化测试框架，既可以运行在nodejs环境中，也可以运行在浏览器环境中。如下图，通过调用mocha.setup(‘bdd’)，开启 Mocha 的测试功能（testing helpers）。然后，加载需要的测试项和相应测试的文件。最后，调用了 mocha.run() 执行相应测试。
下图所示部分，自动生成测试用例，也是采用解析JSAPIList的同时写test.js文件的形式。
Ps：describe：称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称，第二个参数是一个实际执行的函数。
it：称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。
所有测试用例均为动态生成，如下图：
2.7Mocha框架自动化执行测试用例集
JSAPI的测试页面已经完成了，我们需要把它放到app中才能执行。在app的彩蛋页面放一个入口，加载这个html，当打开这个html的时候，服务自动的去执行并展示结果。如图，执行12条用例，只用了0.14s。
2.8自动化效果
目前，jsapi覆盖率已达70%，用例场景171个，执行耗时1.98s，Android和iPhone两个平台发现bug16个，涉及场景共35个，必现crash2个。
三、效果分析
在h5高产的今天，JSAPI的接口自动化测试解决了手工测试低效且覆盖不完全的苦恼，该方案在复用程度上也是非常友好的高度可复用的。只需创建自己的用例配置表，修改html中JSAPI的连接方式即可。
1.安装phantomjs网上有很多。2.执行官网上的示例代码//ReadthePhantomwebpage'#intro'elementtextusingjQueryand"includeJs""usestrict"varpage=require('webpage').create()page.onConsoleMessage=function(msg){console.log(msg)}page.open("",function(status){if(status==="success"){page.includeJs("/ajax/libs/jquery/1.6.1/jquery.min.js",function(){page.evaluate(function(){console.log("$(\".explanation\").text()->"+$(".explanation").text())})phantom.exit(0)})}else{phantom.exit(1)}})3.执行状态为一直卡在那里，不报错也不退出为了查看程序的内部执行状态，加入运行日志page.onResourceRequested=function(req){console.log('requested:'+JSON.stringify(req,undefined,4))}page.onResourceReceived=function(res){console.log('received:'+JSON.stringify(res,undefined,4))}4.发现程序一直卡在一个js的请求/',function(status){console.log('Status:'+status)//Dootherthingshere})phantom.exit(1)你执行完后，打印返回值，echo$?,会得到1而你把phantom.exit(1)注释之后，会得到status值。
