H5页面测试总结

1,904 阅读4分钟
  • 识别H5

1.基本上只要对那个View长按,然后看是不是有反应,比如:手机振动或者出现文字选择粘贴,那就是H5页面

2.横屏竖屏相互切换,能自适应,并且布局不会乱掉

3.H5页面在pc端也能访问,chrome对H5支持最好,功能的测试可以在PC端chrome下先测试,也可以直接在手机上测试

4.H5是基于web

  • H5页面测试

1.环境配置
     一般的测试流程是H5页面开发完成后,先在测试环境进行测试,测试通过再部署到线上环境,所以测试阶段要先进行测试环境配置。
2.测试关注点 
  2.1业务逻辑测试
      业务逻辑相关的测试,视具体业务的需求而定
  2.2页面元素UI测试
      页面UI主要包括文字、图片以及页面布局等方面测试
      文字:风格一致、错别字、标点符号统一、换行是否显示正常、一行长文字是省略显示、全显示、图片与文字是否一致、刷新页面文字是否展示
      图片:静态<大小、风格>;动态<大小、风格、标准性动态图、转场动画、loading动画、点击动画等>;刷新页面图片是否正常展示;图片适配<根据不同屏幕和分辨率进行适配>
      页面布局:页面文字图片是否能自适应屏幕、整体布局是否合理等
      内嵌链接:空链接、刷新链接数据是否展示;链接跳转是否正确
  2.3页面操作
     2.3.1刷新与返回
         页面刷新是否仍然处于当期页面
         用户主动点击刷新按钮是否仍然处于当前页面
         点击返回与back键,回退页面是否是期望页面(安卓物理按键返回;ios左滑返回,考虑左滑一半松手,自动回到H5页面是否正常加载的情况)
     2.3.2翻页
          遇到翻页加载的页面,需要注意内容为一页或者多页的情况
          数据分页加载时,注意后续页面请求数据的正确
          ps:注意在快速操作场景中,请求页数是不是依次递增,快速操作(如第一页尚未loading出来的时候仍然继续上拉操作)时是否发出去对应的请求了
     2.3.3弹窗出现/关闭
          手机测试主要特别关注交互是否友好,可能会导致一些体验的问题,比如:弹出层的点击,是否会穿透,影响到弹出层下面的页面
     2.3.4浮层页面
          对于一些浮层做的页面,例如地图、产品分类等浮层,注意拖动是否可以看到它下面的页面,拖动后边缘是否有留白  
     2.3.5页面提示
          弱网络下,数据加载较慢,是否有对应的loading提示
          接口获取异常时,提示是否合理
          刷线页面或者加载新内容时页面是否有抖动
     2.3.6手操作相关
          锁屏之后展示页面
          退到后台,再重新呼出在前台展示
  2.4接口测试
     2.4.1接口返回处理:
          请求成功,且返回有数据,测试接口返回数据的各种场景--接口返回的数据期望的是否一致;接口入参的边界值校验;检查接口的容错性,如对于传输数据类型错误能否处理等,整型的输入小数、中英文等
          请求成功,但data内容为空
          请求接口异常时,页面处理
     2.4.2接口性能测试
           页面加载时间:关注页面首屏加载时间;调用接口数据返回的时间,速度多慢会影响用户体验;资源相关;页面中有图片的话,尽量缩小图片;资源是否压缩、是否通过CDN加载
           服务端并发性能:用户量过多时,服务器性能是否受到影响
           内存:反复访问,检查是否占用大量内存
           流量消耗:对于一些不会变化的图片,如游戏动画效果相关图片,不需要每次都请求的东西,做本地缓存;数据较多时是否做了分页加载
  2.5网络测试
      网络环境:WIFI、4G、3G、2G
      网络异常:弱网、断网
      网络切换
  2.6适配测试
      H5页面需要适配的内容主要有:图片高清适配;字体大小适配;页面布局宽度适配;横竖屏适配
      考虑适配因素:对不同屏幕尺寸和分辨率的机型进行适配;不同平台ios和安卓进行适配;屏幕横竖屏适配;日夜间模式适配;深色浅色模式适配 
  2.7安全测试
      明确投放渠道都有哪些,是否对未投放渠道做了限制,直接通过url请求是否拦截等
      接口部分敏感信息是否加密传输等
      直接url是否能打开
      防止恶意攻击
  2.8埋点测试
      埋点数据检查
  2.9上线后验证测试