基于圖像匹配的Web UI自動(dòng)測(cè)試方法研究

羅正軍，金旭東，張麗麗

(南京航空航天大學(xué)，江蘇 南京 211106)

0 引 言

隨著Web2.0時(shí)代的到來和計(jì)算機(jī)科學(xué)的高速發(fā)展，Web應(yīng)用的功能和體量逐漸增大，人們對(duì)軟件的產(chǎn)品質(zhì)量和交付速度提出了更高的要求，而測(cè)試工作是保證軟件在最終交付時(shí)通過質(zhì)量評(píng)價(jià)的重要方式。相較于傳統(tǒng)的手工測(cè)試，自動(dòng)化測(cè)試具有測(cè)試精準(zhǔn)度高、測(cè)試時(shí)間短、用例覆蓋全面、可回歸測(cè)試等優(yōu)勢(shì)[1-3]。

在國(guó)內(nèi)外的現(xiàn)有研究中，Web應(yīng)用自動(dòng)化測(cè)試研究的側(cè)重點(diǎn)偏向于功能測(cè)試，接口測(cè)試和整體自動(dòng)化測(cè)試框架，相較于UI層次，底層接口層面受業(yè)務(wù)變更影響較小，實(shí)施自動(dòng)化測(cè)試的性價(jià)比較高。其次，對(duì)于Web應(yīng)用后期的運(yùn)營(yíng)維護(hù)，用戶界面層級(jí)不涉及底層框架，在不同時(shí)間點(diǎn)可能需要呈現(xiàn)不同的UI，較難達(dá)到與手工測(cè)試一致的測(cè)試覆蓋率，控制成本較為困難。此外，用戶界面某些元素涉及Web功能測(cè)試類別，例如完成頁(yè)面跳轉(zhuǎn)、元素展示等操作，不同測(cè)試類別之間相互融合具有一定的復(fù)雜性。

1 測(cè)試方法的實(shí)現(xiàn)

圖像匹配技術(shù)主要包含匹配目標(biāo)(基準(zhǔn)目標(biāo)、待測(cè)目標(biāo))和匹配標(biāo)準(zhǔn)兩個(gè)部分。以不同的匹配目標(biāo)和匹配標(biāo)準(zhǔn)可以劃分為局部不變特征點(diǎn)匹配、直線匹配和區(qū)域匹配[7]。特征匹配領(lǐng)域中點(diǎn)特征一般證明圖像中含有較為突出特征的關(guān)鍵點(diǎn)或興趣點(diǎn)，具有簡(jiǎn)單且穩(wěn)定的特性，并且基于其他特征，例如線特征(兩點(diǎn)確定一條直線)，均可以轉(zhuǎn)換為基于點(diǎn)特征的匹配[8-10]。此外，相較于模板匹配技術(shù)，特征點(diǎn)匹配可以有效減少匹配計(jì)算時(shí)間，同時(shí)降低圖像噪點(diǎn)、畸變及其他因素對(duì)匹配性能的影響，是目前實(shí)現(xiàn)圖像匹配的主要形式[11]。

1.1 測(cè)試方法的基本思路

以Python+Selenium為基礎(chǔ)，驅(qū)動(dòng)瀏覽器完成頁(yè)面整體截圖的采集建立匹配基準(zhǔn)圖片庫(kù)和測(cè)試圖片集，使用基于特征點(diǎn)匹配的SURF算法作為主體驗(yàn)證方法，利用RANSAC算法進(jìn)行特征點(diǎn)的選取優(yōu)化，并采用基于灰度的模板匹配SSDA算法作為輔助驗(yàn)證方法完成方法架構(gòu)的整體搭建。通過每次測(cè)試得到的截圖與基準(zhǔn)圖片庫(kù)進(jìn)行對(duì)比，得出每輪測(cè)試任務(wù)截圖正確性的評(píng)估結(jié)果。

1.2 主體驗(yàn)證方法

特征點(diǎn)匹配算法可以有效減少匹配計(jì)算時(shí)間，同時(shí)降低圖像噪點(diǎn)、畸變及其他因素對(duì)匹配性能的影響。該文所研究的對(duì)象為Web頁(yè)面，不同項(xiàng)目的用戶界面不一致并且圖像素材較少，無(wú)法滿足深度學(xué)習(xí)訓(xùn)練數(shù)據(jù)量要求[12]，故選用SURF算法作為基于特征點(diǎn)的匹配分支的主要方法。SURF算法的基本思想與SIFT一致，其在不同的尺度空間內(nèi)判別局部外觀的興趣點(diǎn)，經(jīng)計(jì)算處理后興趣點(diǎn)變?yōu)榕c圖像的拉伸和旋轉(zhuǎn)無(wú)關(guān)的特征點(diǎn)。SURF算法的實(shí)現(xiàn)原理包括對(duì)其構(gòu)造尺度空間、Hessian矩陣識(shí)別興趣點(diǎn)、特征點(diǎn)過濾和定位、計(jì)算特征點(diǎn)主方向、生成特征描述及對(duì)其特征點(diǎn)匹配的描述[13-14]。下文即對(duì)基于改進(jìn)SURF算法的Web UI自動(dòng)化測(cè)試方法設(shè)計(jì)做進(jìn)一步闡述。

本研究以O(shè)penCV庫(kù)提供的SURF對(duì)象為基礎(chǔ)完成基于特征點(diǎn)匹配的方法設(shè)計(jì)。OpenCV中提供蠻力匹配(Brute-Force)和FLANN(Fast Library for Approximate Nearest Neighbors)匹配兩種圖像特征點(diǎn)匹配方式。蠻力匹配采用第一個(gè)圖像中的一個(gè)特征點(diǎn)描述子，利用距離計(jì)算與第二個(gè)圖像中的所有其他特征點(diǎn)匹配，最終返回距離最近的一個(gè)特征點(diǎn)。FLANN代表快速最近鄰搜索包，與蠻力匹配相比，其針對(duì)大型數(shù)據(jù)集中的快速最近鄰搜索和高維特征進(jìn)行了優(yōu)化，匹配速度更快。該文以Web頁(yè)面為研究對(duì)象，數(shù)據(jù)規(guī)模較小，最終采用蠻力匹配法。

使用SURF算法識(shí)別兩幅圖像中特征點(diǎn)對(duì)時(shí)可能受到噪聲的影響出現(xiàn)誤匹配點(diǎn)對(duì)問題，當(dāng)誤匹配點(diǎn)對(duì)所占比例較高時(shí)，將會(huì)影響判斷兩幅圖像的匹配度，最終造成測(cè)試任務(wù)的失敗。基于SURF算法原理特點(diǎn)以及誤匹配特征點(diǎn)的剔除要求，最終選用RANSAC算法進(jìn)行選取優(yōu)化。RANSAC算法的核心思想是從一組含有“外點(diǎn)”(outliers)的樣本中估算出正確數(shù)學(xué)模型參數(shù)的迭代算法。“外點(diǎn)”一般指的樣本中含有的噪聲數(shù)據(jù)，例如圖像匹配中的誤匹配點(diǎn)和擬合曲線中的離群點(diǎn)。其假定給定一組(通常很小的)“內(nèi)點(diǎn)”(可擬合模型的數(shù)據(jù))，存在一個(gè)可以擬合估算模型參數(shù)的過程。

主體驗(yàn)證方法測(cè)試流程為首先輸入預(yù)處理后的基準(zhǔn)和待測(cè)Web UI圖像并設(shè)置Hessian矩陣閾值和最小特征點(diǎn)匹配數(shù)，利用SURF模組返回各自圖像的特征點(diǎn)和描述符，隨后創(chuàng)建BF蠻力法匹配器生成特征點(diǎn)隊(duì)列，若生成的特征點(diǎn)對(duì)數(shù)量大于最小特征點(diǎn)對(duì)匹配數(shù)量時(shí)使用RANSAC算法優(yōu)化“內(nèi)點(diǎn)”，隨后將優(yōu)化后的特征點(diǎn)隊(duì)列(“內(nèi)點(diǎn)”)計(jì)算對(duì)應(yīng)特征點(diǎn)之間的歐氏距離，以特征點(diǎn)之間的歐氏距離是否為0評(píng)估對(duì)應(yīng)特征點(diǎn)的匹配度，并以歐氏距離為0的特征點(diǎn)對(duì)占總特征點(diǎn)對(duì)的比例判斷圖像之間的匹配度，當(dāng)匹配度低于百分之九十五，未成功匹配標(biāo)識(shí)符置為1。最終方法返回“內(nèi)點(diǎn)”數(shù)、匹配率和未成功匹配標(biāo)識(shí)符。

1.3 輔助驗(yàn)證方法

該文的研究對(duì)象是Web UI，當(dāng)待測(cè)網(wǎng)頁(yè)元素整體縮放比例相同或同方向旋轉(zhuǎn)時(shí)，因?yàn)镾URF算法具有尺度不變性、旋轉(zhuǎn)不變性和較高的視角變化魯棒性，使用改進(jìn)SURF方法匹配兩幅圖像的結(jié)果為高度匹配，測(cè)試通過，但待測(cè)元素不符合UI文檔規(guī)范，實(shí)際測(cè)試結(jié)果應(yīng)為不通過。為規(guī)避上述測(cè)試風(fēng)險(xiǎn)，故綜合SSDA算法要求圖像無(wú)拉伸、無(wú)旋轉(zhuǎn)能夠檢測(cè)出元素縮放和旋轉(zhuǎn)問題的優(yōu)勢(shì)，完成改進(jìn)SURF+SSDA的Web UI自動(dòng)化測(cè)試方法設(shè)計(jì)。

1972年SSDA算法(序貫相似性檢測(cè))由Barnea和Sliverman提出，該算法是一種模板匹配算法[15-16]。假定S(x,y)為M*N的搜索圖像，T(x,y)為m*n的模板圖像，Si,j為搜索圖像的一個(gè)子圖，其中i,j為圖像左上角坐標(biāo)，1≤i≤M-m-1，1≤j≤N-n-1。算法原理如下：定義絕對(duì)誤差、設(shè)置誤差累計(jì)閾值、計(jì)算絕對(duì)誤差、累加絕對(duì)誤差。

例1：“I thought you did,”said the mouse.I proceed.“Edwin and Morcar,the earls of Mercia and Northumbria,declared for him,and even Stigand,the patriotic archbishop of Canterbury,found it advisable—”[11]

模板匹配SSDA算法的啟用代表基于特征點(diǎn)的匹配算法返回值中fail_match的標(biāo)識(shí)符不為0，需利用SSDA算法進(jìn)一步評(píng)估對(duì)應(yīng)圖像匹配效果。首先輸入基準(zhǔn)Web UI整體圖像(模板圖)和誤匹配圖像(搜索圖)以及隨機(jī)點(diǎn)誤差閾值，SSDA算法隨機(jī)點(diǎn)誤差閾值經(jīng)實(shí)驗(yàn)評(píng)估設(shè)置為10，隨后將圖像變?yōu)榛叶葓D并確定子圖搜索范圍；然后利用Numpy模塊計(jì)算模板圖的均值，再以子圖范圍為基礎(chǔ)遍歷所有子圖并計(jì)算子圖均值，其中隨機(jī)不重復(fù)的像素點(diǎn)使用random函數(shù)近似選??；最后累加計(jì)算絕對(duì)誤差，當(dāng)誤差大于閾值范圍時(shí)返回最佳匹配區(qū)域的左上角坐標(biāo)。

1.4 綜合測(cè)試方法

綜合測(cè)試方法的數(shù)據(jù)處理包含兩個(gè)部分，一是Web頁(yè)面整體截圖的采集，二是Web頁(yè)面整體截圖的子圖分割。

Web頁(yè)面截圖采集操作流程為：首先輸入待測(cè)網(wǎng)址，利用Selenium創(chuàng)建Chrome瀏覽器驅(qū)動(dòng)，隨后使用Selenium庫(kù)內(nèi)置方法設(shè)置瀏覽器打開網(wǎng)頁(yè)時(shí)為全屏狀態(tài)，打開網(wǎng)頁(yè)后獲取當(dāng)前窗口高度和整體頁(yè)面高度，將整體頁(yè)面高度除以窗口高度獲取窗口滾動(dòng)次數(shù)，隨后建立循環(huán)截取每一次滾動(dòng)時(shí)的窗口截圖并將其轉(zhuǎn)為二維矩陣，最后拼接二維矩陣并將其轉(zhuǎn)換為圖像。

Web UI自動(dòng)化測(cè)試出現(xiàn)圖像誤匹配時(shí)需要定位問題在UI表層的位置，因此需要對(duì)Web頁(yè)面截圖進(jìn)行分割以滿足測(cè)試需要，同時(shí)分割Web頁(yè)面會(huì)降低圖像規(guī)模加快特征匹配的速度，減少自動(dòng)化測(cè)試運(yùn)行時(shí)間。目前，顯示器分辨率的長(zhǎng)一般為4的整倍數(shù)，如1 920，1 680，寬度受Web頁(yè)面實(shí)際長(zhǎng)度影響無(wú)法精確，故指定每張圖像的長(zhǎng)為顯示器分辨率除以4，寬為320。該部分使用Pillow的Image模塊完成編寫，圖像列表以數(shù)字序號(hào)形式命名儲(chǔ)存在數(shù)據(jù)庫(kù)。

基于數(shù)據(jù)處理，綜合自動(dòng)化測(cè)試方法的核心步驟為：首先進(jìn)行數(shù)據(jù)處理采集與預(yù)處理操作，隨后依據(jù)改進(jìn)SURF算法完成正確匹配區(qū)域的判定和錯(cuò)誤匹配區(qū)域的預(yù)篩選，然后使用SSDA算法進(jìn)一步驗(yàn)證錯(cuò)誤匹配圖像，返回其在整體頁(yè)面截圖中的最佳匹配左上角坐標(biāo)，最后驗(yàn)證坐標(biāo)并返回匹配判定結(jié)果。具體的方法運(yùn)行流程如圖1所示。

圖1 方法運(yùn)行流程

2 對(duì)比實(shí)驗(yàn)與結(jié)果分析

2.1 實(shí)驗(yàn)環(huán)境搭建

由于開發(fā)Web頁(yè)面時(shí)遵循以用戶為中心理念，頁(yè)面的內(nèi)容篇幅一般控制在鼠標(biāo)十次滑動(dòng)內(nèi)，故整體截圖的數(shù)據(jù)規(guī)模較小，運(yùn)行該文設(shè)計(jì)的綜合自動(dòng)化測(cè)試方法無(wú)需服務(wù)器。實(shí)驗(yàn)對(duì)比環(huán)境的具體硬件配置為Intel Core(TM) i7-1065G7 CPU @1.3 GHz處理器+8 GB內(nèi)存+1 920*1 080顯示器。在軟件層面，所有程序由Python進(jìn)行開發(fā)，方法設(shè)計(jì)采用了Opencv3.4.21和Numpy1.19.5版本庫(kù)，數(shù)據(jù)采集主要用到Selenium3.141.0版本庫(kù)，數(shù)據(jù)持久化采用了Mysql數(shù)據(jù)庫(kù)。

2.2 實(shí)驗(yàn)設(shè)計(jì)

實(shí)驗(yàn)對(duì)象的選取參考三個(gè)方面：Web頁(yè)面設(shè)計(jì)、頁(yè)面元素量和網(wǎng)站用戶流量。Web網(wǎng)頁(yè)分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)，本研究選取靜態(tài)網(wǎng)頁(yè)。相比較于動(dòng)態(tài)網(wǎng)頁(yè)而言，其無(wú)需后臺(tái)數(shù)據(jù)庫(kù)、不含JS等腳本代碼并且不可交互，多適用于展示型網(wǎng)頁(yè)。此外，靜態(tài)網(wǎng)頁(yè)能夠更加快速確定基準(zhǔn)圖像，因此研究選取無(wú)動(dòng)態(tài)元素或較少動(dòng)態(tài)元素的靜態(tài)網(wǎng)頁(yè)進(jìn)行實(shí)驗(yàn)。實(shí)驗(yàn)對(duì)象評(píng)估選取詳見表1。

表1 實(shí)驗(yàn)對(duì)象評(píng)估

綜合評(píng)估網(wǎng)頁(yè)瀏覽量和網(wǎng)頁(yè)設(shè)計(jì)特征，最終選取騰訊網(wǎng)首頁(yè)(www.qq.com)作為實(shí)驗(yàn)對(duì)象。為評(píng)估方法的實(shí)際有效性，將騰訊網(wǎng)網(wǎng)頁(yè)存儲(chǔ)為本地文件后修改HTML和CSS代碼制造Bug。同時(shí)選擇使用Python搭建小型Web服務(wù)器的形式上線本地騰訊網(wǎng)網(wǎng)頁(yè)，既可以修改本地網(wǎng)頁(yè)文件制造Bug，又能利用Selenium進(jìn)行驅(qū)動(dòng)操作以完成實(shí)驗(yàn)測(cè)試。

分析UI設(shè)計(jì)需求和騰訊網(wǎng)的網(wǎng)頁(yè)結(jié)構(gòu)，共設(shè)計(jì)編寫測(cè)試用例77條，其中文字相關(guān)54條，圖片相關(guān)23條。其中預(yù)置條件說明測(cè)試該條用例需要將設(shè)備或軟件調(diào)整至什么狀態(tài)，用例步驟指明手工測(cè)試人員和測(cè)試腳本以什么樣的順序測(cè)試用例，預(yù)期結(jié)果是判斷測(cè)試結(jié)果的對(duì)照標(biāo)準(zhǔn)。其次，為了對(duì)比驗(yàn)證方法效能，Bug檢測(cè)層面參照用例設(shè)計(jì)表的用例類型分布比例，人工修改騰訊網(wǎng)本地HTML、CSS文件最終生成18個(gè)Bug，其中文字類12個(gè)，圖片類6個(gè)。表2為部分設(shè)計(jì)用例。

表2 部分用例設(shè)計(jì)

2.3 實(shí)驗(yàn)指標(biāo)與結(jié)果分析

對(duì)比實(shí)驗(yàn)不以實(shí)際項(xiàng)目流程作為依托，不存在項(xiàng)目迭代和自動(dòng)化團(tuán)隊(duì)評(píng)價(jià)的要求，故摒棄自動(dòng)化運(yùn)行成功率、自動(dòng)化運(yùn)行頻率和自動(dòng)化維護(hù)成本指標(biāo)，采用自動(dòng)化用例覆蓋率、自動(dòng)化發(fā)現(xiàn)Bug比例、平均測(cè)試時(shí)長(zhǎng)和結(jié)果人工驗(yàn)證四項(xiàng)指標(biāo)評(píng)估對(duì)比方法。經(jīng)多次測(cè)試，手工測(cè)試法、文本驗(yàn)證法和基于圖像匹配算法的Web UI自動(dòng)化測(cè)試方法的綜合測(cè)試結(jié)果如表3所示，測(cè)試方法在平均Bug指標(biāo)中具體的分布結(jié)果如圖2所示。

表3 綜合測(cè)試結(jié)果

圖2 各方法Bug分布

綜上，實(shí)驗(yàn)中改進(jìn)SURF+SSDA方法除時(shí)間效率層面在用例覆蓋率、Bug比例中測(cè)試時(shí)長(zhǎng)指標(biāo)中均優(yōu)于傳統(tǒng)Web UI自動(dòng)化測(cè)試方法。與改進(jìn)SURF方法相比，平衡一部分時(shí)間效率后，在Bug比例指標(biāo)上得到提升。此外，除結(jié)果驗(yàn)證層面方法不具備優(yōu)勢(shì)，其余各指標(biāo)均接近或優(yōu)于手工測(cè)試法。

3 結(jié)束語(yǔ)

隨著高速互通網(wǎng)絡(luò)時(shí)代的到來，Web軟件的更新迭代速度逐漸加快，自動(dòng)化測(cè)試作為提高效率的有效方式被軟件公司和學(xué)者廣泛地研究和使用。從Web整體頁(yè)面截圖出發(fā)，該文探討了一種Web UI的自動(dòng)化測(cè)試方法。該方法使用Selenium采集基準(zhǔn)圖像和測(cè)試圖像，結(jié)合基于特征點(diǎn)的SURF算法和基于模板匹配的SSDA算法構(gòu)建驗(yàn)證框架，擴(kuò)充了Web UI自動(dòng)化測(cè)試方法體系，提升了自動(dòng)化測(cè)試質(zhì)量。

將圖像匹配算法引入自動(dòng)化測(cè)試做了一些嘗試，提出的自動(dòng)化測(cè)試方法能夠較為全面地覆蓋測(cè)試用例，較為高效地完成測(cè)試任務(wù)，并且方法的遷移成本較低可以滿足廣泛的測(cè)試需求。但不可否認(rèn)的是該研究過程中還存在一些不足的地方。設(shè)計(jì)的自動(dòng)化測(cè)試方法將網(wǎng)頁(yè)整體截圖分割為大小相同的圖片，測(cè)試出的Bug圖片需人工定位問題點(diǎn)反饋，這在一定程度上增加了測(cè)試成本。在之后的改進(jìn)上可以引入深度學(xué)習(xí)的目標(biāo)檢測(cè)技術(shù)標(biāo)注出所有元素范圍框，再進(jìn)行圖像分割，犧牲一部分的測(cè)試時(shí)間可以加快結(jié)果定位，降低人工成本實(shí)現(xiàn)自動(dòng)反饋。其次，圖像和文字的色彩驗(yàn)證，特征點(diǎn)匹配算法和模板匹配算法以灰度圖像驗(yàn)證兩幅圖像的匹配程度，無(wú)法驗(yàn)證圖像色彩是否一致。Web UI中元素色彩是測(cè)試中的重要組成部分，后續(xù)可綜合使用Pillow庫(kù)和OpenCV庫(kù)完成顏色空間上的對(duì)比測(cè)試，使得測(cè)試方法更具魯棒性。