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

時間 2019-11-17

標籤圖像識別自動確認網頁加載成功欄目 HTML 简体版

原文原文鏈接

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

需求分析

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

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

設計思路

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

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

Demo實現

純綠色的網頁

建立一個「greenpage.html」，它的代碼以下：github

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

</body>
</html>複製代碼

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

在局域網中搭建一個Web Server，並讓局域網的設備能夠連接。打開終端，進入到這個html文件所在的文件夾，並經過Python 3在局域網中搭建一個簡單地WebServer：瀏覽器

cd ~/Project/IdentifyWebpage
python -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)複製代碼

運行之後的結果以下圖所示：

從圖中能夠看到，9個點的RGB值所有是(0, 128, 0)，這個值正是綠色的RGB值。到這裏，能夠認爲這個圖片大部分的地方確實是綠色的。若是你以爲9個點仍是不夠全面，那你能夠使用代碼生成幾百個點來計算。

獲取屏幕截圖

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

adb shell /system/bin/screencap -p /sdcard/screenshot.png
adb pull /sdcard/screenshot.png ~/Project/IndenfyWebpage/screenshot.png複製代碼

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

第二條命令將手機內置存儲中的截圖文件取出來，並保存到電腦中。若是你的電腦爲Windows系統，能夠將第二條命令修改成：

adb pull /sdcard/screenshot.png D:/Project/IndenfyWebpage/screenshot.png複製代碼

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

完整的程序請訪問-> github.com/kingname/Au…