让加载条消失！使用STF测试页面打开速度的方法
导读
本文内容主要涉及一种基于图像识别的测试手机网页首屏时间的方法，它可以应用在手机浏览器页面加载响应时间的的自动化测试或性能检测中。同时可以应用到其他Android的apk的响应时间的测试中。
（全文共3890字 预计阅读时长：4分钟）
一、首屏加载时间对用户体验至关重要
本文内容主要涉及一种基于图像识别的测试手机网页首屏时间的方法，它可以应用在手机浏览器页面加载响应时间的的自动化测试或性能检测中。同时可以应用到其他Android的apk的响应时间的测试中。
随着智能手机等移动终端的发展，越来越多的用户开始通过手机等设备浏览网页，以获取所需的信息。
大部分用户使用手机访问网站都是基于手机浏览器所获取的网页实现的。通常情况下，用户访问网站的页面全部加载完毕时，总页面高度可能有一屏到多屏不等，总的页面加载时间要比首屏加载时间更长，但是首屏加载时间的快慢是影响用户体验的一个重要因素是用户对一个浏览器加载性能的重要体验因素。
首屏加载时间是指手机等设备的浏览器全屏区域充满网站页面所需的时间。当网站页面充满首屏区域后，用户就可以看到网页内容并进行相应的点击、屏幕滚动等操作，而不必等到网站的所有网页都加载完成。因而，从用户发起访问开始，到首屏内容加载完成这段时间，对用户的使用体验至关重要。
而对于手机浏览器网页首屏加载时间的测量也是至关重要的。在现有技术中，通常采用高速摄像机对整个加载操作过程进行拍照，并记录每张照片的拍摄时间，然后人工的在拍摄的照片中对比查找预先拍摄好的起始和结束图片，最后将这两张照片的拍摄时间相减，以获得网页的首屏加载时间。
但是高速摄像机易受外界因素（如距离、光度等）的影响，使得拍摄得到的照片具有一定的时间间隔，进而导致测试的结果不准确，并且，采用人工对比查找预先拍摄好的起始和结束图片，导致测试过程耗费的时间比较长，测试步骤繁琐。
鉴于上述问题，本案例提供一种低消耗，高效率，精确度的用于测试手机网页首屏时间的性能指标的方法。
二、 基于图像识别测试手机网页首屏打开时间
这种基于图像识别的测量手机网页首屏时间的方法，如图1所示。
图1 基于图像识别的测量手机网页首屏时间的方法和步骤
通过Stf将手机与电脑进行连接，实现将手机上的图像实时（官方介绍30毫秒的延迟）的传输到电脑屏幕。由于手机的性能较电脑差，如果在手机上做图像识别实现起来还是比较困难的，但是如果在电脑上对图像进行识别，目前的技术还是比较简单，因此可以通过自动化测试的框架sikuli来实现；
使用电脑浏览器操作手机，对于不同的测试安装包，分别在网页首屏选择特定的图像作为标志点。使用sikuli编写图像识别程序，使用Python编写首屏加载过程中获取手机各项性能指标的程序。
同时调用上述两个程序，通过特定的图像识别方法对首屏加载的图像进行对比，如果选定的标志点没有匹配，则进行加载；如果选定的标志点匹配完成，则标志加载完成。记录首屏请求的时间数值，并停止图片识别程序和性能监控程序。
判断是否还有未测试的安装包，如果有，则跳转到步骤2，如果没有则继续。
从数据库中读取测试采集到的数据，使用这些数据生成最终的测试报告。
三、 关于stf的简介
在没有实现自动测试之前，人工测试的核心工作就是筛选图片，这是一个繁琐而且比较枯燥的工作，而且每个人筛选图片的标准会有一定的不同，导致测试结果也会有一定的误差。
我们也曾尝试过使用电脑图像识别的方式来筛选通过摄像头录制下来的图片，但是在这个过程中存在很多问题，如录制时的灯光明暗程度，摄像头和手机的距离等问题都会影响到录制图片的效果，从而导致图像识别的失败。后来使用Android的自动化截图，但是间隔时间太大也被放弃，直到发现了stf这个平台才解决了该问题。
Android原生的截图工具截图非常缓慢，而stf平台图像直接传输到电脑，而且非常快据说只有30毫秒的误差，这是因为stf自己写了一个minicap工具用来替代原生的screencap，这个工具是stf框架的依赖工具。
四、Minicap介绍
Minicap提供了一个能够将Android设备屏幕的数据实时输出到外部的一个sokcet接口，这就意味着它有很大的应用空间。例如，它被用来在STF进行远程控制。
Minicap不需要对Android设备进行root而是通过adb命令来执行的，可以支持目前大部分Android手机。捕捉屏幕目前有两种方法。对于较旧的Android版本，我们使用ScreenshotClient，一个私有的API接口在Android开放源代码项目（AOSP）。
对于较新版本，我们使用一个虚拟显示，这也需要访问私有APIs的，如图2所示。由于minicap依赖于私有的APIs，某些设备可能无法正常工作。截止目前，我们已经测试了大约160个设备（包括一些重复），迄今已发现了三种型号的段错误。Xiaomi ＂HM NOTE 1W＂(Redmi Note 1W), Huawei＂G750-U10＂(Honor 3X)Lenovo＂B6000-F＂(Yoga Tablet 8)
图2 openstf平台截图
五、关于流畅程度
Stf运行的流畅程度依赖于使用的设备。一些性能较差或者一些旧版的Android设备可以达到10-20帧。安装有最新Android系统的设备通常可达到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运行
● 7.1 启动rethinkDB
安装完成后，打开单独的控制台，运行命令等待服务启动完成，如图3所示。
图3 运行命令等待服务启动
● 7.2 启动stf服务端
打开一个单独的控制台，运行stf local命令等待服务启动完成，如图4所示。
图4 运行命令
这里为了让别人能够访问stf，添加了对外访问的IP地址。
●7.3 运行客户端
在浏览器中输入地址： http://public-ip（启动stf舌设置的public-ip地址）:7100/ 访问客户端。
输入用户名和邮箱登录即可开始使用。如图5所示。
图5 登陆界面
登录后的截图如图6所示。
图6 登陆后的截图
使用手机页面如图7所示。
图7 手机登陆页面
通过这个页面，我们可以看出stf的功能强大之处，它不仅能将手机上的图像实时同步到web端，而且还可以将web端的操作实时反馈给手机设备，所以选择了sikuli（稍后会详细介绍）工具完全实现了对手机端的自由操作。
八、Stf的其他特性
覆盖大部分Android系统，从Android2.3到5.1。
可以通过电脑的鼠标和键盘任意操作手机设备。
可以复制和粘贴电脑上的内容到手机设备。
在测试过程中遇到问题可以实时截图并保存到服务器中。
可以使用拖拽的方式实现apk的安装。
可以在任何安装过的浏览器中打开urls。
可以实时显示log，并且具备实时过滤功能。
可以远程执行各种shell命令。
通过Android studio、chrome debug tools实现远程debug功能。
甚至可以通过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开发工具，虽然还不够完善，但是应付目前的测试还是没有问题的，而且开发的代码更加简单明了，如图8所示。
图8 使用sikuli后开发的代码
十、 Sikuli的安装步骤
●10.1 支持的操作系统
Sikuli目前支持的操作系统包括：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的原因。
●10.2 需要真正的屏幕支持
运行Sikuli脚本或其他第三方应用程序使用SikuliX必须有一个真正的屏幕连接。使用SikuliX时，屏幕不能在睡眠模式或者屏幕状态。因为SikuliX在工作时需要在用户看到的屏幕状态下进行图像识别。所以在linux安装时，被安装的系统必须支持图形界面。
●10.3 安装java环境
必须有一个有效的Java环境，支持版本6，7或8(最好是7)。
●10.4 下载安装SikuliX
下载地址：http://www.sikulix.com/quickstart.html#qs4
选择需要的版本，如图9所示。
图9 选择版本
根据需要选择需要下载的版本，由于我使用的python所以下载python的版本，下载后点击runSetup.cmd初始化安装SikuliX，如图10所示。
图10 初始化安装SikuliX
执行runIDE.cmd即可启动SikuliX，如图11所示。
图11 启动SikuliX
★★征稿★★
寻找100个年度最具价值的实践案例
我们只要案例干货，拒绝广告
成为特约作者，你将：
◆ 连接100名年度经验与增长值TOP100的研发精英
◆ 提前入围「壹佰案例」年度最优案例榜单
◆ 案例整理成册，出版发行图书
◆ 成为msup客座教练
◆ 以观察员身份受邀出席TOP100全球软件案例研究峰会
◆ 所在公司享有msup活动优惠
有意者联系壹佰案例主编Cynthia