面向移動應用自動化測試的同構用戶界面視覺判斷方法

薛峰, 武君勝, 張濤, 王威, 成靜

1.西北工業大學 計算機學院, 陜西 西安 710072; 2.西北工業大學 軟件學院, 陜西 西安 710072;3.西安工業大學 計算機科學與工程學院, 陜西 西安 710021

隨著移動應用的日益普及和快速發展，移動應用測試正面臨嚴峻的挑戰[1-4]。首先，移動應用存在基于Android、iOS、Windows Mobile以及Mobile Web等平臺的多樣化開發模式，但卻缺乏支持多平臺應用的通用化測試方法與測試工具。其次，移動設備品牌、型號眾多，操作系統版本繁雜，其面臨嚴重的碎片化問題，并很難達成有效且全面的測試。并且，移動設備提供了更加豐富的人機交互方式，例如，手勢、語音，以及重力、加速度、光等多種傳感器，使得其輸入復雜，加劇移動應用測試難度。最后，移動市場競爭日益激烈，移動應用版本更新頻繁，開發廠商普遍缺乏足夠的時間、人員、設備、工具等測試資源。

為應對上述測試難題，學術界與工業界持續投入對移動應用自動化測試方法的研究。當前的自動化測試方法主要包括：基于腳本的測試方法通過構建自動化測試框架將人工編寫的測試腳本轉換為模擬的事件流實現對測試動作在移動應用上的模擬執行[5-6]；基于錄制回放的測試方法將人工測試的過程進行錄制進而通過回放重用該執行過程[7-8]；基于模型的自動化測試方法通過對被測應用進行定義和遍歷將應用的功能行為構建成為一種有限狀態機模型實現測試用例的自動生成[9-10]；另有通過挖掘已有測試用例并對比應用功能的相似性實現測試用例的重用[11-12]。此外，隨著機器人技術的發展，一些采用機械臂執行移動應用測試的方法被提出[13-14]，即利用機械臂替代傳統模擬事件流的測試執行，提供一種更真實的測試手段；同時，解決移動應用與外部交互的測試問題，如利用機械臂對拍照應用進行防抖動測試[15]。基于機器人的測試可作為一種完全的黑盒測試方法支持跨平臺、跨設備的應用測試。

從上述各類測試方法研究中可以看出移動應用測試通常緊密圍繞于GUI狀態的判斷，進而引導測試動作交互完成測試。然而，當前的自動化測試卻始終面臨一個關鍵性的問題即移動應用狀態空間的爆炸[16]。在移動應用中通常存在大量的同構GUI，即GUI的外觀(文本、圖像、顏色、大小)不同，但功能、結構以及內在邏輯關系相同的GUI。例如，購物類應用每個商品的展示頁面，其GUI結構相同但內容不同。在開發層面，它們均通過同一代碼段加載實現。顯然，對移動應用中的每一同構GUI進行探索或測試是十分低效的。甚至，當應用存在大量的同構GUI時，將最終導致應用狀態空間的爆炸，引發測試的失敗。

因此，在自動化測試方法中，同構GUI的識別與精簡對提升測試效率至關重要。而當前測試方法在同構GUI的判斷上，一方面通過分析GUI布局文件獲取由GUI組件構成的GUI樹，從而比較相似度；另一方面直接通過對GUI或GUI元素圖像進行像素比較完成相似判斷。但是采用上述方式仍然使得GUI的判斷與GUI屬性相關聯，即使在GUI發生微小的變化時也會引發判斷的失效。例如，一個列表中內容的重新排序，或者在版本更新后GUI元素的位置或樣式發生略微變動均會影響判斷。然而，在人工測試中，因為可以進行充分抽象化的GUI比較，所以并不受限于這些影響。

針對上述問題，本文提出一種基于GUI視覺信息的相似度抽象判斷方法，即從視覺角度出發通過提取GUI結構框架，保留GUI元素類別、布局等關鍵信息，剝離GUI元素樣式、內容等非必要屬性信息，以實現一種從布局結構出發的高度抽象化的移動應用同構GUI判斷。

1 同構GUI視覺判斷方法

移動應用同構GUI視覺判斷方法的處理過程如圖1所示。當從被測應用獲取到當前的GUI圖像時，首先通過GUI視覺抽象處理識別GUI圖像中的組件元素并生成GUI結構框架，完成對GUI結構的提取；其次，利用一個自編碼器模型得到GUI框架的視覺特征；最后，通過與GUI特征庫中已知被測應用的GUI特征進行相似度計算判斷該GUI是否為同構GUI。倘若其為非同構GUI(即一個新的GUI)則將該特征加入特征庫中并繼續執行對該GUI的測試。倘若該GUI為同構GUI，則跳過該GUI的測試(說明之前已測試同類型GUI)，優化測試過程。本節將給出移動應用同構GUI視覺判斷方法各處理部分的詳細實現。

圖1 移動應用同構GUI視覺判斷處理過程

1.1 移動應用GUI的視覺抽象

移動應用GUI通常由豐富的組件元素構成，因此在移動應用GUI的視覺判斷研究中，首先解決對GUI組件元素的視覺定位與識別。GUI界面從布局結構上通常為一個樹形結構，由容器類組件包含基本組件所構成。然而，從視覺角度出發，使用者更關注于界面上直觀的基本元素以及其所能執行的操作。因此在GUI元素的視覺識別上將聚焦于對基本組件元素的識別。此外，在一個GUI圖像中，容器類組件一般自身并未有明顯的視覺特征，而是由基本組件所組合而成。因此，識別基本組件并未丟失掉容器類組件的視覺表示信息。

本文采用目標檢測技術完成對GUI組件元素的視覺識別。首先，在移動應用GUI目標檢測數據集的準備方面，基于已有的大型GUI界面數據集RICO[17]開展，其具有涵蓋多個類別的6萬幅移動應用GUI截屏，且每個截屏配備一個GUI層次結構文件(包含GUI中各組件所屬類及位置信息)。在充分考慮組件特性和視覺特征的前提下，將識別組件類別分為文本、圖像、圖形按鈕、文字按鈕、文本框、多選框、復選框、切換按鈕、拖動條。進而利用RICO提供的GUI層次結構文件，編寫轉換程序，完成其向目標檢測所需標注文件的過濾與轉換，通過自動化的標注方式完成移動應用GUI目標檢測數據集的建立。

其次，開展目標檢測算法對GUI組件元素的識別訓練。為進一步降低單個模型檢測出現的漏檢等問題并優化識別精度，本文基于移動應用GUI目標檢測數據集分別訓練3種目標檢測模型(YOLO[18]、SSD[19]、RetinaNet[20])，并采用并行投票策略完成GUI組件元素識別。

最后，依據GUI組件元素識別結果生成GUI結構框架圖，抽象表示出GUI結構。GUI框架圖常用于GUI的設計與開發中[21-22]，是一種對GUI結構的表示方法。本文針對GUI組件元素類型，以不同的顏色標識其類別，生成GUI框架圖。將GUI表示為GUI框架圖的目的在于：①剝離掉GUI元素樣式、大小、形狀的差異性，提取GUI 的結構表示信息；②可以簡化圖像對比的計算復雜度。GUI結構框架生成過程如圖2所示。

圖2 移動應用GUI結構框架生成

1.2 移動應用GUI結構視覺特征提取

在生成GUI結構框架后，利用構建自編碼器模型繼續提取GUI結構視覺特征。自編碼器(AutoEncoder)是一種經典的無監督學習方法，其面向高維復雜數據處理，通過使用反向傳播算法讓目標值等于輸入值。例如，自編碼器可以通過編碼器生成圖像的特征向量，再通過解碼器依據特征向量生成目標圖像。通過比較原圖像與生成圖像的差異，無監督地完成圖像特征向量的準確生成。

傳統的自編碼器容易造成數據在固定空間內的堆疊，導致關鍵信息的丟失，因此本文采用一種卷積自編碼器[23]盡可能保留圖像特征。即在自編器的結構上利用卷積層替代全連接層從而更好地完成圖像特征的提取。

本文定義的卷積自編碼器結構如圖3所示，包括編碼器和解碼器兩部分。編碼器由卷積層和池化層組成，負責完成對輸入GUI框架圖的壓縮。經過4組卷積與池化層后的隱藏層即為可提取的GUI框架圖特征向量。解碼器與編碼過程相對，通過4組卷積層和上采樣層，對壓縮數據進行復原重建輸入圖像。自編碼器經過反復編碼與解碼的迭代訓練，逐步提高自編碼精度，直至解碼后的數據和輸入數據的差距逐漸減少并趨于平穩。當完成自編碼器的訓練，編碼器則可以提取任意輸入GUI框架圖視覺特征。下面給出本文卷積自編器的詳細設計。

圖3 基于卷積自編碼器的GUI視覺特征提取

1) 數據預處理

GUI框架圖在輸入到卷積自編碼器之前，首先進行歸一化處理以提高自編碼器模型訓練性能，加速收斂。采用Min-Max標準的歸一化方法，把原始數據從[0,255]歸一化到標準的[0,1]范圍內，如(1)式所示。

(1)

式中：ni為規范化的第i個數據,值為[0,1]之間；mi為未規劃前的數據；mmin為原數據中的最小值；mmax為原數據中的最大值。

2) 編碼器設計

編碼器包括卷積層和池化層,對輸入數據進行特征提取和壓縮。編碼器由4個卷積和4個池化構成。卷積層的功能用于提取和融合輸入圖像特征,它不識別整個圖像而是通過局部感知來捕獲圖像中的每個特征,然后在更高層次上對本地信息進行綜合運算得到全局信息。利用生成的GUI框架圖作為輸入數據,其維度為128×128×3。編碼器4個卷積,依次使用64,32,16,8個大小為3×3的卷積核,步長默認為1,填充設置為相同。此外,選擇ReLU(校正線性單元層)作為激活函數,進行卷積層線性運算到GUI結構視覺特征輸出的非線性映射。

在卷積層提取到GUI框架特征后,輸出特征將被傳送到編碼器的池化層進行特征選擇和信息過濾。池化層用于對特征圖進行下采樣處理,在保留重要信息的前提下快速降低特征維度以減少計算量,并避免過擬合提高模型的容錯性。經過第一層卷積后,數據維度由原來的128×128×3變為128×128×64。池化操作不改變數據的深度,所以池化后的數據維度為64×64×64。池化層對每層卷積結果進行2×2最大池化操作,步長為2。經過4層卷積和池化操作,得到隱藏層的壓縮表示。

3) 解碼器設計

編碼器對GUI結構視覺特征進行提取和壓縮后,進一步使用解碼器對特征進行反卷積操作以獲得與輸入數據相同的大小。解碼器由4個上采樣和4個卷積構成。采用的反卷積操作由第一步上采樣和第二步正常的卷積操作組成,即通過上采樣將特征圖像擴大,再進行卷積操作而完成反卷積過程。上采樣采用最近鄰插值方法進行,即尋找插入位置的最鄰近數據作為其數據插入。解碼器中上采樣每層使用大小為2×2,步長為2的操作,卷積層依次使用8,16,32,64個大小為3×3的卷積核,步長設置為1,填充設置為相同,與編碼器的卷積層相對應。

4) 損失層

損失層用于確定在訓練過程中如何減少網絡預測結果和實際結果之間的差異。損失函數值越小,模型擬合越好。在本文的卷積自編碼器中,采用均方根誤差作為損失函數計算輸入GUI框架原圖與重建框架圖之間的差異。損失函數如(2)式所示。

(2)

式中：n為輸入的圖片數量；xi為輸入第i個圖片；f(xi)為重建的第i個圖片。在訓練過程中,GUI框架原圖像和重建圖像之間的差異將不斷減小,直到模型收斂。完成訓練后,原圖像的壓縮編碼數據即為GUI結構的視覺特征。

1.3 移動應用GUI相似判斷

提取到GUI框架的視覺特征后,進一步通過計算GUI框架特征的距離度量判斷GUI相似情況。本文采用JS散度進行GUI特征的距離度量。

JS(Jensen-Shannon)散度是機器學習中經常用來衡量隨機分布之間相似度的方法。任意2個GUI隨機分布使用以2為底的對數,JS散度范圍為[0,1],即GUI相似度范圍在[0,1]之間。JS散度越小GUI越相似,即JS散度值為0時,2個GUI完全一樣,JS散度值為1時,2個GUI沒有重疊的地方。JS散度定義為(3)式。

(3)

式中：J(G1,G2)為2個GUI相似度值；G1和G2為2個GUI特征集合；n為GUI分布數量即每個GUI特征向量個數，本文取n=512；g1i為G1的GUI集合中第i個隨機值；g2i為G2的GUI集合中第i個隨機值。

GUI相似判斷算法如算法1所示。g1作為已知GUI結構特征,g2為當前探索到某一GUI特征。利用JS散度計算出各維度的相似情況,并通過閾值判斷是否相似。最后,返回與g2相似的GUI信息(相似GUI,相似度,是否同構)。

在計算JS散度時,某一特征數據為0時為避免計算錯誤,將其設置為一個極小值10-7。此外,因JS散度越小GUI越相似,為直觀體現相似性結果,用1減去散度作為相似判斷結果。

算法1GUI相似判斷

輸入:已知GUI特征向量集合G,當下的GUI特征向量g2

輸出:相似GUI信息P

1Jsm=0

2 for eachg1inGdo

3j←getJSDivergence(g1,g2)

4 ifj>threshold then

5P←getJudgeInfo(g1,j,1)

6 returnP

7 else ifj>Jsmthen

8Jsm=j

9P←getJudgeInfo(g1,j,0)

10 end if

11 end for

12 returnP

至此,通過視覺技術生成GUI結構框架,利用自編碼器提取GUI框架特征,再比較GUI框架特征相似度完成同構GUI的視覺判斷。

2 實驗驗證分析

為驗證本文提出的移動應用同構GUI視覺判斷方法的有效性,分別開展GUI視覺特征提取的準確性驗證,同構GUI判斷的有效性驗證以及同構GUI判斷對比驗證。

2.1 移動應用GUI視覺特征提取驗證

為驗證GUI視覺特征提取的準確性,從RICO數據集中選取1 000張GUI并生成其GUI框架圖作為特征提取數據集，其中,800張作為訓練集,200張作為測試集。卷積自編碼器輸入128×128×3結構的圖像數據,首先進行歸一化處理,其次經過編碼器的卷積、最大池化和解碼器中的上采樣、卷積處理,最后再經過一次卷積后恢復為輸入的圖片尺寸。使用Adam優化算法作為網絡優化參數,優化訓練。批處理大小(batch-size)設置為32,迭代輪次(epochs)設置為2 000。訓練環境采用NVIDA GeForce GTX 2080 GPU,基于pycharm訓練平臺的keras深度學習框架。在模型訓練結束后,輸入測試集進行GUI框架視覺特征提取驗證。最后提取的每張圖像壓縮后的數據大小為8×8×8=512個特征。卷積自編碼器模型結構如表1所示。

模型的訓練結果如圖4所示。模型的損失函數,在訓練集和測試集上分別收斂于0.02和0.03,模型精度分別為0.83和0.81。

GUI框架原圖和由卷積自編碼器重建框架圖像對比如圖5所示,重建圖像與原圖像越相似說明GUI特征提取的越準確。從圖5中可以直觀地看到,重建圖像與原圖具有較高的相似度,因此本文的卷積自編碼器能夠準確地提取GUI框架視覺特征。

表1 卷積自編碼器模型結構

圖4 模型訓練結果

圖5 GUI框架原圖與重建圖對比

2.2 有效性驗證

為進一步驗證同構GUI判斷的有效性,額外選取包含同構GUI的100張GUI進行實驗。其中,前50張作為已知GUI,后50張為需要判斷的GUI。圖6a)所示為真實值,對角線表示對應的圖像為同構GUI,其他區域為非同構GUI。對角線上網格的大小代表該同構界面的數量,同構界面數量越多網格越大。利用文本方法將后50張GUI分別與前50張GUI進行共計2 500次判斷計算。

圖6 GUI相似度判斷驗證結果

圖6b)所示為前后2組GUI之間的相似度計算結果,設置相似度閾值為0.9,大于為同構GUI,小于為非同構GUI。圖中顏色越深,表示相似度值越高。對比圖6a)中同構GUI的真實值,在圖6b)中可以明顯看出大于0.9的同構GUI和真實值GUI所在位置基本一致,而小于0.9的非同構GUI所在位置總體為淺色和白色所覆蓋。對角線同構界面的顏色明顯,且網格大小與真實值相近。因此,實驗表明本文方法能夠依據視覺信息正確判斷同構GUI。

然而,結果仍然存在一些誤差的原因主要在于:一方面,在方法層面,視覺判斷方法依賴于目標檢測等視覺處理模型精度,例如GUI組件的類別錯誤檢測或漏檢均會影響相似度計算結果;另一方面,在GUI的特性層面,GUI具備豐富的視覺特征和靈活的設計風格,應用界面內容的多樣化會影響同構判斷。

2.3 對比驗證

另外,分別與傳統的3種圖像哈希算法進行對比實驗。哈希算法為圖像分配唯一的哈希值,并通過對比圖像的哈希值判斷相似度,結果越接近則圖像越相似。選擇差值哈希算法、感知哈希算法、均值哈希算法3種基于哈希的圖像相似度比較算法進行對比驗證。通過構建GUI灰度圖像并計算比較哈希值完成。

利用準確率、精確率、召回率、F1值進行結果的評估分析。各方法表現如圖7所示。

圖7 對比驗證結果

對比實驗結果表明，盡管4種方法的準確率均大于0.9，但本文方法達到最高的準確率0.987 2。而在精確率、召回率、F1值評價指標上，本文方法均達到0.8以上，其效果遠優于其他方法。本文因采用對GUI的高度抽象進而再相似比較，相較于其他方法有效屏蔽了GUI樣式、內容等屬性所帶來的干擾影響，能夠更為精準地捕捉同構GUI。

2.4 討論

上述實驗驗證表明，本文提出的基于視覺的移動應用同構識別方法已經達到了較高的識別精度。利用視覺判斷同構GUI與傳統非視覺的判斷方法(例如，GUI樹比較判斷)相比較存在如下優劣：①視覺判斷方法通過應用GUI外在視覺表示信息進行判斷，而非視覺方法則依賴于應用內部組件組成信息。因此，視覺判斷方法可以作為一種支持跨平臺或黑盒測試的通用方法，而非視覺判斷方法則更針對單一平臺應用或白盒測試；②視覺判斷方法是針對GUI抽象結構的判斷，而非視覺判斷方法則是精確的GUI組件及屬性比較。盡管視覺判斷方法受到目標檢測等視覺算法精度的影響，但卻可以屏蔽GUI組件屬性微小改動而帶來的判斷失效影響；③視覺判斷方法擁有更高的使用成本。視覺判斷方法需要進行多種視覺算法的計算與訓練，需要更高的計算與時間投入。綜上分析，本文提出的視覺判斷方法是對現有同構GUI判斷的補充與增強，促進其在跨系統平臺，設備非侵入以及純黑盒機器人測試等場景下的使用。

3 結 論

本文提出了一種基于視覺的移動應用同構GUI視覺判斷方法，通過利用目標檢測技術以純視覺方式獲取GUI組件元素從而生成GUI結構框架，并引入卷積自編碼器完成對GUI結構視覺特征的提取，最后通過散度計算比較GUI結構視覺特征來判斷GUI相似度，形成一種高度抽象化的GUI判斷分析。實驗表明本文方法能夠準確地識別同構GUI，促進解決移動應用自動化測試所面臨的狀態空間爆炸問題。此外，該方法因為不依賴于移動應用內部信息，可靈活應用于現有的自動化白盒與黑盒測試中。

本文方法仍然存在一些可改進之處。首先，部分應用存在靈活的界面表達方式，進一步復雜化同構界面的自動化判斷。除了GUI結構上的比較，加入語義信息將會增強對此類多樣化界面的判斷。其次，采用視覺方法識別GUI存在一定的精度誤差，將視覺判斷方法與非視覺判斷方法相融合將促進同構界面判斷效果的增強。后續，仍可持續深入移動應用GUI在同表示含義，同行為模式上的視覺特征判斷方法研究，進一步強化移動應用測試中的GUI自動化分析與理解。