前端測試工具介紹

js_test_framework

此工具主要用於web前端單元測試，透過直接在瀏覽器中呼叫js方法，實作介面上的現場測試

git位址:

流程

1. 透過testLive在現場錄製所需的請求，testLive會記錄期間所有的請求，同時可以重新執行

2. 將testLive錄製後的請求，透過output方法輸出至控制台，將輸出的data寫入自訂模組的RequestData中，同時在訂data後註冊進requestFactory

3. #編寫自訂模組的Test.js，透過呼叫requestFactory中的網路請求，同時編寫需要判斷的斷言，將各個模組的單元測試和流程測試，註冊到testManager中

4. 執行testManager中的測試案例，查看測試執行中的結果，同時分析結果

#檔案目錄結構範例

basic：核心模組

testLive
requestFactory
testManager

#module：外部模組，僅為範例

#user

userRequestData
userTest

product

productRequestData
productTest
...

三大模組

模組間都各自獨立，可自訂單獨替換

---

testLive

    前端录制现场,通过调用回调接口,记录下用户在前端界面的所有操作记录

對外介面

• #startRecord 開始錄影,name為錄影的名稱

• #stopRecord 結束錄影

• output 輸出所有錄影的結果集

• runRecord 運行錄影

• #shouRequest 查看所有錄影的目錄結構與詳情

• callback 對外回呼函數，外部函數可在方法呼叫出，呼叫此回呼

#拓展方法

• ajaxOverride 重寫ajax請求，將所有jquery的ajax加入回呼

---

##requestFactory

    请求工厂,主要用于收集用户的所有请求记录

對外介面

• registerMethod 註冊方法，透過此方法外部呼叫可在requestFactory中註冊方法

• registerData 註冊數據，此方法與registerMethod類似，只是參數結構不同

• getMethod 透過方法名稱取得方法{name:自訂方法名稱,url:網路請求位址,methodType:請求方式,run :執行方法}

• getMethod.run 透過getMethod後可直接呼叫run函數，進行方法執行，回傳結果{costTime:開銷時間,requestData:請求參數,type:請求方式,url:網路請求位址,responseData:伺服器回傳結果,success:此次請求是否成功}

• #showMethods 顯示requestFactory中所有的請求

---

#testManager

    测试集成,用于管理测试,将测试模块化,以及结果的展示

對外介面

• registerMethod 註冊方法，透過此方法外部呼叫可在testManager中註冊方法

• registerData 註冊數據，此方法與registerMethod類似，只是參數結構不同

• run 運行方法,傳回值為本次運行的結果詳情
  目錄結構為｛assertQueue:所有斷言結果集合,responseQueue:所有請求結果集合,errAssertQueue:所有斷言失敗集合,errorResponseQueue:所有網路請求失敗集合,spendTime:請求時間開銷,success:是否成功｝

• #showAll 展示測試所有模組的目錄結構展示

• showMethods 透過模組名，展示模組下所有測試方法

• 基於網頁分析工具：

• 1.       阿里測

• #2.　　 百度應用效能偵測中心

• 2.       Web Page

  #3.       PingDom Tools

• 4.       GTmetrix

•  

• 基於瀏覽器分析工具：

• 1.       Chrome自帶工具F12

• 2.       Firefox外掛程式：YSlow(Yahoo工具)
• >
  3.       Page Speed（google）

• 內部工具類別

assertQueue 斷言佇列此類別用於記錄與判斷使用者的目標結果與實際結果是否一致，同時輸出結果集

result 相關資料

• recordResponse 用於記錄網路請求的結果

• assert 使用者設定的斷言
#

以上是前端測試工具介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！