攜程APP/Web功能和視覺(jué)測(cè)試平臺(tái)-Watcher

從自動(dòng)化測(cè)試誕生以來(lái)，始終阻礙其成功落地實(shí)施的重要因素之一是頻繁變更的業(yè)務(wù)需求，導(dǎo)致自動(dòng)化測(cè)試維護(hù)成本極其高昂。尤其是隨著近些年敏捷開發(fā)，DevOps開發(fā)模式的流行，一方面迫切地希望在開發(fā)生命周期內(nèi)提高自動(dòng)化測(cè)試的占比，從而縮短測(cè)試時(shí)間，增加開發(fā)迭代次數(shù)來(lái)加快開發(fā)進(jìn)度和保證開發(fā)質(zhì)量。而另一方面，隨著迭代開發(fā)頻率加快，需求的頻繁變更卻進(jìn)一步加劇了維護(hù)自動(dòng)化測(cè)試穩(wěn)定性的難度。這兩者不可調(diào)和的矛盾往往導(dǎo)致了自動(dòng)化測(cè)試實(shí)施的難以為繼，很多時(shí)候自動(dòng)化測(cè)試成為了雞肋，食之無(wú)味，棄之可惜。

那么如何減少需求變更對(duì)UI自動(dòng)化測(cè)試的影響，如何另辟蹊徑順利地進(jìn)行UI自動(dòng)化測(cè)試？本文后續(xù)一一為你解答。

?“自動(dòng)化測(cè)試不是銀彈” 這個(gè)觀點(diǎn)已經(jīng)得到業(yè)界的普遍認(rèn)同，那么為何業(yè)界還是如此推崇自動(dòng)化測(cè)試呢？測(cè)試完全的自動(dòng)化固然不太可能，但在合適場(chǎng)景使用合理的自動(dòng)化測(cè)試，卻依然可以發(fā)揮出巨大的作用，得到較高的收益。

對(duì)于UI自動(dòng)化測(cè)試而言，業(yè)務(wù)頻繁變更導(dǎo)致的UI變化是UI自動(dòng)化測(cè)試失敗的主要原因。如果我們能盡可能地消除UI變化對(duì)自動(dòng)化測(cè)試的影響，則勢(shì)必會(huì)極大地提高自動(dòng)化測(cè)試的穩(wěn)定性。

梳理下一條UI自動(dòng)化測(cè)試用例的結(jié)構(gòu)，我們可以簡(jiǎn)單地歸納出如下圖所示的關(guān)系：

?

自動(dòng)化測(cè)試用例結(jié)構(gòu)簡(jiǎn)化圖

?

UI界面中控件的變化無(wú)疑是很頻繁的，給自動(dòng)化測(cè)試的實(shí)施帶來(lái)很大的障礙。如果能切斷業(yè)務(wù)操作和結(jié)果斷言對(duì)于控件的依賴，則可以很大程度地提高自動(dòng)化測(cè)試的穩(wěn)定性。而隨著圖像識(shí)別技術(shù)的進(jìn)步，通過(guò)圖像識(shí)別技術(shù)擺脫對(duì)控件的依賴正逐漸成為可能。

??

UI自動(dòng)化測(cè)試在驗(yàn)證預(yù)期結(jié)果是否正確時(shí)，通常是通過(guò)驗(yàn)證預(yù)期結(jié)果某些關(guān)鍵信息來(lái)實(shí)現(xiàn)的，比如是否出現(xiàn)某個(gè)關(guān)鍵字，是否標(biāo)題正確等等。這種驗(yàn)證方式固然簡(jiǎn)單，卻也存在不少的不足，其中最大的不足就是無(wú)法驗(yàn)證UI的樣式。

UI是最終呈現(xiàn)在用戶面前直觀的東西，UI交互和樣式的好壞直接決定了用戶對(duì)一款產(chǎn)品的直觀印象。視覺(jué)測(cè)試是驗(yàn)證UI是否正確展示給用戶的測(cè)試手段之一，通過(guò)視覺(jué)測(cè)試可以找出產(chǎn)品在可視化中存在哪些缺陷，比如字體，布局等問(wèn)題。那么如何實(shí)施視覺(jué)測(cè)試呢，業(yè)界最普遍的做法就是圖像比對(duì)，具體實(shí)施步驟網(wǎng)上相關(guān)的資料不少，這里就不贅述了。

Watcher是一個(gè)基于圖像比對(duì)的App和Web視覺(jué)測(cè)試平臺(tái)， 主要分為三個(gè)部分：SDK，圖像比對(duì)服務(wù)，Watcher比對(duì)平臺(tái)。

Watcher SDK主要用于與自動(dòng)化測(cè)試框架（如Selenium，Appnium , Airtest）結(jié)合來(lái)實(shí)現(xiàn)與Watcher比對(duì)平臺(tái)的交互（比如圖片上傳，客戶端信息收集，驗(yàn)證結(jié)果返回等等）。Watcher比對(duì)平臺(tái)則主要進(jìn)行圖像管理，測(cè)試配置管理，測(cè)試結(jié)果查看，人工確認(rèn)等工作。圖像比對(duì)服務(wù)則提供了圖像比對(duì)，AI識(shí)別等服務(wù)。

Watcher部署架構(gòu)圖

?

Watcher作為視覺(jué)測(cè)試平臺(tái)，其實(shí)現(xiàn)原理也遵循視覺(jué)測(cè)試的基本步驟，大致可以分為以下幾個(gè)步驟：

1）在UI自動(dòng)化測(cè)試框架引入Watcher SDK，編寫測(cè)試用例并在測(cè)試用例合適的位置調(diào)用Watcher的Check方法進(jìn)行圖像比對(duì)；

2）Watcher平臺(tái)在接收到截圖后，會(huì)首先進(jìn)行判斷是否有對(duì)應(yīng)的基線圖，如果有基線圖，則會(huì)與基線圖像進(jìn)行比對(duì)；如果沒(méi)有基線圖，則會(huì)將此次截圖自動(dòng)作為基線圖。

3）查看圖像比對(duì)的結(jié)果

a. 如果比對(duì)差異是由功能變更引起的，則審查通過(guò)并以最新截圖作為新基準(zhǔn)圖；

b. 如果比對(duì)差異確定是缺陷，則記錄缺陷，基準(zhǔn)圖保持不變；

視覺(jué)測(cè)試流程示意圖

進(jìn)行視覺(jué)測(cè)試的第一步就是收集被測(cè)系統(tǒng)的信息和截圖。為此，我們編寫了支持目前主流自動(dòng)化測(cè)試框架的SDK，分別為Appnium SDK，Airtest SDK，Selenium SDK。

Wathcer SDK的主要作用包括：

• 收集被測(cè)系統(tǒng)的環(huán)境信息（分辨率，機(jī)器信息等）

• 定義用例信息

• 截屏并上傳到服務(wù)器進(jìn)行比對(duì)

使用Watcher SDK非常的簡(jiǎn)單，將SDK引入到自己的自動(dòng)化項(xiàng)目后，在測(cè)試用例中編寫如下語(yǔ)句就可以使用，實(shí)現(xiàn)無(wú)縫接入。

watcher = Watcher_util()
watcher.watcher_open("測(cè)試用例名稱")
watcher.watcher_check("驗(yàn)證點(diǎn)1")
....測(cè)試代碼
watcher.watcher_check("驗(yàn)證點(diǎn)2")

Airtest SDK編寫測(cè)試用例代碼示例

??

圖像比對(duì)服務(wù)是一個(gè)RESTFUL的服務(wù)站點(diǎn)，對(duì)外提供了一系列的服務(wù)用于進(jìn)行圖像對(duì)比，并返回對(duì)比結(jié)果。該服務(wù)是一個(gè)微服務(wù)的站點(diǎn)，如果圖片比對(duì)壓力較大，可以通過(guò)橫向擴(kuò)展的方式來(lái)擴(kuò)展圖像對(duì)比的服務(wù)能力。

Watcher比對(duì)平臺(tái)是一個(gè)Web站點(diǎn)，主要負(fù)責(zé)圖像比對(duì)，比對(duì)測(cè)試結(jié)果展示，測(cè)試配置等工作。在Watcher比對(duì)平臺(tái)中，我們可以很直觀的查看比對(duì)的最終結(jié)果，測(cè)試用例的簡(jiǎn)短信息，并對(duì)成功/失敗/新增的用例用顏色和圖標(biāo)加以區(qū)分。

比對(duì)平臺(tái)結(jié)果列表頁(yè)

?

對(duì)于對(duì)比失敗的測(cè)試用例，仍然需要測(cè)試或開發(fā)人員進(jìn)行人工審查確認(rèn)，相關(guān)人員可以在比較結(jié)果詳情頁(yè)中查看對(duì)比的詳細(xì)結(jié)果。如果測(cè)試用例實(shí)際為通過(guò)，則將結(jié)果標(biāo)記為通過(guò)，如需替換基準(zhǔn)圖，則亦可以選擇將最新截圖替換為基準(zhǔn)圖。如果測(cè)試結(jié)果實(shí)際為失敗，則將結(jié)果標(biāo)記為失敗并記錄缺陷。

?

對(duì)比結(jié)果詳情頁(yè)

?

在對(duì)測(cè)試結(jié)果進(jìn)行審查的過(guò)程中，也可以對(duì)測(cè)試用例的對(duì)比設(shè)置進(jìn)行修改，比如設(shè)置忽略區(qū)域，設(shè)置閾值等。

傳統(tǒng)的圖像比對(duì)測(cè)試是最新的截圖與基線圖進(jìn)行比對(duì)，通過(guò)與基線圖的差異來(lái)識(shí)別是否存在缺陷，我們稱之為基線比對(duì)。通過(guò)實(shí)踐，我們發(fā)現(xiàn)在有些場(chǎng)景下，基線比對(duì)的效果并不理想，比如查詢結(jié)果頁(yè)。該頁(yè)面具有較強(qiáng)的時(shí)效性，也許時(shí)隔一天，查詢的結(jié)果就截然不同，自然就對(duì)比對(duì)的結(jié)果造成了很大的干擾。所以我們?cè)赪atcher中加入了實(shí)時(shí)比對(duì)。

實(shí)時(shí)比對(duì)跟基線比對(duì)并沒(méi)有本質(zhì)的區(qū)別，區(qū)別只在于跟誰(shuí)比的問(wèn)題。開啟實(shí)時(shí)比對(duì)后，我們可以在新舊版本上同時(shí)執(zhí)行自動(dòng)化用例，Watcher會(huì)將收集到的截圖進(jìn)行比對(duì)，從而消除時(shí)效性帶來(lái)的干擾，提高比對(duì)的準(zhǔn)確性。

基線比對(duì)和實(shí)時(shí)比對(duì)示意圖

?

???

視覺(jué)測(cè)試的關(guān)鍵在于圖像比對(duì)，那么圖像比對(duì)算法的優(yōu)劣就成為了視覺(jué)測(cè)試是否成功的關(guān)鍵所在。Watcher提供了多種圖像對(duì)比的模式，分別為精準(zhǔn)比對(duì)（像素），內(nèi)容比對(duì)以及AI比對(duì)。

??

?

精準(zhǔn)比對(duì)是通過(guò)像素比對(duì)來(lái)實(shí)現(xiàn)的，也是Watcher默認(rèn)和最常用的比對(duì)方式。這里我們使用OpenCV中的算法來(lái)實(shí)現(xiàn)。大致算法流程如下:

?

精準(zhǔn)比對(duì)的算法流程

?

??

模板比對(duì)是先在基線截圖中圈出需要比對(duì)的區(qū)域截圖，然后在最新截圖中根據(jù)該區(qū)域截圖進(jìn)行圖像模板匹配的一種對(duì)比方式，也是通過(guò)OpenCV的算法實(shí)現(xiàn)。

模板比對(duì)算法流程圖

??

精確比對(duì)的優(yōu)勢(shì)在于比較全面，頁(yè)面的樣式，內(nèi)容都在比較范圍之內(nèi)，但有時(shí)過(guò)于靈敏，稍微有些樣式的變動(dòng)就會(huì)影響比對(duì)的結(jié)果。所以對(duì)于有些頁(yè)面或區(qū)域，也可以選擇內(nèi)容比對(duì)的方式。內(nèi)容比對(duì)主要通過(guò)圖像的文字識(shí)別實(shí)現(xiàn)。

?

內(nèi)容比對(duì)算法流程圖

?

??

AI比對(duì)是Watcher中的一種尚在探索試用階段的比對(duì)方式，通過(guò)AI圖像識(shí)別技術(shù)，我們即可以智能的忽略正常差異的部分（比如日期，控件大小變化等），也可以識(shí)別出存在異常的部分（比如圖像缺失，文字堆疊等），使用YOLOv3實(shí)現(xiàn)。

AI比對(duì)算法流程以及部分識(shí)別的效果

?

??

在本文中，我們介紹了Watcher如何結(jié)合UI自動(dòng)化測(cè)試框架實(shí)現(xiàn)視覺(jué)測(cè)試以及在實(shí)施視覺(jué)測(cè)試過(guò)程中的一些實(shí)踐所得。Watcher提供了從SDK，圖像對(duì)比，結(jié)果展示到人工確認(rèn)的一整套的功能和視覺(jué)測(cè)試解決方案。目前在團(tuán)隊(duì)使用過(guò)程中得到了積極的反饋：

• UI自動(dòng)化測(cè)試用例數(shù)量縮減50%以上，部分模塊縮減80%；

• UI自動(dòng)化測(cè)試執(zhí)行較之前更加穩(wěn)定，執(zhí)行時(shí)間縮短30%以上；

• 提高測(cè)試人員排查和分析問(wèn)題效率；

當(dāng)然在使用過(guò)程中也發(fā)現(xiàn)了很多的不足，比如在有些場(chǎng)景下比對(duì)誤報(bào)率偏高，不支持跨平臺(tái)比對(duì)等，這些都是我們需要改進(jìn)的地方。我們還會(huì)在AI比對(duì)中挖掘更多的適用場(chǎng)景，比如隨著AI算法的優(yōu)化，也可以將AI圖像識(shí)別擴(kuò)展到控件查找上，從而更便利的編寫自動(dòng)化測(cè)試用例。

本公眾號(hào)全部原創(chuàng)已整理成一個(gè)專欄，請(qǐng)?jiān)诠娞?hào)里回復(fù)「測(cè)試開發(fā)」獲取！