H5页面测试要点

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页面的测试呢？

 

一、业务逻辑相关的测试：

除基本的功能测试以外，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中提到的异常以外的异常，一般可归结为一类进行处理。 

 

二、与H5适配相关的测试： 

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

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

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

3）苹果近几年经常使用的系统版本手机

 

三、安全相关的测试：

1）明确投放渠道都有哪些 ：

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

2）评估是否须要接入集团安全，如mtee黑白名单等

3）是否须要接入支付宝实名认证：

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

4）是否接入windvane，全部请求经过native发出

 

四、操做页面体验相关的测试：

1）资源相关：

（1）页面中有图片的话，淘宝那边建议图片通常不大于50kb，本着一个原则，尽可能缩小图片 

（2）资源是否压缩、是否经过CDN加载 

（3）如何保证二次发布后有效更新　

2）流量消耗： 

（1）对于一些不会变化的图片，如游戏动画效果相关图片，不须要每次都请求的东西，作本地缓存。 

（2）数据较多时是否作了分页加载。 

3）页面展示时间：

（1）关注页面首屏加载时间。 

4）页面提示： 

（1）弱网络下，数据加载较慢，是否有对应的loading提示。 

（2）接口获取异常时，提示是否友好。 

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

5）手机操做相关：

（1）锁屏以后展现页面。 

（2）回退到后台以后，从新呼出在前台展现。 

（3）弱网络体验