teprunner測試平臺用例前置模組開發

dongfanger 發表於 2021-03-25

本文開發內容

現在正式進入測試相關功能開發。teprunner測試平臺底層是pytest,中間層是tep,還沒了解的朋友可以先看看tep的文章,整個平臺的設計思路和後面用例的執行都會基於這個工具。tep的測試用例是放在.py檔案裡面的,全域性變數或者說環境變數是引用的env_vars,公共函式和複用介面是引用的fixtures,在做成平臺後,需要把這兩個部分獨立為兩個功能模組。多個專案的介面自動化資料需要隔離開來,要有個專案管理功能。本文將開發四個用例前置模組:

  • 後臺管理--專案管理
  • 介面自動化--語法說明
  • 介面自動化--環境變數
  • 介面自動化--fixtures

語法說明給出了環境變數、fixtures、用例示例(單個介面、多個介面--增刪改查)、請求方法(get、post、put、delete)的使用方法。

編寫後端程式碼

先建立名為teprunner的app:

django-admin startapp teprunner

在settings的INSTALLED_APPS中新增配置讓app生效:

teprunner測試平臺用例前置模組開發

並在urls.py新增路由:

teprunner測試平臺用例前置模組開發

編輯user/fixtures/user.json,新增一個介面自動化的選單:

teprunner測試平臺用例前置模組開發

截圖只截了管理員,測試和開發角色,也需要新增上。access均為true,這三個角色都可以訪問。新增後把資料同步到資料庫:

python manage.py loaddata user

編輯teprunner/models.py,新增模型:

teprunner測試平臺用例前置模組開發

包括了專案、環境變數和fixture三張表。Project.env_config用於給專案配置多個環境。不同專案不同環境的環境變數不一樣,在EnvVar中新增了project_id和env_name,並按("project_id", "env_name", "name")作為唯一鍵,不允許重複。不同專案的fixtures不同,不關心環境,在Fixture中只新增了project_id。

Fixture.code用於存放程式碼,欄位型別為models.TextField,容納更多字元。

models編寫好後,遷移到資料庫:

python manage.py makemigrations
python manage.py migrate

新建teprunner/serializers.py檔案,新增序列化器:

teprunner測試平臺用例前置模組開發

資料庫欄位的命名是用的下劃線,介面返回前端和前端傳參是用的駝峰,所以這裡通過source這種方式給env_config、project_id、env_name、creator_nickname進行了序列化器的重新命名。為了前端更方便處理,使用serializers.CharField把int轉化為了str,由於請求時id非必須,增加引數required=False。

teprunner會有很多檢視,寫在一個檔案裡面有點臃腫,這裡建立views資料夾,新增views/project.py專案檢視:

teprunner測試平臺用例前置模組開發

Django REST framework的ModelViewSet檢視類能節省很多程式碼,只需要三行就把專案增刪改查介面做了。project_env是函式檢視,請求方法為GET,它的作用是返回專案環境列表,當前專案和當前環境,預設為第一個專案和第一個環境。

前端需要切換不同專案和不同環境,下拉框資料來源於這個介面。

新建views/envvar.py新增環境變數檢視:

teprunner測試平臺用例前置模組開發

環境變數跟專案和環境是強關聯的,需要根據專案環境進行過濾,所以重寫了list方法,從前端請求拿到curProjectId和curEnvName,通過EnvVar.objects.filter進行過濾。from django.db.models import Q支援多種過濾條件,這在後面的程式碼中還能看到,比如模糊匹配。

新建views/fixture.py新增fixture檢視:

teprunner測試平臺用例前置模組開發

fixture跟專案是強關聯的,需要根據專案進行過濾,所以重寫了list方法,從前端請求拿到curProjectId,通過Fixture.objects.filter進行過濾。Fixture有個creatorNickname欄位,新增fixture時使用的是當前登入使用者的暱稱,修改fixture時需要用已儲存的建立者,重寫update方法來實現這個處理。

最後,新建teprunner/urls.py檔案,把檢視新增到路由中:

teprunner測試平臺用例前置模組開發

編寫前端程式碼

編輯package.json,新增依賴:

teprunner測試平臺用例前置模組開發

fixtures是程式碼形式的,這是測試平臺第一次使用程式碼編輯元件。新增依賴後記得執行npm install進行安裝。

編輯router/index.js:

teprunner測試平臺用例前置模組開發

新增介面自動化的路由,並把home重定向改為語法說明路由。children表示子路由。path是路由地址。meta.title用於顯示選單名。

編輯views/console/index.vue:

teprunner測試平臺用例前置模組開發

新增專案管理選單。新建ProjectManagement.vue和AddProject.vue,新增專案管理增刪改查程式碼,跟使用者管理類似,不再另加贅述。值得注意的是環境配置placeholder="請輸入環境英文名(多個環境英文逗號分隔)",因為tep.env_vars.mapping會用到環境名作為key,所以只能用英文名!

編輯components/WrapComponent.vue,新增一個插槽:

teprunner測試平臺用例前置模組開發

用於切換專案和環境。新建components/ProjectEnv.vue檔案:

teprunner測試平臺用例前置模組開發

定義了兩個下拉框:專案和環境。v-if判斷是否需要顯示。@change在切換下拉選項時呼叫對應方法。@click.native指在點選開啟時獲取資料。然後用v-for遍歷列表展示下拉選項。環境和專案資料是從localStorage中讀取的:

teprunner測試平臺用例前置模組開發

可以開啟F12切換到Application,點選左側Storage/Local Storage檢查是否有資料:

teprunner測試平臺用例前置模組開發

資料寫入的地方稍後會講到,先接著講ProjectEnv.vue檔案:

teprunner測試平臺用例前置模組開發

切換專案會更新環境列表和當前環境資料,這樣就把這兩個下拉框關聯了起來。切換環境會更新當前環境資料。圖中框起來的this.$emit是個重要知識點。ProjectEnv.vue是個子元件,它是要巢狀到其他元件去的,比如EnvVar.vue,它們是父子元件的關係。有這麼個需求,切換專案時,執行一次查詢操作,把查詢結果更新一下。切換專案的程式碼是ProjectEnv.vue子元件提供的,執行查詢操作的程式碼是EnvVar.vue父元件提供的,子元件就是通過this.$emit把這個訊息通知給父元件的。

新建views/teprunner/index.vue檔案,新增介面自動化選單:

teprunner測試平臺用例前置模組開發

剛才說的專案環境資料的寫入就是在這裡進行的:

teprunner測試平臺用例前置模組開發

每次載入時,如果localStorage沒有projectEnvList的話,就請求/teprunner/projects/env去拿。

新建Grammar.vue,語法說明是個硬編碼的靜態檔案,純展示,無互動。接著新建EnvVar.vue和AddEnvVar.vue,編寫環境變數的增刪改查,新建Fixture.vue和AddFixture.vue,編寫fixtures的增刪改查,比較類似,不再另加贅述。通過fixtures模組的程式碼,看看ProjectEnv.vue是如何用的:

teprunner測試平臺用例前置模組開發

:showEnv與ProjectEnv.vue子元件的屬性對應,用來控制是否顯示環境,Fxiture不需要顯示。@changeProject與ProjectEnv.vue的this.$emit對應,接收子元件訊息,執行查詢列表操作:

teprunner測試平臺用例前置模組開發

AddFixture.vue用到了程式碼編輯器:

teprunner測試平臺用例前置模組開發

@init指定了初始化方法:

teprunner測試平臺用例前置模組開發

離程式碼完美顯示還差最後一步:程式碼高亮。在assets/js新增highlight.js,並在main.js中匯入:

teprunner測試平臺用例前置模組開發

小結

經過本文的開發,如何新增選單,前後端如何完成基本的增刪改查開發已經進行了很充分的展示。遇到不會寫的程式碼,也都能從已公開原始碼中找到參考。行動起來吧!邊學邊練,動手試試把用例管理的增刪改查寫出來,等我把下一篇寫出來後,比較比較,可能會有更深刻的印象。CRUD會了,定製化開發還會遠麼。

參考資料:

前端原始碼 https://github.com/dongfanger/teprunner-frontend

後端原始碼 https://github.com/dongfanger/teprunner-backend