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)弱网络体验