H5页面测试点

1、业务逻辑相关

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

1.登录

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

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

ps：本次测试过程中就发现，第一次点击链接，可以拉起登录，第二次却不能。

2.翻页

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

A、数据分页加载时，注意后续页面请求数据的正确。

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

3.刷新与返回

A、下拉刷新是否仍然处于当前页面。

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

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

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

4 mtop接口返回处理

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

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

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

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

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

2、H5适配相关

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

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

B、android2.3、android4.2.x（4.2.1\4.2.2）a、andriod4.4.x（4.4.2）、android5.x(5.0.2\5.0.2\5.1)、and riod6随机找一个即可。（小米、华为、三星、乐视、oppo、vivio等）

C、ios7、ios8（8.1、8.2、8.3、8.4）、ios9（9.1、9.2、9.3）、ios10。

3、安全相关

3.1 明确投放渠道都有哪些

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

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

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

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

3.4 是否接入windvane，所有请求通过native发出。

4、体验相关

4.1 资源相关

A、页面中有图片的话，淘宝那边建议图片一般不大于50kb，本着一个原则，尽量缩小图片。

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

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

4.2 流量

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

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

4.3 页面展现时间

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

4.4 页面提示

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

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

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

4.5 手机操作相关

A、锁屏之后展示页面。

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

4.6 弱网络体验

5、埋点数据检查

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

1.返回功能

通过H5页面（非手机自带返回键）的返回功能键返回，可以返回到正确的页面（上一级/退出h5）

2.屏幕切换

横屏竖屏相互切换，能适应，布局不乱，或页面只支持横或竖屏限制

3.分辨率适配更好

建议采用响应式设计（如：offerlist页面大屏显示3行，小屏显示2行）

4.页面打开形式

建议页面在手机上从list点击进入detail页面，要在原窗口打开，通过页面页头返回按钮返回，不需要通过手机返回键返回，交互体验好

5.页面请求验证

关注页面请求，是否会有多余的请求，或者请求后有多余的数据返回，尽量精简，否则会浪费流量。

6.图片适配

图片适配测试，根据不同屏幕和分辨率做适配，以及适配后的清晰度，高端机取双倍尺寸的图

7.用浏览器chrome f12进行测试

H5的页面在PC端也是能访问的，chrome对H5支持最好，功能的测试可以在PC端chrome下先测试，也可以在手机上直接测试，这个看个人习惯。（ie系列**ie8,及以下都支持的不好，这个可以与PD确认H 5页面在这些PC浏览器上不支持）

8.滑动、定位

手指滑动是否流畅，手指点击时焦点是否定位正确，不同机型会不一样。焦点定位点击是灵敏。

9、对于类似公司名称、offer名称长度的问题，在手机上最好能根据屏幕大小自适应而不是截断，因为手机上是不会有tips可以看的。截断导致大屏幕下也只能显示几个字，交互不好

10、手机测试要特别关注交互是否友好，与PC机的事件模型不一样，可能会导致一些体验的问题，比如：弹出层的点击，是否会穿透，影响到弹出层下面的页面。

11、对于一些浮层做的页面，例如地图、产品分类等浮层，注意拖动后是否可以看到它下面的页面，拖动后边缘是否有留白

12、手机端的浏览器测试的时候也要清除一下缓存，因为图片和文件会被缓存下来，所以首次访问和二次访问体验不一样。例如UC浏览器的清楚缓存在设置-》系统设置-》基本设置--》清除记录中。