用圖像識別來自動確認網頁載入成功

02-09

在對安卓手機設計自動化測試用例的時候，判斷一個測試場景是否可以自動化的依據在於其是否需要人的參與。對於wifi能否自動打開關閉，簡訊能否自動收發這樣的場景，不需要人參與就可以通過程序來判斷，因此對Wifi與簡訊這樣的測試，可以通過程序來實現自動化測試。但是另外還有一些測試場景，需要人的眼睛來看，這種場景要實現自動化就比較困難。

需求分析

使用安卓的瀏覽器訪問一個網站，如何判斷網站已經載入成功？目標網站確實已經收到了請求，也返回了HTML數據，手機也收到了網站返回的數據，但是不知道什麼原因，在某些時候，瀏覽器上面卻什麼都沒有顯示，而瀏覽器輸出的Log卻完全看不出異樣。對於這樣的場景，為了減少人力開銷，如何讓測試程序自動發現網頁沒有載入成功，並通知開發者？

這個需求可以使用計算機圖像識別來實現自動化。

設計思路

由於這個需求只需要判斷網頁是否載入成功，因此並不需要非常高深的圖像識別的理論。對一個網頁來說，所謂的載入成功就是指它裡面的內容能夠正常地在瀏覽器中顯示出來。因此，可以設計一個特別的網頁，網頁要足夠簡單，但是又要足夠特別，從而方便圖像識別。

這篇文章將會使用一個純綠色的網頁來進行測試。網頁載入完成以後，手機屏幕上絕大多數的區域是綠色的。這個時候，截取屏幕，並使用程序來識別這張截圖。如果發現截圖中有大面積的綠色區域，那就證明網頁已經載入完成了。

Demo實現

純綠色的網頁

創建一個「greenpage.html」，它的代碼如下：

<html><head> <title>Green Page</title></head><body bgcolor="green"></body></html>

網站載入成功以後，頁面是全綠色的，如下圖所示。

在區域網中搭建一個Web Server，並讓區域網的設備可以鏈接。打開終端，進入到這個html文件所在的文件夾，並通過Python 3在區域網中搭建一個簡單地WebServer：

cd ~/Project/IdentifyWebpagepython -m http.server

使用手機訪問「電腦IP:8000/greenpage.html」，效果如下圖所示。

識別綠色截圖

這個Demo使用Pillow圖像處理庫來做圖像顏色的識別，通過pip安裝Pillow：

pip install pillow

安裝完成以後，在Python程序中使用：

from PIL import Image

導入它圖像模塊。

程序使用Image模塊載入截圖，並從截圖中讀取某一點顏色RGB值：

img = Image.open(snapshot.png)color = img.getpixel((700, 800))print(color)

代碼中的（700, 800）是截圖中的某一點的座標。第一個參數為橫座標，第二個參數為縱座標。截圖左上角為(0, 0)，越往下，縱座標越大；越往右，橫座標越大。

為了謹慎起見，在截圖中取9個點，分別獲取他們的RGB值：

points = [(200, 300), (455, 678), (333, 1200), (300, 500), (888, 678), (900, 800), (400, 600), (245, 365), (799, 777)]img = Image.open(snapshot.png)for point in self.points: color = img.getpixel(point) print(color)

運行以後的結果如下圖所示：【此處有圖，垃圾知乎，圖片死活上傳不了：http://7sbpmp.com1.z0.glb.clouddn.com/2016-12-04-19-44-55.png】

從圖中可以看到，9個點的RGB值全部是(0, 128, 0)，這個值正是綠色的RGB值。到這裡，可以認為這個圖片大部分的地方確實是綠色的。如果你覺得9個點還是不夠全面，那你可以使用代碼生成幾百個點來計算。

獲取屏幕截圖

adb（Android Debug Bridge）是安卓的調試工具，可以通過adb的命令來控制手機。要對手機截圖，只需要使用下面兩條命令：

adb shell /system/bin/screencap -p /sdcard/screenshot.pngadb pull /sdcard/screenshot.png ~/Project/IndenfyWebpage/screenshot.png

第一條命令生成截圖，並將截圖保存到手機內置存儲中。雖然這裡寫的是「sdcard」，但是對於現在沒有SD卡的手機，這條命令依然可以使用。

第二條命令將手機內置存儲中的截圖文件取出來，並保存到電腦中。如果你的電腦為Windows系統，可以將第二條命令修改為：

adb pull /sdcard/screenshot.png D:/Project/IndenfyWebpage/screenshot.png

保存到D盤下面。注意這裡使用的是從右上到左下的斜杠（/）。

完整的程序請訪問-> https://github.com/kingname/Automatic