H5页面测试点总结

如何判断是否是H5页面:

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

1.UI测试

①查看所有页面展示问题

  -文字字体、大小、颜色是否一致,如图1.1

    图1.1

  -是否添加标点符号,如图1.2

  图1.2

  -图片展示是否展示正常,如图裂了、无法展示等

  -长文字展示是否换行展示,如图1.3

  图1.3

  -一些控件展示是否重叠展示,如图1.4,不允许有重叠的

    图1.4

  -一些控件输入是否进行内容限制(字符限制:特殊字符、0、特殊表情符号),如输入后直接变为正确的,如图1.5(应输入完毕后直接变成正确的,舍弃过滤之前的错误内容),或有提示框弹出,如图1.6,1.7

  图1.5

  图1.6

  图1.7

  -内外页展示内容一致,如图1.8,或者是展示数字内外不一致

  图1.8

②业务逻辑测试

2.1登录

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

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

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

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

C、清空cookies后,是否正常退出,返回登录页面

D、两个设备,一个忘记密码后,查看另一设备是否可操作

2.2刷新

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

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

  ******内容未被清空,再此基础上返回也不会出现,之前页面内容丢失的问题*****

C、进行相应逻辑操作后,页面应正常自动刷新,内容变为最新的(扔在本页的内容),且内容应该与外面内容一致

2.3返回

A、点击返回与back键,回退页面是否是期望页面 (通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况。)

B、进行其他操作后,页面会统一返回首页,或统一返回一个页面

C、返回之后,是否需要定位到之前的位置,还是返回到顶部

2.4翻页

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

A、数据分页加载时,注意后续页面请求数据的正确。(有没有重复加载的,或者到分界线时提示没有数据,但是后有数据的情况)

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

  重复加载内容

下方还有数据

2.5搜索

A,搜索后内容是否一致,内容的排序是怎么排序的

B,搜索后点击内容后,点击返回是否返回到之前页面

C,搜索后其他操作后,页面是返回哪个页面?(统一首页?之前页面【内容是否存在】?)

2.6排序

A、不同排序是否正常排序

B、插入后,内容是否正常排序

C、搜索后,内容是否按正常排序

2.7业务逻辑

A、业务逻辑数据流变化,从一个页面影响到另一个页面

B、业务的业务流变化,状态的变化,后台系统状态变化后,查看系统状态是否变化,同一个内容的多条信息是否一起变化

C、判断逻辑的先后顺序,例如提交先判断时间?还是内容是否为空?这个逻辑***

D、不填写内容后,按钮是可点击状态还是置灰状态?***

3.基本功能

3.1增删改查

①对不同内容增加,是否有成功添加提示框/是否成功添加到页面/数据是否变化/其他页面是否有刷新

  -增加不同内容

  -增加相同内容

  -删除后再添加相同内容

  -增加空内容

  -增加特殊字符内容

  -增加超限长度内容

  -增加特殊表情符号内容

  -增加负数内容

  -增加粘贴复制内容

  -增加内容后,根据调整框跳转内容

②删除,是否有删除提示框/是否成功删除提示框/删除后页面内容是否删除/数据是否变化/其他页面是否有删除

  -删除内容后

  -删除后添加再删除,是否可删除

③改,是否有成功修改提示框/是否成功修改到页面(是否重新加载)/数据是否变化/其他页面是否有修改

  -更改不同内容

  -更改相同内容

  -更改后再次更改

④查,查询后内容是否一致/查询后操作后,返回什么页面/查询后,点击返回,是什么页面

  -正常查询

  -操作后查询页面

  -查询后,返回

4.接口内容

4.1mtop接口返回处理

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

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

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

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

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

4.2数据的请求与返回

A、提交了数据,数据是否正确提交到后台。

B、发送了请求,是否正确返回要求的数据。

关注页面请求,是否会有多余的请求,或者请求后有多余的数据返回,尽量精简,否则会浪费流量。

5.适配性(兼容性问题)

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

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

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

C、ios5、ios6、ios7。

①图片适配测试,根据不同屏幕和分辨率做适配,以及适配后的清晰度,高端机取双倍尺寸的图

②对于类似公司名称、offer名称长度的问题,在手机上最好能根据屏幕大小自适应而不是截断,因为手机上是不会有tips可以看的。截断导致大屏幕下也只能显示几个字,交互不好

③手机测试要特别关注交互是否友好,与PC机的事件模型不一样,可能会导致一些体验的问题,比如:弹出层的点击,是否会穿透,影响到弹出层下面的页面。

④对于一些浮层做的页面,例如地图、产品分类等浮层,注意拖动后是否可以看到它下面的页面,拖动后边缘是否有留白

⑤*******手指滑动是否流畅,手指点击时焦点是否定位正确,不同机型会不一样。焦点地位后点击是否灵敏。****

注意:手机键盘切出后,焦点的定位是否正确、内容是否该改隐藏的隐藏、键盘是否切换到数字/字母

6.用户的体验

6.1资源相关

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

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

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

6.2 流量

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

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

6.3 页面展现时间

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

6.4 页面提示

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

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

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

6.5 手机操作相关

A、锁屏之后展示页面。

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

6.6 弱网络体验

7.安全相关

7.1 明确投放渠道都有哪些

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

7.2 评估是否需要接入集团安全

如mtee黑白名单等。

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

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

7.4 是否接入windvane

所有请求通过native发出。

7.5*****关于隐私内容******

是否加密显示?

原文地址:https://www.cnblogs.com/jieperhaps/p/9629537.html

时间: 2024-10-10 12:23:08

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

H5页面的基本测试点

优势: H5可以跨平台使用,开发成本相对较低 H5可随时上线就更新版本,适合快速迭代 H5可以轻量的触达用户,提供更便捷的服务 在微信入口或者浏览器上,用户只需点开链接就可以获取我们锁提供的服务 劣势: H5->app的转化强依赖于浏览器 H5目前基本无法将数据存储在本地,依赖实时性数据,网络状态不好的时候卡到哭. 性能相对较低,影响用户体验 如何判断是否是H5页面: 基本上只要对那个view长按,然后看是不是有反应,比如手机震动(Android).或者出现文字选择粘贴(Android/iOS)

[转]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