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

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