前言
随着Html5的流行,现在很多业务场景使用H5页面来承载,使活动类、运营类的业务功能更便捷在微信、Native端部署,所以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前端性能测试快速入门】
三、压力测试实例
详见网址:https://blog.csdn.net/gaofei880219/article/details/80815870(高飞家的猫)