fiddler-10-結合 Mock.js 僞接口數據進行測試（下）

前言

你會mock嗎？第三方支付接口怎麼測？數據只有一條，測不到前端的分頁功能？

常見的 Mock 方式：

• 將模擬數據直接寫在代碼裏
• 利用 JavaScript 攔截請求
• 利用 Charles、 Fiddler 等代理工具攔截請求

本篇利用 fiddler 攔截，當您學會使用 fiddler 攔截 + Mock.js 後你會認識到它的強大的緣由之一，不扯了直接開始吧。

1、生成多條數據進行測試

一、fiddler 抓包將接口返回數據拿下。

 二、粘貼至 mock.js 建立接口，點擊一下【格式化】美化您的數據：

 三、刪減，咱們只要一條數據就行了，以下：

 四、開始 Mock.js 經常使用語法表演：

{
  "msg": "查詢成功",
  "obj": {
    "current": 1,
    "field1": "",
    "field2": "",
    "item": null,
    "pages": 1,
    "records|10": [{                    // 每頁 10 條數據，咱們寫固定10條顯示
      "updateDate": "@datetime",        // 隨機日期 + 時間
      "num": 100,
      "delFlag": "0",
      "type": "1",
      "cateName": "加盟優惠券:@cname",  // 隨機名稱
      "isUp": "1",
      "updateBy": "@id",                // 隨機id
      "premise": "0",
      "scope": "3",
      "showHide": "1",
      "startTime": "@datetime",         // 隨機日期 + 時間  
      "id": "@id",
      "state": "1",
      "isRepeat": "0",
      "day": 0,
      "createDate": "@datetime",       // 隨機日期 + 時間  
      "useExplain": "會場活動:@cname", // 隨機名稱
      "howMany": 0,
      "timeLimit": "1",
      "limitGet": "55",
      "createBy": "@id",             // 隨機id
      "money|100-1000": 100,         // 隨機面值： 100-1000
      "name": "滿減優惠：@cname",    // 隨機名稱
      "endTime": "@datetime",
      "remarks": ""
    }],
    "size": 10,
    "total|5-25": 5                 // 10個一頁，隨機 5-15 個，那麼將有1-3頁
  },
  "status": "1",
  "success": true
}

五、回到 fiddler ，點擊 AutoResponder，將左側須要造的接口拖拽進來：

 六、更改成 Mock.js 造數據的地址，複製粘貼至 fiddler 中：

 七、fiddler 粘貼地址，及開啓攔截：

 八、前端查詢數據測試，有沒有分頁看你的了：(發現沒有分頁，那就能夠去提bug了)

2、支付 mock

一、編寫您的數據，首先您的知道當何時返回充值狀態的數據，並且返回的數據有哪些？

好比簡單的：1-3 表示：成功，失敗，待確認

二、當前端某個出發請求支付狀態，咱們就能夠造各類數據進行模擬支付測試，固然還以一種辦法，直接充錢，找公司財務報銷。。。

支付 mock 不細說，你們能夠按照這樣的方法進行 mock 支付測試，最好結合接口文檔進行，否則就是本身在瞎搞了。歡迎來QQ交流羣一塊兒學習：482713805