基於 Django 和 Vue 前後端分離介面自動化平臺

基於Django和Vue前後端分離介面自動化平臺

前言

寫這個平臺動力一方面源自於工作，每次發線上版本，迴歸場景太多，可能覆蓋不全，導致一些覺得不會影響到的模組漏了出現問題；一方面之前寫介面自動化和appUi自動化的框架，雖可穩定執行，但是用例一多，即使用檔案管理，我都覺得不容易維護，操作麻煩，且不方便直接定位問題，所以萌生了一個想做一個多人視覺化操作維護性強的平臺；一方面也當做對自己進步的一個證明，2019年12月20日提交兩端第一段程式碼，之後的3個月，白天的業務繁忙，晚上繼續節奏感的敲，從資料庫設計到頁面設計再到頁面實現再到後端的邏輯實現再到穩定執行，每一步都不易。

線上體驗地址

http://aliyun.0cmm.cn:9527

選擇的主要環境

Django 2.1.7
vue 2.9.6
python 3.6.3
vue-element-admin
Element 元件
Iconfont 圖示庫

實現功能

1、登入jwt鑑權
2、支援專案、介面、用例、環境、郵箱、任務等管理、新增和維護功能
3、支援介面請求資料結果動態獲取
4、支援單介面用例除錯、支援多介面業務除錯
5、支援豐富的動態斷言
6、支援定時任務，支援html郵件報告和平臺報告生成、每個失敗用例均可以快速定位和除錯
7、支援用例執行不正確時候對應模組下分散式各個伺服器微服務日誌獲取
8、支援不同專案介面獨立環境地址執行
9、支援介面批量匯入

層級關係

專案>模組>（介面=用例）

頁面展示

首頁記錄了專案、介面、用例、任務計劃的有效總數，點選均可以跳轉到對應操作頁面
操作小助手幫助操作者更好的瞭解使用流程

功能介紹

專案管理

專案管理頁面實現專案和模組的增刪改查功能，專案下包含模組（支援新增和查詢），示意圖如下

介面管理

介面列表

介面管理主要實現了介面的增刪改查。

介面新增

1、介面關聯專案和模組
2、請求方式目前新增了主流的兩種，post和get
3、資料傳輸方式為json格式或者data
4、可以新增多個header和body，每個header欄位或者data欄位都有對應的型別可供選擇，用於請求介面使用正確的值的型別。
5、介面地址，如果資料庫已經儲存了這個介面，則會提示“已經新增過該介面”，不會重複新增
6、支援簽名，簽名的規則需要後端寫死
7、除了header和body以及描述可以不用填，其餘的都得填寫

介面批量匯入

1、一次僅支援一個檔案的匯入
2、嚴格按照表格模組的格式進行填寫，表格第二行是模板填寫方式，不用刪除，這行不會執行，會從第三行開始執行匯入的順序
3、如果表格中的介面已經存在在平臺了，則會跳過，不如錄入到資料庫，避免介面重複新增
4、表格header和body以及描述可以不用填寫，若填寫header和body，請嚴格按照表格第二行進行操作

用例管理

用例列表

用例列表管理包含了基本的增刪改查，以及執行功能

用例列表按照用例型別分有4個：全部用例、公共前置用例、單介面用例、業務用例

公共前置用例

這個用例型別比較特殊，執行計劃的時候，一天只執行只執行一次（手動執行可以執行多次），且會優先執行，比如登入用例，結果中帶token，這個執行一次後，後面用例需要引用這個token值，就不用再次執行一遍用例。

單介面用例

這個用例型別，用例有且只有一個介面，無前置用例，比如app中的搜尋，登入或者不登入都可以用

業務用例

這個用例包含了多個介面組成一個業務，允許有前置用例

用例單個執行

點選執行，出來選擇環境的彈框，專案+環境

環境可以選擇已經配置好的環境，或者自己填寫一個環境執行，填寫環境格式支援http和https如：http://192.168.1.1:8080

點選除錯用例則有對應的執行結果彈框，這個用例有多少個介面執行了，則就有多少個介面的結果在執行彈框中

新增用例

新增用例是整個專案中的核心，功能最多，最靈活，後端邏輯也最複雜

這個當時做的時候就寫了3個版本(┬＿┬)，父子元件之間的資料交換以及頁面互動。

用例型別

1、單介面 用例型別：用例步驟中只有一個介面，步驟中無前置用例

2、多介面業務型別：用例步驟中，包含了多個介面，也允許每個步驟中有前置條件

3、公共前置用例型別：用例步驟中，可以有多個介面，如果需要這個型別的用例的值，一天只會被執行一次（比如一個計劃計劃中，登入執行一次就可以被其他用例都引用到，不需要重複執行）

新增介面，形成步驟

建立一個用例前，當然先選擇一個介面，新增一個介面就會多一個步驟，步驟新增後會是摺疊效果，一個介面支援多次新增

一個步驟中包含有5個組成部分

1、介面基本資訊

2、前置條件，這裡只支援新增單介面型別的用例，支援新增多個

3、介面請求資訊，包含了兩個部分，header和body（如果新增介面的時候已經填寫了欄位，則欄位資訊會帶過來）

header或者body中的每一個欄位都會有這幾個資訊：

​ ①欄位名字：如果介面新增中填寫了欄位名字，選擇完一個介面後則會直接同步
​ ②欄位值：動態取某個介面執行的結果或者某個用例執行的結果寫法 $token（$為後端判斷的特殊識別符號），如 果不是動態的，則無需要加$
​ ③欄位值的型別：如果介面新增中填寫了欄位型別，則會直接同步
​ 型別說明： str，表示這個值是string型別

​ int，表示這個值是整型

​ boolean，表示這個值是布林型別，欄位值則填寫true或者false

​ float，表示這個值是浮點型

​ json，表示這個值是json串，欄位值寫法如{"test":"test"},當然如果json串裡面有動態值則需要這樣寫{"test":"$test"}，也是需要$作為特殊表示，實際場景中還有更加複雜的動態變數，一個key中的value值可能需要取多個介面中產生的結果值，於是就有了{"test":"$test$1$1"},第一個是要取的值，第二個表示從哪個介面id或者用例id中取，第3個表示取的下標，來應對複雜的動態取值。

​ list，表示欄位值型別是個陣列

​ 獲取當前時間，欄位值不需要填寫

​ 簽名，這個比較特殊，獲取的是需要簽名的介面請求，欄位值不需要填寫

​ null，欄位值不需要填寫

​ 空字串，欄位值不需要填寫，表示 ‘’

​ ④是否取其他介面或者用例的值勾選框：勾選了，則表示這是一個動態的欄位值

​ ⑤選擇哪個介面或者哪個用例：
​ 介面id：步驟中基本資訊會有介面id，可以取到那個步驟介面執行後的值
​ 用例id：非公共前置用例，取某個用例執行後的值，這裡一般用於取前置用例的值
​ 公共前置用例id：取只執行一次的值，一般可以用於取登入後返回的token

​ ⑥ID:寫介面ID或者用例ID或者公共前置用例id

​ ⑦下標：所需要的值可能在那個介面執行結果中存在多個，所以需要用下標取值，只有一個值，則下標為0

4、斷言

​ 斷言中的每一個欄位都會有這幾個資訊：

​ ①實際結果欄位，需要斷言的結果欄位

​ ②實際結果欄位下標，該介面執行結果中可能會產生多個這個結果欄位，所以需要取下標，只有一個值，則下標為0

​ ③比較符，實際結果和預期結果做比較

​ =，實際結果=預期結果

​ >,實際結果>預期結果

​ <,實際結果<預期結果

​ !=,實際結果!=預期結果

​ in,實際結果in預期結果

​ ④預期結果值，填寫一個預期結果

​ ⑤預期結果值型別，填寫預期結果值型別

5、步驟的操作

​ 1、刪除圖示，將這個步驟刪除

​ 2、上移圖示，將這個步驟上移

​ 3、下移，將這個步驟進行下移

用例除錯

​ 考慮到一個用例中，存在多個介面，可能介面所屬專案不一樣，所以可以新增多個執行環境

​ 這裡可以填寫完步驟資訊以後，就除錯一波，可以用來寫斷言

任務計劃管理

任務計劃列表

任務計劃列表管理包含了基本的增刪改查，以及執行功能

執行是非同步進行的，執行結束後，會生成報告，如果一個計劃在執行

執行包含了3中狀態

​ 未執行，一個計劃剛建立的時候，會是這種狀態

​ 執行中，只要有一個計劃正在執行中的，點選其他計劃會提示有計劃正在執行中，防止執行介面時候，資料錯亂

​ 執行結束，該計劃執行結束

新增定時任務

是否啟用

預設是關閉狀態，關閉則不會定時執行這個計劃，開啟則會在選擇的時間段內執行這個計劃，啟用後，一天只執行一次。

收件郵箱

需要在配置“郵箱管理”新增發件郵箱和收件郵箱，
1、發件郵箱用於傳送郵件，不配置，則無法傳送郵件，
2、收件郵箱用於定時任務結束後會產生報告，用於接收郵箱

專案環境

新增用例執行所需要的環境，選擇環境需要在配置裡“環境管理”新增環境，用於定時任務執行，當然也支援其他地址的填寫

微服務日誌

需要在配置“微服務日誌”新增好微服務的資訊，當執行的某個用例異常產生錯誤的時候，新增這個微服務日誌用於開發快速定位問題

選擇用例

選擇用例有兩鍾方式，一種是按專案選擇，選擇專案，則會執行一整個專案的有效的用例；一個是選擇所有的用例，手動新增想要執行的用例

報告

產生方式：

1、定時任務執行計劃

​ 定時任務執行結束，會產生兩種報告，一種是純html寫，用於傳送郵件使用；另一種則在平臺內，視覺化，更詳細，方便定位

2、手動跑任務計劃

​ 只會產生平臺測試報告
平臺測試報告如下：

郵箱報告如下：