1. STest软件测试社区首页
  2. 后台测试

如何调试HTTP API接口的 ?

本帖已被设为精华帖!,

遇到的困扰

接口测试对于大多数的公司来说,基本是一个常规武器,我们也在Testerhome的社区中学习到了很多同学分享出来的接口测试框架。不过除了平时使用Jenkins做接口的持续回归之外,我们的产品测试同学也会经常需要对一些接口进行一些手工的操作,CRUD等等。目前业内有一些比较主流的接口测试工具,例如:

  1. Chrome + Postman
  2. Firefox + Rest Client
  3. Mac 下的Paw (商业)
  4. JMeter

上述的工具都可以完成基本的HTTP请求,并且支持标准的HTTP Authentication以及对于HTTP Header的操作。但是我们的接口有一些特殊,需要对于每一个URL进行一个签名的操作。如果signature是一个函数的话,那么输入的参数就是时间戳+URL ,输出就一个signature字符串,并且需要添加到HTTP头中作为一个校验字段。这样就意味着每一次请求都需要去计算一次signature。


我们想过的一些方案

  • Signature 生成器

写一个Python脚本来专门计算Signature,然后产品同学把脚本输出的结果填写到Postman中的HTTP Header头中来发请求 。想想这个效率实在是太低了,直接放弃。

  • JMeter + BeanShell

JMeter是一个压力测试工具,不过我们也看到有一些团队用它来做一些接口测试的工作。BeanShell是JMeter支持的一个脚本语言,可以用来在HTTP请求前后做一些操作,例如修改请求参数,和HTTP Header头等。我们可以考虑把我们计算Signature的方法写在一个BeanShell PreProcessor中,这样就每次发送请求的时候,自动计算签名了。但是考虑到很多同学都没有使用过JMeter,还有培训和掌握新工具的过程,所以还是放弃了。(充分考虑了产品测试小红薯们的对新测试工具的接受程度)


最终的解决方案

观察了很久后我们发现,其实小伙伴们都喜欢用Chrome + Postman的Extension来做接口的调试工作。那看来最好的方法,就是给他们发布一个新的Chrome Extenstion就能解决问题。当然我们不需要重头开始写,我们要做的就是在巨人的肩膀上加一个计算签名的功能。不过令人伤心的是Postman不是一个开源的项目,好在我们最后在Github上找到了这个项目ChromeRestClient, Chrome上另外一个很流行的Rest Client 插件。

如何做Chrome Extension开发我们就不在这里详述了,有兴趣的小伙伴可以移动到这里 Chrome Extension Development

ChromeRestClient 项目比较庞大,项目结构如下,
如何调试HTTP API接口的 ?

但是其中实际和Chrome Extension插件相关的目录是

  • app, 存放ChromeRestClient Extension核心代码的地方
  • branding, 存放icon的目录
  • tasks, 存放gulp项目task的目录,使用gulp.js来做build
  • build, 只有在运行了gulp build以后才会出现,有4个level的build,分别是dev,stable,canary,beta
  • gulpfile.js, 根目录下的gulpfile.js, 管理所有的gulp task

搭建开发环境的过程很简单,只需要本地有安装nodejs即可, 我们使用的版本是 6.3.1, 接下来只要把项目从github克隆下来以后,在根目录下运行 npm install && bower install,就会在app目录下下载对应的依赖了。当然整个过程自然不会那么的一帆风顺,我们给社区反馈了3个issue并得到了开发者的及时反馈。

安装完依赖以后,使用Chrome浏览器,打开Menu->More Tools -> Extensions, 选择Load Unpacked Extension, 然后选择app目录即可把本地的extension加载到Chrome中进行调试, 确保app目录下有manifest.json文件,这是一个Chrome Extension的描述文件

如何调试HTTP API接口的 ?

接下来就可以在Chrome中进行插件调试开发了,如果本地修改了代码,需要在Extension菜单页面中,选择Reload,重新加载你的插件。由于Chrome Extension使用的是标准的Web开发技术,包括HTML + CSS + Javascript,所以可以方便的在Chrome Develop Toolbar中进行Debug了。

ChromeRestClient 插件的页面是使用了Google 的Polymer项目进行开发,这个和AngularJS类似,都属于Google在力推的Web Component技术。我们可以在app/elements/下找到一堆子目录,都是Polymer的Plugin。当然我们最关心的是这个子目录arc-request-controller

如何调试HTTP API接口的 ?

我们可以看到arc-request-controller.js中,最核心的一个函数是sendRequest,

sendRequest: function () {
if (!this.request) {
StatusNotification.notify({
message: 'Request not ready'
});
return;
}
if (!this.request.url) {
StatusNotification.notify({
message: 'Add URL to the request first'
});
return;
}

this._setIsError(false);
this._setResponse(null);
this._setRequestLoading(true);
this._saveUrl();
this._callRequest();
this.showCookieBanner = false;
arc.app.analytics.sendEvent('Engagement', 'Click', 'Request start');
// Will help arrange methods bar according to importance of elements.
arc.app.analytics.sendEvent('Request', 'Method', this.request.method);
},

上面的代码中,大多数都是在做一些Request Body的初始化操作,最核心的是那句this._callRequest()调用,我们来看一下_callRequest的函数式怎么实现的


_callRequest: function () {
// Copy the object so MagicVariables will not alter the view
this._applyMagicVariables(Object.assign({}, this.request))
.then((request) => this._applyCookies(request))
.then((request) => this._applyAuthorization(request))
.then((request) => this.fu(request))
.then((request) => {
// Make it async so errors will be handled by socket object.
this.async(() => {
if (this.auth) {
request.auth = this.auth;
this.auth = undefined;
}
if (this.useXhr) {
this.$.xhr.request = request;
this.$.xhr.run();
} else {
this.$.socket.request = request;
this.$.socket.run();
}
});
});
},

接下来我们可以看到负责处理HTTP Header 头的是_filterHeaders函数,那么我们只要把我们的签名算法写到这个函数里,并添加正确的HTTP Header就好了。在添加签名算法的过程中涉及到了一下JS的依赖,我们也统一用bower进行管理,并把依赖模块加入到了bower.json

最后我们使用Gulp来编译我们的Chrome Extension,例如编译一个beta的版本 gulp build --target beta --build-only, 这样就会在build目录下创建一个beta目录,并把对应的build结果copy到里面。

有一个要提醒,如果有添加JS依赖的话,需要在tasks/builder.js中声明这个依赖

var bowerDeps = [
'chrome-platform-analytics/google-analytics-bundle.js',
'dexie-js/dist/dexie.min.js',
'har/build/har.js',
'lodash/lodash.js',
'uri.js/src/URI.js',
'prism/prism.js',
'prism/plugins/autolinker/prism-autolinker.min.js',
'js-md5/src/md5.js',
'string-format-js/format.js'
];

万事大吉,接下来只要使用Chrome 自带的 Pack Extension功能把插件打包成一个.crx 的文件就可以分发给我们的产品测试同学了。(签名算法涉及到一些机密信息,所以我们没有上传到Chrome Store中)

希望这篇分享可以让你更好了解小红薯是如何在测试的工作中think different的,当然我们也更欢迎你加入我们的团队,和我们一起把测试变得有趣。有兴趣的同学可以看这篇招聘帖子,https://testerhome.com/topics/5045

原创文章,作者:华为小猪,如若转载,请注明出处:https://www.stest.com

发表评论

邮箱地址不会被公开。 必填项已用*标注

QR code