背景
迴歸測試是指修改了舊程式碼後，重新進行測試以確認修改沒有引入新的錯誤或導致其他的程式碼出現錯誤。傳統的自動化迴歸測試需要手動編寫指令碼獲得頁面元素的檢視樹，與原有的元素檢視樹進行比對。當功能進行頻繁迭代時，測試同學維護這些檢視元素驗證點比較繁雜。因此在自動化迴歸測試過程中，直接比較程式碼修改前錄製的頁面和程式碼修改後回放的頁面差異，可以快速定位程式碼產生的缺陷，從而提高測試同學的工作效率。
以閒魚應用舉例，錄製和回放頁面差異檢測存在的一些難點包括：影像上，閒魚頁面由頂部固定區域、中間可滾動區域、底部固定區域組成，需要對頁面進行版面切割，之後分別對每一個區域進行處理。另外錄製和回放頁面中一些圖示或者圖片紋理複雜的區域往往畫素值分佈不同，但是語義層面又是同一個物體，因此需要從語義層面進行檢測識別。業務上，兩張頁面中間區域因為滾動帶來的差異不需要檢測出來，並且一些特殊的標記差異(比如一張頁面某個位置有游標，另一張頁面同一位置沒有游標)不需要檢測出來。
如上圖四組錄製和回放頁面所示，其中每組圖左邊為錄製頁面，右邊是回放頁面。a)中因為中間區域的滾動帶來了文字和圖示的差異，b)中價格元件“¥69”右邊的游標帶來了差異，c)中輸入框裡的文字不一樣，d)中“庫存”那一欄的圖示具有語義差別。其中a)和b)中的差異不需要檢測出來，c)和d)中的差異需要檢測出來。
策略
01 演算法流程
1.輸入的錄製和回放頁面影像灰度化後進行版面切割，提取頂部區域、中間區域、底部區域
2.兩張頁面的中間滾動區域進行對齊
3.兩張頁面的每個區域分別進行相似度計算並排除無效的差異框
4.兩張頁面中分別標記最終的差異框
02 版面切割
閒魚大部分的頁面是由頂部固定區域、中間可滾動區域、底部固定區域組成，版面切割的目的是找到中間可滾動區域的上下邊界，即將頁面切割為三塊區域，之後對每塊區域分別進行處理。
版面切割只針對中間區域有滾動的情況，對於中間區域無滾動的情況即可用整張圖進行後續處理。考慮到錄製和回放頁面在滾動區域上下邊界處會產生明顯的差異，因此分別從影像的第一行和最後一行開始進行比較，比較對應行的結構相似度指數(SSIM)，當對應行的結構相似度指數小於給定的閾值，則終止。
結構相似度指數是一種衡量兩幅影像相似度的指標，其從影像組成的角度將結構資訊定義為獨立於亮度、對比度的反映物體結構的屬性，用均值作為亮度的估計，標準差作為對比度的估計，協方差作為結構相似程度的度量。具體公式如下：
其中(x,y)分別為錄製和回放影像，ux,uy,σx2,σy2,σxy分別表示影像的均值、方差和協方差，c1,c2,c3為小的正常數，避免分母為零而出現不穩定，利用引數α,β,γ調整三個成分所佔的比重。在實際工程中，一般設定α=β=γ=1，以及c3=c2/2，可以將SSIM簡化為：
SSIM為介於0到1之間的一個值，值越大表明兩幅圖越相似。下圖a)b)為高2001畫素、寬1125畫素的錄製和回放頁面影像，選取SSIM閾值為0.95，計算得到的滾動區域的上邊界為192，下邊界為1832，如c)所示。
03 滾動區域對齊
錄製影像座標(x,y)通過一個3x3的位移矩陣轉換到回放影像座標(x',y')。位移轉換矩陣可以通過對齊兩幅影像的特徵點來求取。在計算機視覺中，常見的特徵點描述方法有SIFT、SURF、ORB等等，本文采用ORB方法，因為相比於SIFT和SURF方法，ORB在滿足足夠高的準確性前提下，速度更快並且使用不受專利約束。
ORB全稱是Oriented FAST and Rotated BRIEF，即是由FAST特徵點檢測和BRIEF特徵點描述組成，並且在兩者基礎上加入了影像金字塔和影像重心方向等改進措施使得ORB對尺度和旋轉不敏感。
滾動區域對齊的具體步驟為：
1. 輸入錄製和回放滾動區域。當上一步版面切割沒有計算出滾動區域時，輸入整幅影像的中間部分
2. 檢測特徵點。使用ORB檢測兩幅影像的角點。工程實現時可以設定每幅影像最多需檢測出的特徵點數
3. 匹配特徵點。利用hamming距離來衡量兩組特徵點的相似性以及Brute Force暴力法嘗試所有特徵點來找到最佳匹配。基於匹配的特徵點距離值進行排序，選取距離值較小的一部分特徵點
4. 計算轉換矩陣。輸入兩組特徵點座標位置通過最小二乘求解最優的轉換矩陣
5. 對齊影像。應用轉換矩陣將回放影像滾動區域對映對齊錄製影像滾動區域
下圖為匹配的兩組特徵點，計算出來的轉換矩陣中tx=0，ty=-96
04 相似度計算及後處理
差異檢測。對頂部區域、底部區域和對齊的滾動區域每個畫素在一定的領域範圍內計算SSIM，得到同等尺寸的SSIM結果圖；再對SSIM結果圖用大津法得到二值化的SSIM結果圖，其中有差異的地方為1，沒有差異的地方為0；接著提取二值化SSIM差異部分的外接輪廓；之後再計算輪廓的最小外接矩形框。得到的結果如下紅框所示：
後處理。上圖紅框顯示的是對齊滾動區域帶來的差異，通過判斷每個框是否落到特定區域範圍內來進行排除，這個特定區域在垂直方向上以滾動區域上邊界起始，向下移動ty行結束或者以滾動區域下邊界起始，向上移動ty行結束。另外對於一些噪聲點帶來的差異，可以通過限制差異框包含的面積進行排除。對上圖使用以上兩步後處理後，紅框全部被排除。其他一些錄製和回放影像中的特殊標記(比如游標)差異在業務層面需要排除，或者一些紋理豐富的圖示/影像雖然畫素層面存在差異，但語義層面屬於同一類，即使SSIM計算不相似，也需要排除。
上圖a)顯示游標差異模式，b)顯示紋理豐富的圖示/影像差異模式，c)顯示其他差異模式。這些差異模式是對應位置差異框絕對差得到的結果，其中a)和b)需要排除，c)需要保留。分析這幾種不同模式型別，設計了一種如下圖所示CNN二分類網路。影像縮放到64x64大小，然後輸入到三層conv+pooling+relu的卷積結構中，後接128個節點和2個節點的全連線層，以softmax作為類別判定輸出。通過分類網路便可將業務層面或畫素層面的差異進行排除。
效果
總結
本文以閒魚自動化迴歸測試應用舉例，實現了一種版面切割、滾動區域對齊、相似度計算及後處理的錄製和回放頁面差異檢測方法。這種方法在使用過程中達到了檢出語義差異的預期，並且方法具有普適性，對其他app的自動化迴歸測試具有一定的參考意義。當然本方法也存在著一些不足，對於畫素分佈不同但語義相同的差異模式會有一部分誤檢，這是由於SSIM在計算相似度時對於區域性畫素值的變化比較敏感，未來可對頁面中的文字和圖片獨立提取出來進行進一步的語義分析優化。