H5页面测试要点

时间:2021-05-24 10:20:14

H5是HTML5的简称,以下的内容是介绍H5页面的知识:HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。H5表现在很多地方上,我们平时看到最多的就是手机微信上时不时弹出的腾讯新闻,这些新闻点击进入观看就是H5页面的一个范畴。


好了,哪下面就主要说说如何去做H5页面的测试呢?


1、业务逻辑相关的测试:

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

1)登陆测试: 

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

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

(2)若客户端未登录,进入H5,点击对应按钮OR链接,如果需要登录,须拉起native登录。若取消登录,是否可再次拉起登录,或者停留在的页面是否有对应的登录提示。 (注:本次测试过程中就发现,第一次点击链接,可以拉起登录,第二次却不能) 


2)翻页测试:

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

(1)数据分页加载时,注意后续页面请求数据的正确。 

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


3)刷新与返回的测试:

(1)下拉刷新是否仍然处于当前页面 

(2)用户主动点击刷新按钮是否仍然处于当前页面 

(3)点击返回与back键,回退页面是否是期望页面 

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

4) mtop接口返回处理:

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

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

(2)请求成功,但data内容为空。 

(3)请求接口异常,出现ERR_SID_INVALID::SESSION过期,拉起登录。 

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


2、与H5适配相关的测试: 

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

1)分辨率高(如720*1280,重点关注页面背景是否完全撑开页面,刷新是否有抖动)、分辨率低(如320*480,重点关注下弹框样式和文案折行) 

2)android4.2版本以上的设备随便测试一两台即可

3)苹果近几年常用的系统版本手机


3、安全相关的测试:

1)明确投放渠道都有哪些 :

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

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

3)是否需要接入支付宝实名认证:

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

4)是否接入windvane,所有请求通过native发出


4、操作页面体验相关的测试:

1)资源相关:

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

(2)资源是否压缩、是否通过CDN加载 

(3)如何保证二次发布后有效更新

  

2)流量消耗: 

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

(2)数据较多时是否做了分页加载。 


3)页面展现时间:

(1)关注页面首屏加载时间。 



4)页面提示: 

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

(2)接口获取异常时,提示是否友好。 

(3)刷新页面或者加载新内容时页面是否有抖动。 



5)手机操作相关:

(1)锁屏之后展示页面。 

(2)回退到后台之后,重新呼出在前台展示。 

(3)弱网络体验