乾貨分享丨一種DevOps模式下UI自動化測試左移思路的探究

隨著科技的不斷髮展成熟，市場的變化也越來越迅速，為了更快捷地應對客戶需求，更多的企業選擇了快速迭代的方式進行產品的研發，因此DevOps也就應運而生。加我VX：atstudy-js 回覆“測試”，進入軟體測試學習交流裙~~

DevOps模式是文化、流程、概念、結構、技術等方方面面的變革，同時也對測試工作提出了更加嚴格、高效的要求。在DevOps的趨勢下，測試工作由原來的大量集中測試，變成了高頻次的迭代測試，由原來的純手工測試，演變成了依託工具和平臺的自動化測試，由原來僅僅需要關注測試階段，左移到了產品的開發設計階段。

本文提供了一種DevOps模式下UI自動化測試左移的思路，將涉及到的環節進行了標記，如圖1所示。

圖1 產品週期概要圖

該思路是將測試工作左移到了開發設計階段，分為五個步驟實現：

·根據UI設計圖，測試人員設計基於介面元素的業務流程圖;

·根據業務流程圖，測試人員補充介面元素的賦值情況，形成業務/資料流圖;

·在編碼階段，開發人員根據業務/資料流圖的資訊，對介面元素加入定製化的描述，包括介面元素唯一驗證、元素型別、操作、賦值等資訊;

·在編碼完成後，進行程式碼掃描，將之前加入的定製化描述抓取出來，根據唯一驗證資訊捕捉介面元素從而形成物件庫，根據元素型別、操作、賦值等形成標準化案例步驟，並根據業務流程圖的業務規則對標準化步驟進行排序，進而生成UI自動化案例;

·在部署完成後，可以透過前面步驟生成的UI自動化案例進行測試准入檢測。

透過上面五個步驟，使得測試工作介入到了開發的設計階段，在UI設計完成的同時，也完成了業務流圖和資料流圖的設計工作，實現了對業務邏輯的梳理和測試資料的準備，最終在程式碼部署之前，透過程式碼掃描的方式進行了UI自動化案例的自動生成，並以UI自動化執行冒煙測試。

我們以某報表查詢交易為例，進行UI自動化測試左移思路的詳細說明。

1.基於UI設計圖與介面元素形成業務流程圖

本文選取了某報表查詢的介面為例，UI設計介面如圖2所示：

圖2 UI設計介面

由上圖可知，該介面包含了2個文字框(查詢機構和查詢日期)、3個按鈕(查詢、重置和下載)、1個表格，共計6個介面元素。在UI設計完成後，結合需求對該介面的業務流程進行分析，可以得到介面元素的操作順序，也即是該介面的業務流程圖，如圖3所示：

圖3 介面元素業務流程圖

2.基於業務流程圖與資料賦值形成的業務/資料流圖

依據圖3的業務流程圖，測試人員繼續按照標準規範“物件|操作|資料”補充介面元素的賦值情況，例如文字框需要輸入資料，則採用“文字框|輸入|資料”的形式，如按鈕不需要輸入資料，則採用“按鈕|點選”的形式，以此最終形成業務/資料流圖，如圖4所示：

圖4 介面元素業務/資料流圖

3.基於業務/資料流圖完成介面元素的定製化描述

在測試人員完成業務/資料流圖後，開發人員會根據流圖內容和規範進行程式碼編寫，透過在介面元素的Xpath中加入圖4的ID，例如Frame("name:=udesk-tab-iframe-1").WebEdit("xpath:=//INPUT[@id='00001']")，以此來獲取介面元素的定位資訊與其他描述，從而形成UI自動化案例的介面物件庫;透過加入定製化的介面元素描述例如“AutoTest 介面元素ID|步驟序號|介面元素型別|操作|資料 End”的方式，例如圖4中的第二步則可以寫成“AutoTest 00002|2|文字框|輸入|20210512 End”，第七步則可寫出“AutoTest 00003|7|按鈕|點選 End”。加我VX：atstudy-js 回覆“測試”，進入軟體測試學習交流裙~~

4.基於程式碼掃描與定製化描述生成UI自動化案例

開發人員按照上述標準對介面元素進行描述，在編碼階段完成後，便可對程式碼文字進行掃描，當掃描工具遇到AutoTest時則開始抓取後續資訊，在遇到End後停止抓取，直到下次遇到AutoTest時則繼續抓取資訊。

將抓取的資訊按照“|”進行拆分，根據“介面元素ID”形成物件庫，根據“介面元素型別|操作|資料”形成標準化案例步驟，根據“步驟序號”進行案例的排序，並最終整合成完整案例。

5.利用UI自動化案例進行冒煙測試

根據上述程式碼掃描生成UI自動化案例，並將案例上傳到管理平臺，在進行相關流水線配置後即可進行UI自動化准入，執行冒煙測試。

透過這種思路，可以實現測試左移至開發設計階段，在UI設計完成時，便開始進行業務流程圖和資料流程圖的設計工作，透過流程圖的設計，達到了業務分析和資料準備的目的，並形成了流程圖等相關專案資產。而透過UI自動化冒煙的方式，減少了人工的干預，用機器代替手工，提高了測試的效率，符合DevOps的相關要求。