大家好~我是
米洛
法严!
我正在從0到1打造一個開源的接口測試平臺, 也在編寫一套與之對應的完整教程
村砂,希望大家多多支持烂斋。
歡迎關注我的龔仲耗測試開發(fā)坑貨
,獲取最新文章教程!
回顧
上一節(jié)我們粗略介紹了下怎么設計前端
頁面础废。時隔一日汛骂,博主已經(jīng)把代碼碼好了。
不得不說评腺,前端代碼還是非常非常難寫的帘瞭,感覺同樣是crud,卻比后端復雜許多
蒿讥。這一節(jié)我們繼續(xù)補充這塊內容蝶念。
恭喜EDG獲取S11冠軍,EDG
牛皮芋绸!蹭個熱度~
細節(jié)
細節(jié)部分大家可以參看具體的代碼邏輯
媒殉,我這邊稍微介紹下頁面的調整。
數(shù)據(jù)構造器(前置條件)
這塊采用了Antd pro Components
摔敛,也就是專業(yè)級的Card組件廷蓉。看起來確實比我自己寫的好上100個檔次:
前后對比:
- 改造前
配色也不知道怎么配桃犬,我一直覺得前端很難刹悴,css是門學問。
- 改造后
來看看ProCard的代碼:
- 安裝ProCard
npm install --save @ant-design/pro-card
- 使用
可以看到api比較簡單土匀,avatar就是卡片的圖標,title是標題扯饶,description是描述恒削。很習慣的antd風格池颈。
用例列表部分
我們都知道測試計劃就是為了組裝測試用例
的尾序,所以我們這邊給出了一組數(shù)據(jù),可以通過項目獲取到該項目下的測試用例
樹躯砰。
選中以后每币,下方會出現(xiàn)一個可拖拽的case列表,如果對于順序有嚴格要求的琢歇,可以拖動列表兰怠,改變case的執(zhí)行順序。
與之對應的李茫,需要通過項目獲取到case數(shù)據(jù):
也可以通過目錄來選擇case揭保。
后端改動如下:
因為我們是有通過項目獲取case目錄的方法的,現(xiàn)在缺的就是是否要繼續(xù)獲取目錄下的case魄宏。
所以定義了一個case_node的參數(shù)(參數(shù)是一個方法秸侣,獲取子節(jié)點的方法)。
如果有該方法宠互,則調用之獲取對應的節(jié)點味榛。
由于select數(shù)據(jù)比較奇怪,我們的數(shù)據(jù)庫存的case_list
又是id予跌,所以我們想知道case名字并不是很容易搏色。
于是這里帶出項目樹的同事,帶出了case_id => case_name的映射關系: case_map券册。
這樣做肯定會有問題频轿,特別是數(shù)據(jù)量多的情況下。但一個project下的case有這么大規(guī)模的時候烁焙,也可以重構
了略吨。
最后,編寫該接口:
前端通知部分
通知部分很簡單考阱,也是常規(guī)表單翠忠,給它們加上圖標會更友好:
通知具體的邏輯還沒有做,這涉及到人員的手機號乞榨,郵箱等秽之〉庇椋肯定是需要一個用戶管理頁面,用戶也需要更新資料的頁面考榨。
APScheduler的坑
不得不說跨细,這個庫還真的是有一些問題。雖然看起來是比較美好河质,但現(xiàn)實給人當頭一棒冀惭。
-
踩坑
當編輯測試計劃的時候,使用scheduler.modify_job掀鹅,就算你改變了trigger散休,也不會使cron表達式更新。
最后來張穩(wěn)定運行測試計劃的圖:
最新的代碼限府,我已經(jīng)部署了。
歡迎大家提各種建議和意見痢缎。