[转]h5页面测试总结

转自http://www.blogjava.net/qileilove/archive/2014/07/24/416154.html?utm_source=tuicool

H5页面测试总结

其实经过几次H5页面测试之后,发现存在很多共同的问题,所以在此对H5页面的测试点(以及容易出问题的点),做一个总结,给开发同学自测,以及准备入手H5测试的同学一个参考。

  1、业务逻辑相关

  除基本的功能测试之外,H5页面的测试,需要关注以下几点:

  1.1 登陆

  目前H5与native各个客户端都做了互通,所以大家在测试的时候要注意两点:

  A、若客户端已登录,那么进入H5后仍然是登录状态。

  B、若客户端未登录,进入H5,点击对应按钮OR链接,如果需要登录,须拉起native登录。若取消登录,是否可再次拉起登录,或者停留在的页面是否有对应的登录提示。

  ps:本次测试过程中就发现,第一次点击链接,可以拉起登录,第二次却不能。

  1.2 翻页

  遇到翻页加载的页面,需要注意内容为1页或者多页的情况。

  A、数据分页加载时,注意后续页面请求数据的正确。

  ps:这个需要注意在快速操作场景中,请求页数是不是依次递增,快速操作(如第一页尚未loading出来的时候仍然继续上拉操作)时是否发出去对应的请求了。

  1.3 刷新与返回

  A、下拉刷新是否仍然处于当前页面。

  B、用户主动点击刷新按钮是否仍然处于当前页面。

  C、点击返回与back键,回退页面是否是期望页面

  ps:本次测试过程中就发现,mtop接口请求成功,但是data内无数据时,返回到的就是个空白页面,无法正常发送请求。

  1.4 mtop接口返回处理

发现这个出现问题的地方有很多,但是只要有意识的去处理,就很容易避免,主要是以下几种情况:

  A、请求成功,且返回有数据,测试mtop接口返回数据的各种场景。

  B、请求成功,但data内容为空。

  C、请求接口异常,出现ERR_SID_INVALID::SESSION过期,拉起登录。

  D、请求接口发生除C中提到的异常之外的异常,通常可归结为一类进行处理。

  2、H5适配相关

  H5的适配其实比客户端的相对来说,要少一些,手机品牌之间的差异不大,所以不用太多关注,最容易出现问题的是android2.3系统,这个要特别关注下:

  A、大屏(如720*1280,重点关注页面背景是否完全撑开页面,刷新是否有抖动)、小屏手机(如320*480,重点关注下弹框样式和文案折行)

  B、android2.3、android4.X随机找一个即可。

  C、ios5、ios6、ios7。

  3、安全相关

  3.1 明确投放渠道都有哪些

  如独客、主客、wap,是否对未投放渠道做了限制,直接通过url请求是否拦截等

  3.2 评估是否需要接入集团安全,如mtee黑白名单等。

  3.3 是否需要接入支付宝实名认证

  涉及到金钱相关,如天猫积分,红包等,为了防刷,一般都需要判断是否支付宝实名认证。

  3.4 是否接入windvane,所有请求通过native发出。

 4、体验相关

  4.1 资源相关

  A、页面中有图片的话,淘宝那边建议图片一般不大于50kb,本着一个原则,尽量缩小图片。

  B、资源是否压缩、是否通过CDN加载。

  C、如何保证二次发布后有效更新。

  4.2 流量

  A、对于一些不会变化的图片,如游戏动画效果相关图片,不需要每次都请求的东西,做本地缓存。

  B、数据较多时是否做了分页加载。

  4.3 页面展现时间

  A、关注页面首屏加载时间。

  4.4 页面提示

  A、弱网络下,数据加载较慢,是否有对应的loading提示。

  B、接口获取异常时,提示是否友好。

  C、刷新页面或者加载新内容时页面是否有抖动。

  4.5 手机操作相关

  A、锁屏之后展示页面。

  B、回退到后台之后,重新呼出在前台展示。

  4.6 弱网络体验

  5、埋点数据检查

  与BI、前端同学一起确认埋点情况。

时间: 2024-12-22 10:03:28

[转]h5页面测试总结的相关文章

H5页面测试总结

1:业务逻辑相关 除了基本的功能测试还需要关注: 1.1登陆 目前H5与native各个客户端都做了互通,所以大家在测试的时候要注意两点: A.若客户端已登录,那么进入H5后仍然是登录状态. B.若客户端未登录,进入H5,点击对应按钮OR链接,如果需要登录,须拉起native登录.若取消登录,是否可再次拉起登录,或者停留在的页面是否有对应的登录提示. ps:本次测试过程中就发现,第一次点击链接,可以拉起登录,第二次却不能 1.2翻页 a:数据分页加载时,注意后续数据的正确性 ps:这个需要注意在

ios嵌套H5页面,出现的小bug;

ios嵌套H5页面,点击数字时就会弹出打电话的功能:解决方法: 在head标签中添加: <meta name="format-detection" content="telephone=no"> ios嵌套H5页面,只要碰到页面,就会使input获取焦点,调取ios键盘,解决方法:在页面上添加js如下: $("body")[0].addEventListener("touchstart",function(){ d

如何判断一个APP页面是原生的还是H5页面

来源:http://www.25xt.com/appdesign/11851.html Hybrid APP指的是半原生半Web的混合类App.需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web . 原生是Native APP,H5就是Web App 在Hybrid 当中,如何快速的判断一个APP页面是原生的还是H5页面呢? 1.看断网的情况 把手机的网络断掉.然后点开页面.然后可以正常显示的东西就是原生写的. 显示404或则错误页面的是htm

微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法

Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机输入法键盘遮盖住. 找到一段js代码直接解决之,点击时强制滚动之,好像也解决了在Android浏览器下浏览的同样问题. 1 if(/Android [4-6]/.test(navigator.appVersion)) { 2 window.addEventListener("resize", function() { 3 if(document.activ

利用浏览器调试APP中的H5页面

安卓手机的情况下,可以用chrome浏览器来调试. 打开地址: chrome://inspect/#devices 手机用USB数据线连接电脑,并启动USB调试模式. 只要在APP中打开H5页面,界面就会显示该页面地址 点击inspect进入调试模式 之后就可以像调试浏览器页面一样调试了. 这个方法也可以用来查看APP中哪些页面调用的是H5的页面. 苹果手机可以用Safari自带的调试工具调试,在Safari浏览器工具栏-开发一栏下.

移动端h5页面常见问题总结

从去年开始在公司一直做嵌入式的h5页面,遇见了很多问题,做一个小小的总结~ 1.IOS设备链接.按钮等点击产生灰色背景 在傲娇的iOS中可点击元素被点击时候会出现覆盖显示的高亮颜色,也就是一个灰色的阴影,特别难看,尤其是在元素占地面积还比较大的时候.这个可以通过 -webkit-tab-highlight-color 这个css属性来设置,你可以改成任何你想要的颜色,也可以去掉. -webkit-tab-highlight-color:rgba(0,0,0,0);//去掉背景高亮 -webkit

易企秀 we+ Maka 兔展 四大H5页面制作工具

H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合通过手机的展示.分享.也因其灵活性高.开发成本低.制作周期短的特性使其成为当下企业营销的不二利器,常见于企业宣传.活动推广.产品介绍.会议邀请.公司招聘等. 面对四大在线H5互动展示制作工具,企业营销应该如何选择更适合的H5制作工具呢?今天小编就给大家带来四大在线HTML5互动展示工具的评测. MA

H5页面内容较少时如何让页面全屏在手机显示呢

解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh和vw来布局.100vh和100vw就是你设备的高度和宽度.先把外面盒子固定下来,所有的盒子的高度加起来等于100vh刚好占满一屏这样就不会有空白.像你这种盒子比较少的可以用js获取设备的高度和宽度,然后用js设置盒子的高度,加起来等于你设备的高度就可以了.字体大小用rem表示.相对于根字体的大小.

h5页面添加背景音乐

[需求]h5页面添加背景音乐,支持微信.QQ.各种APP. [实现思路]1.通过audio标签,设置自动播放,是一种方法,但是此方法只适合微信.QQ,并不兼容我司的APP,需要主动触发下播放事件. 2.针对可以自动播放的渠道,通过this.audio.addEventListene监听playing事件,控制小喇叭的状态. [知识点]audio标签.addEventListener.classList [代码]封装了一个公共组件: 1 <template> 2 <div class=&q