H5界面的测试

一.业务逻辑

1、业务逻辑相关

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

1.1 登录

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

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

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

C、H5页面嵌入到客户端内使用，若客户端内已经登录，进入H5页面，该页面是否展示正常

1.2 翻页

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

A.数据只有一页时，加载数据翻页页面请求数据是否正常

B.数据＞1页时，加载数据翻页页面请求数据是否正常

C.数据请求翻页loading时，向下刷新页面，页面数据请求是否正常

1.3 刷新与返回

A、下拉刷新是否仍然处于当前页面，数据是否正常显示。

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

C、系统自动刷新，页面是否还处于当前页；页面数据是否正常展示

D、点击返回与back键，回退页面是否是期望页面

E、点击Android自带的物理键返回按钮，页面是否正常返回到期望页面

F、点击一些设计的返回按钮，页面是否正常返回到期望页面

1.4.数据为空处理

A.接口返回数据为空时，页面是否展示正常

B.页面某个数据为空时，页面是否展示正常

C.页面某功能返回链接为空，点击该功能区域是否会跳转

1.5. 其他异常处理

A.页面session与cookie值过期时，是否会重新跳转到登录页面

B.页面session与cookie值过期时，页面展示是否正常

1.6.H5第三方体验环境

a. 微信内体验，页面功能是否能够正常使用，支付相关是否正常调用

b. QQ内体验，页面功能是否能够正常使用，支付、分享、页面展示是否正常

c. 微博内，页面功能是否能够正常使用，支付、分享、各个功能是否正常使用

d. 普通浏览器内，页面功能是否正常使用，支付、分享、各个功能是否正常使用

1.7.H5页面适配

a. iPhone手机、iPhone5、iPhone6等各个手机系统，H5页面功能是否展示正常

b. Android 市场流行机型、系统，H5页面功能是否展示正常

c. 分辨率不同的手机，H5页面功能是否展示正常

d.不同浏览器，H5页面功能是否展示正常

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

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

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

C、ios9、ios8、ios7。

1.8.网络问题

‍‍‍a.WiFI下页面展示，是否正常

b.4G、3G等情况下，页面是否展示正常

c.数据无网络到有网络，‍页面点击后是‍否会自动加载数据

1.9 mtop接口返回处理

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

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

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

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

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

二、安全相关

2.1 明确投放渠道都有哪些

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

2.2 评估是否需要接入集团安全，如mtee黑白名单等。

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

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

三、体验相关

3.1 资源相关

A、页面中有图片的话，淘宝那边建议图片一般不大于50kb，本着一个原则，尽量缩小图片。图片适配（高端机取双倍尺寸的图）

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

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

3.2 流量

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

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

3.3 页面展现时间

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

3.4 页面提示

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

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

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

3.5 手机操作相关

A、锁屏之后展示页面。

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

四、埋点数据检查

与BI、前端同学一起确认埋点情况。

细节点：

1.屏幕切换（横竖切换）

2.页面请求验证：是否有多余的请求及多余的数据。尽量精简，否则浪费流量

3.滑动，定位是否ok

4.文字的长度是否根据屏幕自适应

5.交互，比如弹出层的点击是否会穿透，影响别的页面

6.对于浮层，拖动后是否留白，拖动是否可以看到它下面的页面

7.清缓存