1.背景
背景
收到邀請，去參加北京NCTS雲測試行業峰會-技術專場，準備将圖檔對比在測試自動化領域的實踐分享給大家，本文作為分享議題的概述版本，供大家檢視。
1.1 軟體公司 VS 網際網路公司
從軟體釋出來看軟體公司與網際網路公司的差異。
1.2 QA 的職責
1.2.1 軟體公司
在軟體公司，QA 的職責包括：
- 研發環節的最後一環；
- 在研發過程以盡可能多的發現 Bug 作為主要職責，在釋出後以 0 Bug 作為主要目标；
- 流程的推動者、權限的制約者。
1.2.2 網際網路公司
在網際網路公司，QA 的職責包括：
- 全流程的品質體系；
- 工具平台的發起者、創造者；
- 捍衛真實的使用者體驗。
1.3 實時品質
實時品質的定義是”運作含測試，實時可回報”
一句話總結來說就是：将品質手段以子產品、元件乃至系統化的方式嵌入到業務型應用中。從代碼的緯度來看：
- 開發寫的代碼是為業務特性服務的代碼；
- 測試寫的代碼是為業務品質服務的代碼。
1.4 無人值守自動化
無人值守自動化的定位是：基于變更，提供全流程、多樣化、智能化的無人值守診斷能力，做到品質的實時回報。
- 全流程看護
變更前（預發階段）
變更中（灰階階段）
變更後（上線階段
- 覆寫所有變更
代碼類變更
配置類變更
DB 變更
- 多元度診斷
自動化診斷
業務監控診斷
業務日志診斷
- 釋出門禁
- 釋出準入
預發階段和灰階階段釋出卡口
1.5 高頻內建的現狀
目前我們 BU 在并行的開發着多個特性，每個特性建立了不同的分支， 很難在一個相同的時間點進行統一的持續內建，多個分支可以自由的內建和釋出，處于高頻內建的狀态。這也為回歸測試帶來了極大的挑戰。
1.6 BU 的分層自動化模型
我們 BU 的分層自動化模型共分 4 層，展示層、接口層、服務層、資料層，每一層在不同的執行階段與左側的自動化架構&平台對接。層級越高，穩定性越差，自動化的效果越好。在生産運作階段進行故障診斷和線上壓測；預釋出階段進行營運 CMS 變更和預釋出自動化；開發/功能調試階段進行無線元件和适配測試。
1.7 MyDiff
MyDiff 是一個零成本配置的截圖對比自動化平台
包含了以下特性：成本低、預釋出攔截、全屏與區域截圖、自定義的前置操作、多浏覽器、多語言。
2.概述
2.1 業務與能力
從左側來看，對接了 GAEA、TESLA 等自動化平台和 AONE 研發協同平台，PI 為算法平台，為我們提供了算法能力。
MyDiff 目前服務了 10 個 BU，産品能力包含任務管理、結果管理、執行機管理、資料統計、告警通知、平台對接等。
核心能力為截圖能力和對比能力。截圖能力包含對環境、登入、區域、前置操作的管理；對比能力分為像素級和非像素級兩種，提供了相似度評估和差異标定。目前應用的場景包括頁面回歸測試、頁面巡檢、頁面異常檢測、适配測試，還有更多的場景等待探索。
2.2 自動化流程體系
自動化測試建構在協同平台 aone 的釋出流程中，在開發送出代碼進行預釋出後，會同時進行 STC 安全掃描、CodeReview 和自動化測試等處理。蓋亞接收到 aone 的消息通知，通過分層進行自動化架構的任務排程，待自動化執行完畢，将執行結果進行回報，通知 aone。如果自動化執行失敗，可以通過配置決定是否卡釋出。
3.實踐
3.1 技術架構
使用者通過 web 叢集來進行操作，如任務管理、任務執行等。MyDiff 為分布式應用，是以需要一個共享存儲層，包含 mysql、oss 等存儲。整個平台通過 RocketMQ 的消息進行通信，使用者在 web 建立任務後，會将其包裝成 captureTask，該任務控制執行機叢集進行截圖操作，待截圖完成後，封裝成 imgDiffTask，在圖檔對比叢集進行對比操作，完成對比後更新任務狀态，使用者可查到報告結果。
3.2 圖檔對比算法優化
MyDiff 在正常方案中加入了形态學的一些算法操作，在擷取像素內插補點圖後，對內插補點圖首先進行形态學膨脹處理，将分散的內插補點像素點膨脹成一個個連通區域。為避免膨脹後差異區域擴大，在形成連通區域後再對其進行形态學腐蝕。這樣就能将原本分散的像素點或小區域，融合成一個個連通區域，差異區域的标記也更加友好。原本一串文本不同，通用算法會标記出多個區域，由于字元間歐式距離很小融合後會形成完整的一個連通區域。差異區域融合後，後續模闆比對的性能與精準性也會更好。
3.3 非像素級圖檔對比
3.3.1 需求
在無線端不同的機型有着不同的分辨率，是以同一個 UI 的兩張截圖也不盡相同。比如下圖，存在着 3 個明顯差異，頭部導航欄、彈出的 toast、底部欄。卡号、文本框、按鈕等雖然尺寸不同，但内容相同，在預期中它們是一緻的。
3.3.2 算法
我們初步對 362 組樣本進行算法實驗，下表是實驗結果，實驗證明 SSIM+Phash 的算法效果最優，識别率可達 86.74%。
SSIM(結構相似性算法)：
Phash(感覺雜湊演算法)：
3.3.4 差異标定
這是最終差異标定的結果，我們認為不同機型的頭部導航欄和底部欄屬于系統區域，在圖檔對比之前将其裁剪掉。下一步再對兩張圖進行結構提取，提取後左圖元素與右圖元素進行互相比對，在另一張圖找不到的元素被認為差異，通過紅色矩形框出。
3.4 卡釋出
卡釋出的實踐是在持續內建中的內建測試環節進行自動化的執行和驗證，可配置的在自動化執行失敗時是否允許釋出。
3.4.1 建立 UI 測試
這裡用阿裡巴巴的協同平台 aone 來舉例，通過 aone 建立一個 UI 測試任務，在頁面中選擇使用哪一個服務，其中 IMGDiff 代表 MyDiff，接下來設定圖檔對比任務 ID，将測試任務與 MyDiff 的任務 ID 相關聯。
3.4.2 流程配置
下一步是在流程配置中添加流程，可以自定義一個流程的步驟。
3.4.3 日常釋出流程
以一個日常釋出的流程舉例，日常內建測試在流程之中。對日常環境部署成功後，會執行配置的測試任務，調用 MyDiff 進行一次圖檔對比任務的執行。
3.4.4 卡釋出案例
這裡是一個真實的案例，持續內建中，MyDiff 自動化執行失敗，測試人員可以通過檢視結果來分析失敗原因，也可以選擇跳過進行繼續釋出。
3.4.5 MyDiff 案例
3.4.5.1 清單
這是 MyDiff 的執行結果清單，相同數與總數相等，執行通過。
3.4.5.2 詳情
這是一次執行失敗的詳情，使用了區域截圖。
3.4.5.3 原圖差異
預發環境區域截圖：
線上環境區域截圖：
3.4.5.4 對比圖差異标定
差異對比圖：
通過差異對比圖來使使用者很快定位的差異的區域，一目了然。
4.規劃
每一個平台都需要不斷更新，技術也在不斷發展，MyDiff 計劃未來在以下領域進行提升。
5. 最後想說
感謝主辦方的辛苦籌備，使大家能開心的在10月26号的技術專場再次見面，暢聊技術；雖然9月經曆了一些小小的插曲，但總體而言十分圓滿，期待未來再見。
緻敬那些對技術充滿熱情的人。
文章來源：AlibabaTechQA
開發者社群整理