這個功能是什麼意思呢？簡單點說，就是一個介面儲存好之後，你儲存的請求資料都是正常的。

但是錯誤的用例也就是無效等價類中，具體引數格式不同的要怎麼測呢？

正常來說有以下幾種型別：整形，字串，單字元，超長字串，為空，全空格，有中文，純英文，含標點符號，陣列，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>

看看效果：