H5专项测试

前言

随着Html5的流行，现在很多业务场景使用H5页面来承载，使活动类、运营类的业务功能更便捷在微信、Native端部署，所以H5方面的测试也变得越来越重要。

H5业务测试流程图

一、H5测试基本点

1. 登陆

客户端已登录状态时，H5页面操作无需再次登陆；

客户端未登录状态时，H5页面操作需要登陆，注意二次登录的操作；

需要在获取微信openid的H5页面的提示；

微信登录态和Native登录态之间的转化；

2.翻页

首屏loading过程中的上拉获取数据；

更多页面加载的翻页数据无异常；

返回上一层页面的处理，检查重复操作等；

注意检查翻页后的数据是否有数据重复和缺失，以及排序方面的问题；

3.屏幕适配

需要了解用户使用的重点机型以及边缘机型；

重点机型真机测试，可以考虑在线测试平台测试兼容性；

请求接口获取用户设备的型号信息，根据不同设备下发不同的适配页面；

部分页面能够通过Chrome浏览器开发者选项模拟屏幕尺寸信息；

4.安全相关

H5页面的投放渠道限制；

支付类敏感操作的实名制验证等；

集团网络相关的安全限制等；

URL能否直接打开等。

5.资源加载

使用小图，适配屏幕尺寸下发图片；

使用CDN加速；

使用gzip压缩请求；

建立合理的缓存机制；

大量数据的分页显示；

页面懒加载；

6.页面提示

页面资源加载过程或者操作过程中的loading标示；

各种接口返回的状态信息提示；

刷新页面或者进行页面操作的体验：无闪、卡顿、屏抖动等情况；

7.非常规操作（异常操作）

涉及图片、音视频资源的系统静音等的冲突等；

音视频的切片处理、图片轮番处理；

锁屏操作；

切到前/后台返回的处理；

弱网测试；

8.数据埋点

用于BI的数据埋点

二、常用工具

工欲善其事，必先利其器，在做H5前端性能测试之前，选择合适的工具能让我们的测试工作事半功倍。

一类是抓包工具，如Fiddler、Charles等。这类工具不仅可以抓包，还可以对包进行修改，动态展示瀑布流，对web进行调试。在我们做H5前端性能测试的时候，个人觉得只要不修改包，不对H5调试，就可以放弃使用这类工具，不是工具不好，而是大材小用（杀鸡焉用牛刀？？是吧！）。

还有一类，这里重点提到的是如Page Speed、PCAP Web Performance Analyzer、WebPagetest这类平台型工具。我们可以快捷的测试出H5前端性能中数据，视图，并给出一定程度的优化建议。

工具对比列表

工具使用详情请参考【H5前端性能测试快速入门】