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、前端同学一起确认埋点情况。

最新内容请见作者的GitHub页:http://qaseven.github.io/

时间: 2024-12-05 19:03:29

H5页面测试总结的相关文章

腾讯移动端H5页面设计实战分享

  <腾讯网UED体验设计之旅>一书集合了腾讯网UED团队在用户体验领域的十年探索经验,展示了大量精彩案例的设计技巧和过程.下面为该书的节选内容. 为什么要设计H5页面 移动设备的普及给媒体和娱乐带来了一场革命.根据中国互联网信息中心(CNNIC)2014年7月的报告显示,中国网民中,手机使用率达83.4%,已经超过传统PC整体80.9%的使用率.其中,手机网络新闻的使用率为74.2%,仅次于即时通信和搜索,远超其他手机网络应用.在资讯移动化的趋势下,观察近期各大门户在重大事件报道中的表现,会

那些过目不忘的H5页面

  从引爆朋友圈的H5小游戏<围住神经猫>,到颠覆传统广告的大众点评H5专题页<我们之间只有一个字>,从2014下半年起,各种H5游戏和专题页纷纷崭露头角. "H5",这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野.本文聚焦于基于微信传播的H5页面的视觉设计,通过一些案例分析来谈谈设计思路与方法,希望与大家进行交流探讨. 功能与目标 首先从功能与设计目标来看, H5专题页主要有以下4大类型: 1.活动运营型 为活动推广运营而打造的

html5-微信h5页面如何制作,我不知道怎么写页面

问题描述 微信h5页面如何制作,我不知道怎么写页面 我懂得html5语言,但是不知道h5是不是和html5一样, 有谁做过吗?要是有个demo就更好了 解决方案 现在移动互联网如火如荼,微博过后,微信更是势不可挡.相对于微博的垃圾广告信息泛滥,微信对内容的控制不可谓不严格.当然相对于微博,微信的用户粘性更高,也就是说微信的粉丝价值更高,但是鉴于腾讯对公众号推广的限制,很多人对于微信推广真是绞尽脑汁,最终还是没什么效果,好的内容是过得优质粉丝的关键,但是靠谱的推广更是必不可少的. 现代人的时间都是

app-iOS开发中如何将用户名和密码传入APP嵌入的H5页面中

问题描述 iOS开发中如何将用户名和密码传入APP嵌入的H5页面中 现在有个问题就是:iOS开发的APP中使用Webview嵌入了H5页面, 如何将APP中的用户名和密码传入H5页面中,从而实现H5页面不需要再次重新输入用户名和密码,实现H5页面中的用户名和密码与APP中的用户名和密码一致,从而实现一系列操作. 目前小白,对于H5页一点不懂,最好能说的详细点. 解决方案 建议 不要使用 用户名密码,如果是需要鉴权,可以使用传ticket 在java中写个方法,给H5页面 上的js那边调用,方法里

关于千牛移动端纯H5插件和QAP应用中H5页面的概念

一.背景 千牛移动客户端最早支持一套跑在上面的H5插件开放体系,从用户体验的角度来讲,由于本质是使用WebView加载H5页面进行呈现和交互,体验方面存在不足. 所以千牛新增了一套QAP开放体系,让ISV开发的插件可以有Native的体验,我们将基于QAP的程序称之为"QAP应用". 考虑到之前的H5插件体系,所以我们允许在一个QAP应用中包含Native页面(qap://)和H5页面(https://).也就是说,原先的一个H5插件应用是可以直接通过QAP-CLI一键迁移成一个QAP

【原】让H5页面适配移动设备全家 - 设计师篇 - PPT

在此之前也在部门前端组内做了分享,后来师傅跟我聊了下,其实现在前端和设计的合作上经常遇到页面适配问题,在沟通上影响工作效率,在页面设计上影响用户体验. 所以决定准备给设计师们带来H5适配的分享,内容大概是了解H5页面适配等问题,以便更好得配合前端完成页面,提升页面体验. 于是,在工作的业余时间,我把想到的点记录下在本子,经过几天整理,也有了点内容.考虑到是给设计的同学做分享,ppt几乎只有图片,所以看起来会比较清晰易懂~ 说明:PPT主要数据取自友盟指数2015年5月份数据,国内活跃设备达10.

【原】让H5页面适配移动设备全家 - 前端篇 - PPT

7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同时也提升页面体验,分享后跟设计师们沟通,反应情况良好,说明这套适配的方案是有一定价值的.在9月份很荣幸收到TID同事的邀请,参与[TID重构主题交流会]第六期:体验的前端分享,于是在设计师篇的基础上重新整理了前端篇,通过分析当前市场的数据,结合实际的项目需求,总结出适配各种移动设备分辨率的思路和解决方法,相信

web前端-h5页面,用js给每个按钮加动态效果,会不会卡?

问题描述 h5页面,用js给每个按钮加动态效果,会不会卡? 功能需求:给每个按钮加上点击时有个声音效果 技术实现:为每个标签加上事件,每触摸一次就播放一次mp3 mp3由h5的音频标签完成 这样子会不会卡?一般是如何实现的? 解决方案 不会,现在的浏览器都用gpu去渲染网页的.玩大型3d游戏都不卡的计算机会处理不了这么一点特效么 解决方案二: 最好不要搞太多效果,有些特效好多的网站,cpu都被吃掉7,80%,手机肯定要废掉.. 解决方案三: 不会,这如果都不行的话,h5不会这么火 解决方案四:

浏览器-Objective-C编写app中嵌入h5页面 geolocation定位问题

问题描述 Objective-C编写app中嵌入h5页面 geolocation定位问题 我制作了一个用到geolocation定位的h5页面,让别人嵌到他开发的app中,用Safari浏览器时可以实现定位的,但是在app却做不到定位.貌似在app中嵌入网页是调用webkit,目前找不到问题所在,而且对objectc没有很多的了解. 开发的那个人让我找原因,网上搜了一圈没找到什么可用的,想问一下: 1.问题应该是出在哪里? 2.我这个H5页面需要改吗?还是要app那边做调整?