美文网首页
H5专项测试

H5专项测试

作者: keitwo | 来源:发表于2019-02-21 19:01 被阅读11次

    前言

    随着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前端性能测试快速入门

    三、压力测试实例

    详见网址:https://blog.csdn.net/gaofei880219/article/details/80815870(高飞家的猫)

    相关文章

      网友评论

          本文标题:H5专项测试

          本文链接:https://www.haomeiwen.com/subject/zeveeqtx.html