如何调试HTTP API接口的？ _STest

本帖已被设为精华帖！,

遇到的困扰

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

Chrome + Postman
Firefox + Rest Client
Mac 下的Paw (商业)
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 项目比较庞大，项目结构如下，

但是其中实际和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的描述文件

接下来就可以在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

我们可以看到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

* 注：本文来自网络投稿，不代表本站立场，如若侵犯版权，请及时知会删除

如何调试HTTP API接口的 ？

遇到的困扰

我们想过的一些方案

最终的解决方案

相关推荐

如何调试HTTP API接口的？