用图像识别来自动确认网页加载成功

时间 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…