H5页面的基本测试点

优势:

  1. H5可以跨平台使用,开发成本相对较低
  2. H5可随时上线就更新版本,适合快速迭代
  3. H5可以轻量的触达用户,提供更便捷的服务

在微信入口或者浏览器上,用户只需点开链接就可以获取我们锁提供的服务

劣势:

  1. H5->app的转化强依赖于浏览器
  2. H5目前基本无法将数据存储在本地,依赖实时性数据,网络状态不好的时候卡到哭。
  3. 性能相对较低,影响用户体验

如何判断是否是H5页面:

  1. 基本上只要对那个view长按,然后看是不是有反应,比如手机震动(Android)、或者出现文字选择粘贴(Android/iOS),那么就是WebView!

如何测试H5:

  1. 基本功能测试:(浏览器、微信内置浏览器)
  2. 登陆

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

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

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

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

    1.2 翻页

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

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

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

    3. 刷新与返回

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

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

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

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

    4、H5适配相关

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

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

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

    C、ios5、ios6、ios7。

    5、体验相关

    5.1 资源相关

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

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

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

    5.2 流量

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

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

    5.3 页面展现时间

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

    5.4 页面提示

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

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

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

    5.5 手机操作相关

    A、锁屏之后展示页面。

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

时间: 2024-08-29 07:40:47

H5页面的基本测试点的相关文章

H5页面测试点总结

如何判断是否是H5页面: 基本上只要对那个view长按,然后看是不是有反应,比如手机震动(Android).或者出现文字选择粘贴(Android/iOS),那么就是WebView! 横屏竖屏相互切换,能自适应,并且布局不会乱掉: H5的页面在PC端也是能访问的,chrome对H5支持最好,功能的测试可以在PC端chrome下先测试,也可以在手机上直接测试,这个看个人习惯.(ie系列包括ie8,及以下都支持的不好,这个可以与PD确认H5页面在这些PC浏览器上不支持) 1.UI测试 ①查看所有页面展

[转]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各个客户端都做了互通,所以大

H5页面测试app测试

H5页面介绍 1. H5页面H5即 HTML5,是最新的 Web 端开发语言版本,大多数手机 APP 页面会用 H5 实现,包括 PC Web 站点也会用它开发实现.所以 Web 的通用测试点和方法基本都可以适用于它.H5其实就是:移动端Web页面.H5应用在很多地方,如APP的活动专题页面.新闻页面.微信公众号文章页面等都属于H5页面,在PC或者手机浏览器都可以直接访问H5页面.H5作为移动端的web页面,有它自身的优势,如它可以跨平台使用,开发成本相对较低:可随时上线就更新版本,适合快速迭代

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