接口测试平台代码实现48: 自动异常测试-1

本功能属于番外，不是必须的。长度大概3章节。难度不高，也算给大家休息一下。

这个功能是什么意思呢？简单点说，就是一个接口保存好之后，你保存的请求数据都是正常的。但是错误的用例也就是无效等价类中，具体参数格式不同的要怎么测呢？正常来说有以下几种类型：整形，字符串，单字符，超长字符串，为空，全空格，有中文，纯英文，含标点符号，数组，sql注入，不符合需求规则的 等等等等。一个超全面的接口测试，几乎要把所有参数都依次替换成这些不同的格式来请求，看看是否会引起服务器报错甚至更加严重的后果。

当我们用手工来测试的时候，这几乎是不可能办到的事，举个例子，假如接口有10个字段，要替换的各种不同格式测试数据是20个，那么你一共要测试10 * 20 = 200个测试用例。但是真的有人这么测么？现实中基本没有。原因就在于这个成本太高了，性价比极低。

在我们传统的测试理论-11种用例设计方法中，哪怕一个简单的功能都可能要写出几百条甚至上千条用例，如果真的可以实现如此全面的覆盖，理论上没有bug会遗漏了。但是实际中无法做到真正覆盖的根本原因在于国内的高节奏敏捷迭代的大环境，这种工匠精神，细细打磨的事注定做不起来。不过技术是不断发展的，高成本的痛点早晚会被技术所解决，测试同学们也不要指望着说国内it行业的那么多大神总会有人来解决，因为他们的精力被放在了更加重要的事上，这个行业只能靠我们自己想办法了。

我在之后的各种章节中，会有意无意的讲解这些降低成本的新解决方案。

比如这个接口异常自动测试功能，我们的做法其实就是用代码简单的进行依次替换，比如10个字段，我们用20个测试数据依次替换的时候，其他9个字段保持用户保存在接口库中的正确值。然后请求20次，每次的结果如果出现问题，那么很显然极大概率就是这个字段的问题。这也是集成测试的半个思想。

那么为什么要做这个非必须的功能呢？因为我们做的好歹也是个接口测试平台，那就要有平台的样子，各种新工具，新设计 只要业务有帮助，我们就上。在系列一开始的时候就说过，我们做的是平台，所以不要去和postman这种cs单机工具去比，也不要和jmeter去比性能测试，也不要和charles/fiddler去比抓包，也不要和jenkins去比监控，我们的优势和特点是：多人协作，历史保存，约束流程，符合公司内的小工具和设计，接口管理等一系列的综合体。比如这个自动异常测试功能，就是其他工具不具备的。我们之后还会讲许多这种新的技术功能。

好，现在我们打开P_apis.html，找到异常测试的按钮，给它加上onclick，

函数名我们就叫做error_test，传入接口id做为参数。

我们在下面找个风水好的地方，声明这个函数：

不要着急写，我们先考虑一下，我们测试完之后，这个巨量的测试结果要显示在哪？肯定应该有个div来承载这些返回值，所以我们先写好这个div：

这个新div的id我叫做error_div，style属性呢直接复制调试层的div即可：

这个div默认同样也是隐藏的，在我们的js函数error_test中，我们给div变成显示状态即可。

如图，我们现在要考虑一些事情：

1. 这么巨大的返回值量，一次请求基本是不可能把请求体返回来的。比如有100次请求，我们最好是发送100次请求，每次只获取一个返回值，依次显示到这个div里，所以我们是先把div给显示出来，再循环发送100次请求，每次得到返回值，都展示在这个div中即可。
2. 那我们可以先做好前端的样式，先展示一次请求的返回值展示的demo看看。然后再在js中让其自动生成所有次请求的展示效果。

div中我们如下设计：

如上图，我手动写了三段请求的展示效果，然后我们看看如何：

貌似还不错，那让我们接下来继续开发吧..

因为我们每次发送请求，传给后台的参数都是替换后的，这就意味着我们要在前端js里处理 复杂的替换功能：

我们可以先只完成这个复杂的替换代码，不真的去请求后台。

我们在一开始传入这个js的参数中只有接口id，当我们进行n次请求时，后台是可以根据这个id来拿到接口的一切数据的，但是我们要测的是真实是不同的请求体，所以我们现在还需要原始的请求体，原始的请求体配合上 要替换的测试数据，才能组装成最新的请求体 。然后和接口id一起给到后台。

那么在我们调用这个js函数的onclick里，加上原始请求体吧：

这里要进行注意的是，这个单双引号，千万别加错了！

同样js函数也要加上：

现在我们还缺少什么呢？就是要替换的数据何在?

我们的设计是给出默认的，用户还可以根据需要自行修改。所以存放的应该是一个可修改的input框。

在我们的div中加上这个输入框吧：

我们给它写上预置的几个值：

注意我们前面忘记增加了文案颜色为黑色的属性设置，这里补上了：

看看效果：

可复制的源码如下：

{# 异常值测试 #}
<div id="error_div" style="display: none;border-radius:5px;width: 80%;
position: absolute;left: 10%;top: 10%;background-color: #3c4043;box-shadow: 4px 4px 8px grey;
color: white;padding-left: 10px;">
    <h4>接口：<small id="error_api_name"></small> 的异常值测试结果如下：</h4>
    <strong>待替换数据:(用英文逗号隔开)</strong>
    <input id="ready_error_data" type="text" style="color: black;border-radius: 5px;width: 99%"
    value="'a',123,'',' ','./?*&^','中文'"
    > <br><br>
    
    <span>替换：username -> 123</span>
    <textarea style="width: 99%;height: 50px;border-radius: 5px;color: black">
    </textarea>

    <span>替换：username -> "aaa"</span>
    <textarea style="width: 99%;height: 50px;border-radius: 5px;color: black">
    </textarea>

    <span>替换：username -> "哈哈哈"</span>
    <textarea style="width: 99%;height: 50px;border-radius: 5px;color: black">
    </textarea>

</div>

好，到这为止。今天的前端样式算是完成了。

大家可以自行稍微修饰优化。明天继续本功能实现