基于图像识别测试手机浏览器打开网页首屏时间的方法

本文涉及性能测试技术，特别是涉及一种基于图像识别的测试手机网页首屏时间的方法，它可以应用在手机浏览器页面加载响应时间的的自动化测试或性能检测中。同时可以应用到其他android的apk的响应时间的测试中去

随着智能手机等移动终端的发展，越来越多的用户开始通过手机等设备浏览网页，以获取用户所需的信息。

用户使用手机访问网站是基于手机浏览器所获取的网页实现的。通常情况下，用户访问网站的页面全部加载完毕时，总页面高度可能有一屏到多屏不等，总的页面加载时间要比首屏加载时间长很多，但是首屏加载时间是用户对一个浏览器加载性能的重要体验因素，首屏加载时间是指手机等设备的浏览器全屏区域充满网站页面所需的时间。当网站页面充满首屏区域后，用户就可以看到网页内容并进行相应的点击、屏幕滚动等操作，而不必等到网站的所有网页都加载完成。因而，从用户发起访问开始，到首屏内容加载完成这段时间，对用户的使用体验至关重要。

而对于手机浏览器网页首屏加载时间的测量也是至关重要的，在先技术中，通常采用高速摄像机对整个加载操作过程进行拍照，并记录每张照片的拍摄时间，然后人工的在拍摄的照片中对比查找预先拍摄好的起始和结束图片，最后将这两张照片的拍摄时间相减，以获得网页的首屏加载时间。但是高速摄像机受外界因素（如距离、光度等）的影响，使得拍摄得到的照片具有一定的时间间隔，进而导致测试的结果不准确，并且，采用人工对比查找预先拍摄好的起始和结束图片，导致测试过程耗费的时间比较长，整个测试步骤繁琐。

鉴于上述问题，本文便提供一种低消耗，高效率，高时间精确度的用于测试手机网页首屏时间的性能指标的方法。

为了解决上述问题，本文提出了一种基于图像识别的测量手机网页首屏时间的方法，如图1所示，包括步骤：

1. 通过Stf将手机与电脑进行连接,实现将手机上的图像实时（官方介绍30毫秒的延迟）的传输到电脑屏幕，由于手机的性能较差，如果在手机上做图像识别这点实现起来还是比较困难的，但是如果在电脑上对图像进行识别，目前的技术还是比较靠谱本文使用了一套比较简单，而且可以做自动化测试的框架sikuli来实现；

2. 使用电脑浏览器操作手机，对于不同的测试安装包，分别在网页首屏选择特定的图像作为标志点。使用sikuli编写图像识别程序，使用Python编写首屏加载过程中获取手机各项性能指标的程序；

3. 同时调用上述两个程序，通过特定的图像识别方法对首屏加载的图像进行对比，如果选定的标志点没有匹配，则进行加载；如果选定的标志点匹配完成，则标志加载完成，记录首屏请求的时间数值，并停止图片识别程序和性能监控程序；

4. 判断是否还有未测试的安装包，如果有，则跳转到步骤(2),如果没有则继续；

5. 从数据库中读取测试采集到的数据，使用这些数据生成最终的测试报告。

关于stf的简介：

在本文的背景中有介绍，在没有实现自动测试之前，整个人工测试的核心工作就是人工筛选图片，这是一个繁琐而且比较枯燥的工作，而且每个人筛选图片的标准会有一定的不同，导致测试结果也会有一定的误差。所以当时我们也尝试过使用图像识别的方式来筛选通过摄像头录制来的图片，但是在这个过程中存在很多问题，如录制时的灯光明暗程度，录制时摄像头和手机的距离等问题都会影响到录制图片的效果，这样就会导致图像识别的失败。后来使用android的自动化截图，但是间隔时间太大也被放弃，直到发现了stf才解决了该问题。

Android原生的截图工具截图非常缓慢，而stf工具中截图非常快，这是因为stf自己写了一个工具叫minicap用来替代原生的screencap，这个工具是stf框架的依赖工具。

Minicap介绍:

Minicap提供了一个能够将android设备屏幕的数据实时输出到外部的一个sokcet接口，这就意味着他有很大的应用空间。例如，它被用来在STF进行远程控制。

Minicap不许要对android设备进行root它是通过adb命令来执行的，可以支持目前大部分android手机,捕捉屏幕当前使用两张方法，对于较旧的Android版本，我们使用ScreenshotClient，一个私有的API接口在Android开放源代码项目（AOSP）。对于较新版本，我们使用一个虚拟显示，这也需要访问私有APIs的。由于minicap依赖于私有的APIs，某些设备可能无法正常工作。在写这篇文章的时候，我们已经测试了大约160个设备（包括一些重复），迄今已发现了三种型号的段错误。Xiaomi "HM NOTE 1W" (Redmi Note 1W),Huawei "G750-U10" (Honor 3X)Lenovo "B6000-F" (Yoga Tablet 8)

关于流畅程度：

Stf运行的流畅程度很依赖于使用的设备。一些性能较差或者一些旧的Andr​​oid较弱的设备可以达到10-20帧。安装最新Andr​​oid系统的设备通常可达到30-40 FPS，但也有一些例外。为了获得最大的FPS建议手机保持垂直和水平分辨率运行minicap。

使用起来并非零延迟，这要取决于代码的性能和usb传送的速度，一般在30毫秒左右。

Minicap工具是用NDK开发的，属于Android的底层开发，该工具分为两个部分，一个是动态连接库.so文件，一个是minicap可执行文件。但不是通用的，因为CPU架构的不同分为不同的版本文件，STF提供的minicap文件根据CPU 的ABI分为如下4种：

分别针对arm64-v8a、armeabi-v7a,x86,x86_64 架构。而minicap.so文件在这个基础上还要分为不同的sdk版本。

Stf安装依赖的环境：

• Node.js >= 0.12

• ADB properly set up

• RethinkDB >= 2.2

• GraphicsMagick (for resizing screenshots)

• ZeroMQ libraries installed

• Protocol Buffers libraries installed

• yasm installed (for compiling embedded libjpeg-turbo)

• pkg-config so that Node.js can find the libraries

在mac下我们可以通过一下命令安装以上的依赖包：

rew install rethinkdb graphicsmagick zeromq protobuf yasm pkg-config

nodejs安装

在 https://nodejs.org/download/下载nodejs安装包，解压并控制台进入目录

运行如下命令

./configure

make

sudo make install

sudo ln -s /usr/local/bin/node /usr/bin/node

sudo ln -s /usr/local/bin/npm /usr/bin/npm

验证：控制台分别输入node -v和npm -v验证是否配置完成

安装stf (可能需要或者VPN)

控制台执行命令：

sudo npm install -g stf

安装过程如下：

STF运行

一、启动rethinkDB

安装完成后，打开单独的控制台，运行命令等待服务启动完成：

二、启动stf服务端

打开一个单独的控制台，运行命令等待服务启动完成：

stf local

这里为了能够让别人能够访问的stf所以添加了对外访问的ip地址

三、运行客户端

在浏览器中输入地址： http://public-ip（启动stf舌设置的public-ip地址）:7100/ 访问客户端。

输入用户名和邮箱登录即可开始使用。

登录后的截图如下：

使用手机页面：

 其实在这个页面我们可以看到stf的功能强大之处，这套系统不仅能将手机上的图像实时同步到web端，而且还可以将web端的操作实时反馈给手机设备，所以选择了sikuli（稍后会详细介绍）工具完全实现了对手机端的自由操作。

Stf的其他特性

1. 覆盖android大部分系统，从android2.3到5.1

2. 可以通过电脑的鼠标和键盘任意操作手机设备

3. 可以复制和粘贴电脑上的内容到手机设备

4. 在测试过程中遇到问题可以实时截图并保存到服务器中

5. 可以使用拖拽的方式实现apk的安装

6. 可以在任何安装过的浏览器中打开urls

7. 可以实时显示log，并且具备实时过滤功能

8. 可以远程执行各种shell命令

9. 通过android studio、chrome debug tools实现远程debug功能

10. 甚至可以通过iphone手机中safari浏览器操作任何远程的android设备

下面介绍一下sikuli：

作为一个手工或者黑盒测试人员，有一项技能应该是必备的，那就是截图技能。好的bug截图会让开发人员一眼就能定位到bug所在，让他们很清晰直观的了解到什么地方出了bug，这个bug究竟是什么。截图技巧的高低会直接影响到开发人员对测试人员的评价高地及信任程度，以至于很多时候，有一些刚入行的同学在跟我聊天的时候隐约提到，他们认为手工测试就是 点来点去 + 截图。当然这个观点自然是片面和消极的，不过从这里我们也可以看出，对测试人员来说，截图一手好图不亚于某风流才子吟得一首好诗，会截图，截好图的测试人员会潜移默化的使得整个团队都变得高效和敏捷起来。

测试人员都会截图。以前我们截的图都是给人看的，现在我们要截图给机器看，让机器通过截图去“读懂”我们的想法，为我们进行自动化测试，Sikuli可以帮你实现这一切。

关于自动化测试工具而言，很对对ui空间的识别都是通过控件的各种属性来实现的，而sikuli却是通过图像识别的方式来识别控件，所以就解决了本文中的难点问题，因为手机的屏幕在浏览器中就是一个元素，而手里的元素很难通过属性来识别，所以使用图像识别的方式完全可以解决该问题。

 　　Sikuli（在墨西哥维乔印第安人的语言里是”上帝之眼”的意思）是由美国麻省理工学院开发的一种最新编程技术，使得编程人员可以使用截图替代代码，从而简化代码的编写流程。从它研究方向上看，是一种编程技术，但是该技术还可以用于进行大规模的程序测试，脚本程序编写使用的是python语言。

而且Sikuli提供非常友好Sikuli-script.jar，它可以方便地与Selenium web Driver一起使用。我们甚至可以使用Sikuli来自动化Adobe视频音频播放器或网站上的Flash游戏。通过使用简单的API，使得编程更容易。

当然使用sikuli也提供了自己的IDE开发工具，虽然还有些问题，但是应付目前的测试还是没问题的。而且开发的代码更加简单明了。

Sikuli的安装步骤

1、目前支持的操作系统：

Windows XP Windows 8 、 10 (32-Bit or 64-Bit)
Mac OSX 10.6 ~ 10.10 、10.11 (64-Bit only)
Linux/Unix systems depending on the availability of the prerequisites (32-Bit or 64-Bit)

目前还不支持移动操作系统比如android、ios等移动设备，这也是为什么要借助stf的原因

2、需要真正的屏幕支持：

统运行Sikuli脚本或其他第三方应用程序使用SikuliX必须有一个真正的屏幕连接。使用SikuliX时,屏幕不能在睡眠模式或者屏幕状态。因为SikuliX在工作时需要在用户看到的屏幕状态下进行图像识别。所以在linux安装时，被安装的系统必须支持图形界面。

3、安装java环境

你必须有一个有效的Java环境，支持版本6,7或8(最好是7)。官方强烈建议,可用的最新版本。
4、下载安装SikuliX

下载地址：http://www.sikulix.com/quickstart.html#qs4

选择需要的版本：

 根据需要选择要下载的版本，由于我使用的python所以下载python的版本，下载后点击runSetup.cmd就会初始化安装SikuliX

然后执行runIDE.cmd即可启动SikuliX