接口测试平台-47：自动异常测试-1

这个功能是什么意思呢？简单点说，就是一个接口保存好之后，你保存的请求数据都是正常的。

但是错误的用例也就是无效等价类中，具体参数格式不同的要怎么测呢？

正常来说有以下几种类型：整形，字符串，单字符，超长字符串，为空，全空格，有中文，纯英文，含标点符号，数组，sql注入，不符合需求规则的 等等等等。

一个超全面的接口测试，几乎要把所有参数都依次替换成这些不同格式来请求，看是否会引起服务器报错甚至更加严重的后果。

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

在传统的测试理论-11种用例设计方法中，哪怕一个简单的功能都可能要写出几百条甚至上千条用例，如果真的可以实现如此全面的覆盖，理论上没有bug会遗漏了。但是实际中无法做到真正覆盖的根本原因在于国内的高节奏敏捷迭代的大环境，这种工匠精神，细细打磨的事注定做不起来。

不过技术是不断发展的，高成本的痛点早晚会被技术所解决，测试同学们也不要指望着说国内it行业的那么多大神总会有人来解决，因为他们的精力被放在了更加重要的事上，这个行业只能靠我们自己想办法了。

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

 

比如这个接口异常自动测试功能，做法其实就是用代码简单的进行依次替换，比如10个字段，用20个测试数据依次替换的时候，其他9个字段保持用户保存在接口库中的正确值。

然后请求20次，每次的结果如果出现问题，那么很显然极大概率就是这个字段的问题。这也是集成测试的半个思想。

 

那么为什么要做这个非必须的功能呢？因为做的好歹也是个接口测试平台，那就要有平台的样子，各种新工具，新设计，只要业务有帮助，就上。

在系列一开始的时候就说过，做的是平台，所以不要去和postman这种cs单机工具去比，也不要和jmeter去比性能测试，也不要和charles/fiddler去比抓包，也不要和jenkins去比监控。

平台的优势和特点是：多人协作，历史保存，约束流程，符合公司内的小工具和设计，接口管理等一系列的综合体。比如这个自动异常测试功能，就是其他工具不具备的。我们之后还会讲许多这种新的技术功能。

 

1. 打开P_apis.html，找到异常测试的按钮，给它加上onclick，函数名就叫做error_test，传入接口id做为参数。

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

 

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

这个新div的id叫做error_div，style属性直接复制调试层的div即可：div默认隐藏，在js函数error_test中给div变成显示状态即可。

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

这么巨大的返回值量，一次请求基本是不可能把请求体返回来的。

比如有100次请求，最好是发送100次请求，每次只获取一个返回值，依次显示到这个div里，所以先把div给显示出来，再循环发送100次请求，每次得到返回值，都展示在这个div中即可。

可以先做好前端的样式，先展示一次请求的返回值展示的demo看看。然后再在js中让其自动生成所有次请求的展示效果。

看看效果：

 

以上代码：

<!--  异常值测试  -->
<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>

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

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

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

<!--  异常值测试  -->
<script>
    function error_test(api_id) {
        document.getElementById('error_div').style.display='block';
    }
</script>

 

3. 每次发送请求，传给后台的参数都是替换后的，这意味着要在前端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>

看看效果：