建立 Visual Studio Team Service 的 Build Process

Build: 主要目的在於整合,編譯程式,並且準備好進行部署

Release: 必須要知道預計部屬的環境,例如:TestStage & Production

基本概念在於要分開 Build & Release,也就是 Compile 只需要一次,就可以部屬到不同的地方,這樣才可以讓程式的變動通知到不同的地方(不然往往就會有測試環境是版本一,但QA環境是版本二,造成程式不一致,很難知道測試正確或者錯誤所反應的程式到底是否一致)。

以下用 asp.net core target .net core 2.0 為範例(使用不同的環境需要不同的設定),建立 Build Definition 方式如下:

  • 選擇 ASP.NET Core Template:如果專案是 .net Core Console 同樣可以使用這個 Template

 

 

  • 指定 Hosted VS2017 (代表可以使用 VS2017 的開發環境進行編譯)

  • 指定 .Net Core Version,請注意一定要指定 2.0,因為預設是 1.0

上圖要注意 Use Package from this VSTS feed,因為我們有使用 VSTS 當作內部的 nuget source,因此這裡也要指定

目前 .net 2.0 會在左方產生『previewtag,因此要注意上圖的 Restore, Build, Test & Publish 都要是 2.0

  • 設定 publish 的對應環境:使用 dotnet core publish 要指定環境
  • 設定 Trigger:主要目的在於讓原始碼的更新可以直接排成,不需要手動排入 QUEUE 中。設定方式很簡單,在 Trigger 中指定方式即可:

指定當 Source code Commit 時候,就自動進行排程。

 

  • 下載已經 publish 的檔案:透過 Build 可以在 Artifact 頁簽直接下載編譯完成的檔案:

 

使用 Visual Studio Team Service 的 TEST MANAGER

測試是我們每一個 BACKLOG 都必須要完成的任務,VSTS 已經內建這樣的服務:

此項服務依據註冊等級有區分不同的權限,目前使用最基本的授權(BASIC ACCESS LEVEL)無法在此新增 TEST PLAN(更高一階的 VISUAL STUDIO / MSDN ENTERPISE授權就有),因此只能由 TASK / BACKLOG 新增測試任務:

如下(下圖範例只有一個測試,但實際上可以有很多個):

一旦加入後,TEST 頁面中就會顯示此任務與對應的 TEST ACTION

透過 CRHOME EXTENSION 執行測試

MICROSOFT 提供 CRHOME TEST AND FEEDBACK EXTENSION 可以方便使用者依據設定的 actions 執行測試,這些測試可以透過影片錄製記錄測試過程與結果,若發現問題也可以直接截圖紀錄 Bug。

作法如下:

  • 首先,使用者 Chrome 開啟 VSTS 並且點選 Package Extension

開啟下方的 Chome install,就可以在 Chrome 上面安裝 Test & Feedback 套件:

點選『設定』,然後輸入要連結到 VSTS 的網址,就可以看到對應的專案,點選要測試的專案 TEAM 如下:

 

  • 點選 Test Action,在更多的選項中,點選 『Run test』

就會開啟新的 Chrome 頁面,顯示要執行這個測試的相關步驟:

可以點選右上角的『錄製』,就會開始記錄操作畫面:

然後開啟 Chrome 頁簽,輸入測試網址開始執行測試,就會自動錄製,可以選擇錄製整個桌面,或者特定視窗(一般就是crhome的視窗)。

這時候就可以依據步驟說明,點選是否已經通過測試(下圖綠色勾勾):

當完成所有的測試,就可以點選上圖左上方的『Save and close』就會將結果記錄到 VSTS中。可以看到顯示『Passed』代表這個測試已經完成。

可以點選 View Test Result,Details 就會有顯示 webm 的影片,可以播放觀看。

使用 Chrome Extension 的最重要是可以直接建立 Bug;步驟一樣點選 Run Test,但在特定步驟可以點選『失敗』:

上面的 COMMENT 就是讓我們輸入錯誤內容,然後點選右上方的『Capture Screen Shot』,會出現讓我們選擇要截圖的位置:

如果使用 IE,必須要選擇『整個畫面』,因為IE無法呈現在『應用程式視窗』中。選擇截圖很簡單,就只需要拖拉範圍區間即可:

拖拉完畢後,就會出現標示畫面(下方有框線、標示與文字可以輸入相關的描述):

輸入想要的訊息後,點選下方的勾勾『V』救代表存檔。

存檔完畢後,會自動回存到原來的 Bug Comment 中:

這時候請點選『Create bug』讓系統自動產生 Bug Task,唯一需要輸入的就是 Bug Title,其他相關資訊都會自動幫我們產生(包含剛剛的圖片),按下『Save and Close』後就會自動產生:

我們可以看到 Test plan 顯示這個測試是錯誤的:

並且也可以 Backlog Item 中,看到建立的錯誤:

 

當然,也可以不用這麼麻煩,可以直接 TEST PLAN 點選最下方的『Passed』 or 『Failed』,直接說明這個測試範例是否通過或者失敗:

 

使用 Exploratory Test

雖然建議在每一個 Backlog 都要事先規劃測試計畫,但如果沒有規劃 Test Plan 也可以進行測試記錄。

主要方式就是在 Backlog 點選:『Do Exploratory testing』

然後點選CHROME 右上角 Test & Feedback 圖示,就會出現下圖可以點選進行、錄影與截圖,同樣可以錄製後,會自動關連到 Backlog Item 方便後續追蹤與紀錄。

可以先選擇截圖之後,在點選記錄 Bug 可以輸入錯誤的描述與畫面貼圖: