腾讯WeTest的小程序兼容测试实践之路

WeTest质量开放平台团队 • 2023-01-03 • 云技术社区 • 265 阅读

作者 朱永俊，腾讯IEG高级工程师

商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。

作者导读

为了提升对微信小程序的测试能力，腾讯WeTest质量开放平台推出了小程序整体质量解决方案，包括服务器压测、安全渗透和扫描、兼容适配、客户端性能等。本文介绍WeTest的小程序兼容测试方案，以及其中重要指标项的技术实践。

腾讯WeTest小程序兼容测试，依托平台丰富的真机机型，根据小程序/小游戏特点，覆盖异常打断、群分享等典型场景，记录性能指标，以及JS Error、首屏加载等特定数据，还原真实用户使用时发生的兼容/性能问题。

本文从以下几部分介绍腾讯WeTest的小程序兼容测试方案。

（1）小程序兼容测试整体流程

（2）统计指标项及方案选取

（3）小程序JS-SDK设计原理

（4）首屏加载时间计算原理

一、小程序兼容测试整体流程

整体流程如下：

1. 客户提交测试任务

在腾讯WeTest小程序兼容测试平台上，上传接入JS-SDK的小程序/小游戏二维码，并提交兼容测试任务。

2. 驱动小程序/小游戏在多台真机上运行。

腾讯WeTest平台支持2种方式，来驱动小程序/小游戏在真机上运行：

（1）超级同步助手（以下简称超同）。基本原理是将测试同学对1只手机的操作，同步到若干台真机设备上。

（2）自动化探索。目前正在筹备中，近期上线。

本文以超同为例，介绍小程序/小游戏运行的兼容测试流程。

【超同工具前台】

（1）接取测试任务

（2）选取设备

（3）批量操控手机运行小程序/小游戏

4. 数据收集与报告展现。

在超同驱动小程序/小游戏运行的同时，以下信息将被统计：

（1）测试人员会观察记录UI适配、ANR问题等；

（2）性能采集模块进行性能指标的采集；

（3）小程序/小游戏中的JS-SDK也将采集到的页面事件、FPS、JS-Error等信息同步到数据存储后台；

（4）超同也会将测试过程中的截图、日志信息同步到数据存储后台。

最后由腾讯WeTest平台展示报告。整体流程如下图所示。

最终的web报告页中，将测试过程中收集到的测试信息，在web前端进行展示，举例如下：

（1）适配、ANR问题

（2）性能报告

（3）报告详情页

二、统计指标项及方案选取

在适配兼容测试中，除了由测试同学发现的UI适配、ANR问题外，腾讯WeTest小程序的兼容测试方案，还同时获得了如下统计项。

（1）常见性能指标、截图和adb日志

采集小程序/小游戏所对应的子进程的cpu、mem、net性能指标项，以及测试过程中的截图和adb日志。基本原理是利用adb命令进行统计，本文不再讨论。

（2）小游戏FPS指标

小游戏的FPS采集，从游戏引擎层采集更为准确，采用在工程中嵌入JS-SDK的方式来统计小游戏的FPS数据。设计原理详见第三部分。

（3）小程序页面事件

处理常规性能指标，小程序还需要加载时间、页面间的切换耗时等，可以通过统计小程序生命周期内的关键事件来计算。设计原理详见第四部分。

（4）JS-Error统计

可以利用wx.onError接口，将小程序/小游戏运行时的错误信息，包含堆栈，进行统计。原理见第五部分。

（5）首屏时间

把从小程序/小游戏启动算起，直到用户看到小程序/小游戏的界面的这段时间，叫首屏时间。首屏时间的长短，直接影响用户的体验。在第六部分，介绍首屏时间的计算方案，以及区分首次加载和非首次加载的策略。

三、小游戏JS-SDK设计与流程

原理：与H5游戏的帧率的采集方案一致，通过JS层，来获得游戏引擎层的帧率，更为精确。当垂直同步信号过来之后，如果发生过绘帧，就记为1帧。在surfaceflinger层、opengl层来统计帧率获得的帧率，可能是不准确的。

通过hook当游戏引擎update入口和context的关键绘制方法，可以精确判断是否发生过绘帧。从而计算出FPS。在开发者工具的console命令行中将FPS输出，看到FPS获取的效果：

1. JS-SDK整体流程

（1）JS-SDK启动时，首先检查剪贴板内容格式，获得测试信息，用于请求腾讯WeTest API传输数据。

（2）在JS-SDK启动时，对context绘制方法进行hook。并计算帧率，同时保存首帧时间。

（3）不断每隔10s尝试对三种引擎的update进行hook。一旦完成hook，便恢复context绘制方法，按照新方法继续计算帧率。

（4）请求腾讯WeTest的API接口，把FPS数据进行传输。

整体流程如下。

四、小程序JS-SDK设计与流程

原理：在小程序工程中，定义App对象之前，完成对App、Page类的hook。hook后的效果，App、Page的对象的onXXX事件回调中，都增加了JS的代码。增加的JS代码做两件事情：

（1）统计page的path、titile、回调类型和时间；

（2）将统计的信息通过API接口传输到Web端。

有了小程序的各类页面事件信息之后，便可很容易的统计出，在测试期间，小程序的各个页面间的切换时间等信息。第六部分的首屏时间的计算，也依赖JS-SDK统计出的页面事件信息。

1. 小程序页面事件获取

通过hook方法，将App、Page的各回调中增加代码，来记录事件。

示例hook App对象的onLaunch方法：

App 和Page对象的方法与上面类似。

因为event事件里，统计了page的title信息，为了获得准确的title信息，还对wx. SetNavigationBarTitle方法进行了hook。其hook的原理是通过object.defineProperty来完成hook的。

在开发者工具的console命令行中输出获取到的事件，可以看到事件获取的效果：

2. JS-SDK整体流程

（1）JS-SDK启动时，首先检查剪贴板内容格式，获得测试信息，用于请求腾讯WeTest API传输数据。

（2）hook App和Page对象的事件回调方法，并特殊标记第一个Page的Onready事件。

（3）判断是否是首次加载。

（4）请求腾讯WeTest的 API接口定时发送事件信息。

整理流程如下：

五、JS-Error信息的采集

利用wx. onError回调，很容易完成对小程序/小游戏内JS运行脚本错误进行统计。需要注意的是，小程序和小游戏的错误堆栈信息的获取方式略有不同。

小程序：

游戏：

六、首屏时间计算原理

首屏时间：从小程序/小游戏启动算起，直到用户看到小程序/小游戏的界面的这段时间。

计算首屏时间，需要知道“开始时间”和“到达时间”便可计算出来。

1. 开始时间

通过adb命令，监控小程序/小游戏进程出现在前台的时间来近似获得。

2. 到达时间

（1）小程序。通过JS-SDK获得，使用第一个Page页面的OnReady事件的时间。

（2）小游戏。通过JS-SDK获得，使用游戏引擎绘制第一帧的时间。

【效果对比】

在手机上体验小程序/小游戏在IDE中的开发版时（注：此类型版本，有时效限制，不能用来做适配兼容测试），可以打开性能面板，其中有启动耗时的数据。

在ubuntu环境+ vivo x9plus手机，进程检测的周期设定为300ms（理论误差在300ms以内），分别对小游戏、小程序的非首次加载（有缓存），用计算出的首屏时间与性能面板中的“启动耗时”做对比，误差在190ms以内，符合预期，同时也是一个比较能接受的范围。

小程序：

轮次	进程拉起时间（首屏开始时间）	OnReady事件时间（到达首屏时间）	测试首屏时间（ms）	小程序自带性能面板<启动耗时>（ms）	误差（ms）	误差百分比
1	1561709017395	1561709022811	5416	5369	47	0.88%
2	1561709269802	1561709271822	2019	2020	-1	0%
3	1561709483194	1561709487344	4150	3973	177	4.5%
4	1561709636137	1561709639813	3676	3857	-181	4.7%
5	1561709771658	1561709775541	3883	3995	-112	2.8%

对比结论：计算得到的首屏时间，在微信小程序自带性能面板的时间上下波动，误差在185ms以内。

小游戏：

轮次	进程拉起时间（首屏开始时间）	引擎第一帧时间（到达首屏时间）	测试首屏时间（ms）	小程序自带性能面板-启动耗时（ms）	误差（ms）	误差百分比
1	1561710214782	1561710218869	4087	3992	95	2.3%
2	1561710357088	1561710361462	4374	4382	-8	0.18%
3	1561710503168	1561710507500	4332	4197	135	3.2%
4	1561710601829	1561710605931	4102	4246	-144	3.4%
5	1561710699758	1561710703939	4181	4066	115	2.8%