平臺(tái)介紹

調(diào)研了業(yè)界的一些用例管理平臺(tái)（testlink/qc/禪道/云效等）后品腹，整理了一個(gè)用例管理平臺(tái)應(yīng)該具備的基本功能：

image

最終的系統(tǒng)架構(gòu)：

image

使用方式

接入其他平臺(tái)

agiletc嵌入到其他項(xiàng)目管理平臺(tái)的難點(diǎn)主要是前端。當(dāng)前前端也已經(jīng)采用了組件化的方式，方便外部引用拾并。前端目錄結(jié)構(gòu)如下：

web
|-- dist  // 編譯好的文件
|-- src
     |-- components  // 核心組件檬寂，caselist&casemgt
     |-- pages
          |-- casepage      // 用例列表
          |-- testTask        // 用例詳情
          |-- testTaskList  // 基于需求查看任務(wù)列表
     |-- …

如果是接入其他平臺(tái)，可以直接參考pages目錄下的代碼溯警。

import Casemgt from './components/case/casemgt'
<Casemgt
     {...this.props}
     type="oe"
     baseUrl=""
     kityApiPrefix="KITY_dev" 
     oeApiPrefix="" 
     doneApiPrefix=""
/>

其中的幾個(gè)參數(shù)如下：

獨(dú)立使用

運(yùn)行本項(xiàng)目盖淡，可以看到入口頁(yè)年柠，點(diǎn)擊之后進(jìn)入用例列表。如下所示禁舷”肷迹可以看到創(chuàng)建的用例集列表。

image

用戶可以創(chuàng)建新的用例集牵咙，填寫(xiě)用例集名稱派近、關(guān)聯(lián)的需求即可〗嘧溃可以直接上傳xmind渴丸。具體如下圖所示。

image

創(chuàng)建完成用例集后另凌，會(huì)直接跳轉(zhuǎn)到編輯界面谱轨，如下圖所示。

[圖片上傳中...(image-6b561-1634785769955-7)]

編輯完成吠谢，保存用例后土童，可以退回列表頁(yè)。此時(shí)可以創(chuàng)建測(cè)試任務(wù)工坊。

[圖片上傳中...(image-b76627-1634785769955-6)]

創(chuàng)建測(cè)試任務(wù)献汗，需要填寫(xiě)相關(guān)的信息，如負(fù)責(zé)人王污、測(cè)試周期等罢吃。此處支持通過(guò)優(yōu)先級(jí)或者自定義標(biāo)簽的方式過(guò)濾測(cè)試用例。

[圖片上傳中...(image-148593-1634785769955-5)]

測(cè)試任務(wù)創(chuàng)建好之后昭齐，會(huì)展示在對(duì)接的用例集下面尿招。

image

之后可以點(diǎn)擊測(cè)試任務(wù)名稱，通過(guò)標(biāo)記圖標(biāo)的方式執(zhí)行測(cè)試任務(wù)阱驾。

image

平臺(tái)開(kāi)發(fā)過(guò)程中的問(wèn)題

1.業(yè)界的用例平臺(tái)有哪些就谜？

a.線下用例管理方案一般有excel和xmind。

優(yōu)點(diǎn)

• 功能完善：能夠滿足用例管理訴求
• 穩(wěn)定可靠
• 良好的操作體驗(yàn)

缺點(diǎn)

• 用例集增加導(dǎo)致的管理困難
• 測(cè)試過(guò)程黑盒里覆，用例編寫(xiě)和測(cè)試執(zhí)行過(guò)程無(wú)感知丧荐，無(wú)法進(jìn)行過(guò)程改進(jìn)
• 協(xié)同效率低

b.線上用例管理

用例管理
測(cè)試計(jì)劃管理
測(cè)試統(tǒng)計(jì) | 需求管理
測(cè)試用例管理
測(cè)試過(guò)程管理
BUG管理
權(quán)限管理 | 需求管理
測(cè)試用例管理
測(cè)試過(guò)程管理
BUG管理
權(quán)限管理 | 腦圖導(dǎo)入
測(cè)試用例管理
測(cè)試過(guò)程管理
BUG管理
權(quán)限管理 |

2.腦圖編輯器方案有哪些租谈？

選擇腦圖編輯器時(shí)，主要考慮了所處的環(huán)境和給用戶的價(jià)值，環(huán)境包括依托的系統(tǒng)架構(gòu)和當(dāng)時(shí)的人力現(xiàn)狀割去。

調(diào)研了如下的腦圖框架：

采用angular框架
網(wǎng)頁(yè)版腦圖編輯 | JavaScript
網(wǎng)頁(yè)版腦圖編輯 | JavaScript
網(wǎng)頁(yè)版腦圖編輯 | Java
本地APP版本咖城，無(wú)網(wǎng)頁(yè)版 | Java
本地APP版本茬腿，無(wú)網(wǎng)頁(yè)版 |
| 用戶價(jià)值 | 交互基本跟xmind一致
兼容xmind用例 | 與xmind操作差異大
支持節(jié)點(diǎn)折疊
沒(méi)有圖標(biāo)標(biāo)識(shí) | 與xmind操作接近
圖標(biāo)不易用
不支持節(jié)點(diǎn)折疊 | 操作習(xí)慣一致 | 交互與xmind接近 |
| 開(kāi)發(fā)成本 | 中：百度出品，良好的分層封裝 | 低宜雀，約4K | 中 | 高：工程復(fù)雜切平，代碼量30K+ | 代碼未下載成功 |

最終，選擇了百度的kityminder進(jìn)行二次開(kāi)發(fā)辐董。

3.多人協(xié)同是怎么做的悴品？

多人協(xié)同經(jīng)歷了3個(gè)版本。 最開(kāi)始采用了加鎖的方案简烘，不支持多人實(shí)時(shí)協(xié)同苔严。其中1個(gè)用戶打開(kāi)編輯后，其他用戶無(wú)法編輯孤澎。 之后有些人反饋的多人協(xié)同的訴求届氢。為了支持快速上線，我們采用了diff-patch的方案解決編輯沖突覆旭，用polling實(shí)現(xiàn)實(shí)時(shí)通信退子。如圖所示。用戶A變更后姐扮，會(huì)將diff發(fā)送到服務(wù)端絮供，而每個(gè)客戶端會(huì)定時(shí)從服務(wù)端拉起最新的case。這里就存在1個(gè)問(wèn)題茶敏，如果拉去時(shí)間設(shè)置過(guò)短壤靶，客戶端與服務(wù)端的交互就會(huì)特別頻繁；設(shè)置時(shí)間過(guò)長(zhǎng)惊搏，由于更新不及時(shí)贮乳，就會(huì)導(dǎo)致用例丟失。實(shí)際該功能上線之后交互體驗(yàn)較差恬惯。 最后采用了websocket的方式解決實(shí)時(shí)通信問(wèn)題向拆。如圖所示，客戶端A的變更會(huì)及時(shí)發(fā)送到服務(wù)端酪耳，服務(wù)端接受變更后浓恳，會(huì)推送給其他的客戶端刹缝。

[圖片上傳中...(image-3d332a-1634785769954-2)]

4.分布式部署怎么做？

為什么要分布式部署呢颈将？分布式部署的好處：1.避免單點(diǎn)故障導(dǎo)致的服務(wù)不可用梢夯；2.承載更大的用戶量。如果直接進(jìn)行分布式部署晴圾，會(huì)存在如上圖所示的問(wèn)題颂砸。A/B/C三個(gè)客戶端，均打開(kāi)1個(gè)用例死姚，服務(wù)端會(huì)建立3個(gè)session來(lái)保存與客戶端的鏈接信息人乓。這時(shí)出現(xiàn)3個(gè)session不在1個(gè)容器中。例如用戶A編輯用例后都毒，同步到服務(wù)端色罚，服務(wù)端發(fā)送變更到clientB，但是C就無(wú)法獲取最新的變更温鸽。

image

這是一個(gè)服務(wù)間通信的問(wèn)題保屯。首先想到的就是用消息隊(duì)列的方式，如圖所示涤垫，用戶A變更后姑尺，同步到服務(wù)端，服務(wù)端會(huì)將變更發(fā)送到客戶端B蝠猬，并且發(fā)送內(nèi)容到消息隊(duì)列切蟋，服務(wù)2就可以消費(fèi)消息，更新用例榆芦，并同步到客戶端C柄粹。此時(shí)存在一個(gè)問(wèn)題是：消息是一個(gè)異步動(dòng)作。這里匆绣，如果clientC是1個(gè)新打開(kāi)用例集的用戶驻右，如果連接到服務(wù)2上，可能會(huì)發(fā)現(xiàn)沒(méi)有打開(kāi)過(guò)該用例崎淳，就會(huì)從數(shù)據(jù)庫(kù)讀取用例堪夭，就會(huì)讀到老的用例。因此增加了1層redis拣凹。來(lái)存session中最新的case content森爽。

image