现如今，接口开发几乎成为一个互联 公司的标配了，无论是web还是app，哪怕是小程序，都离不开接口作为支撑，当然，这里的接口范围很广，从http到websocket，再到rpc，只要能实现数据通信的都可以称之为接口，面临着如此庞大的接口数据，如果更好的管理和测试他们都是一个比较头疼的问题，更主要的是很多业务场景是需要多个接口进行联调的，因此在接口开发完成后，一轮自动化测试能快速反馈出当前系统的状况，面对这样的需求，一个对测试人员友好的可视化接口自动化测试系统就显得必不可少了。那么，我们今天就来和大家聊聊如何实现一个小型的http接口自动化测试系统！
我们拿DOClever 做为这套系统的范本进行阐述，因为它是开源的，源码随时可以从GitHub和OSChina上获取,同时，这套系统内置了完整的自动化测试框架，从无需一行代码的UI测试用例编写，到更强大更灵活的代码模式，都提供了很友好的支持。
系统需求：
-
能在一个测试用例里可以对一组接口进行测试，自由调整他们的执行顺序，并根据上一接口的出参作为下一接口的入参条件。
-
能实现基本的逻辑判断，比如if，elseif，同时可以自定义变量用于存储临时值，并且定义当前用例的返回值。
-
提供一组辅助工具，可以快速实现数据打印，断言，用户输入，文件上传等操作。
-
能在一个测试用例里嵌入其他的测试用例，并自由对其测试用例传参，获取返回值来实现数据上的联动
准备条件：
1.我们采用nodejs+mongodb的架构设计，node端采用express框架，当然你也可以根据你的喜好选择koa或者其他框架
2.前端我们采用vue+elementUI来实现展示，这样做无非是为了数据的快速响应和element提供丰富的UI支持来帮助我们快速搭建可视化页面。
架构设计：
那么，我们首先就从最基层的代理服务端来说起如果对接口数据进行转发。
所谓的接口数据转发无非就是用node做一层代理中转，好在node其实很擅长做这样的工作，我们把每一次的接口请求都看作是对代理服务端的一次post请求，接口的真实请求数据就直接作为post请求数据发给代理服务器，接口的host，path，method等数据都会包装在post请求的http header里面，然后我们用node的stream直接pipe到真实请求上去，在接受到真实的接口返回数据后，会把这个数据pipe到原先post请求的response上面去，这样就完成了一次代理转发。
有几点需要注意的是:
1.你在发送请求前需要判断当前的请求是http还是https，因为这涉及到两个不同的node库。
2.你在转发真实请求前，需要对post过来的http header进行一次过滤，过滤掉host，origin等信息，保留客户需要请求的自定义头部和cookies.
3.很多时候，接口返回的可能是一个跳转，那么我们就需要处理这个跳转，再次请求这个跳转地址并接受返回数据.
4.我们需要对接口返回过来的数据进行一个一次过滤，重点是cookie，我们需要处理set-cookie这个字段，去掉浏览器不可写的部分，这样才能保证我们调用登陆接口的时候，可以在本地写入正确的cookie，让浏览器记住当前的登陆状态！
5.我们用一个doclever-request自定义头部来记录一次接口请求的完整request和response过程！
下面是实现的核心代码，在此列举出来：
给大家截取一个向代理服务器发送post请求的数据截图：
-
上图中每一个按钮都可以生成一个测试节点，比如我点击接口，就会插入一个接口在图上的下半部分显示，每一个节点都有自己的数据格式。
-
每一个节点都会生成一个ID，代表这个节点的唯一标识，我们可以拖拽节点改变节点的位置，但是ID是不变的。
当我们点击运行按钮的时候，系统会根据当前的节点顺序生成伪代码。
3.然后我们用一个array存储这个节点信息，在vue里面用一个v-for加上el-row就可以将这些节点展现出来。
那么如何去决定一个测试用例的是否测试通过呢，我们这里会用到测试用例的返回值，如下图所示：
可以看到，上面的代码把每个测试节点就转换成了html的节点，这样既可以在 页上直接展示，也方便接下来的解析成真正的javascript可执行代码。
好，接下来我们进入整个系统最核心，最复杂的部分，如何把上述的伪代码转换成可执行代码去请求真实的接口，并将接口的状态和信息返回的呢！
我们先来用一张表表示下这个过程：
2.得到完整的执行代码后，如何去请求接口呢，我们来看下runTest函数里面的基本信息：
3.最后我们来看下如何执行整个js代码，并对测试用例进行返回的：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！