H5测试解析

h5测试

一提到h5测试，做web测试的朋友肯定早已经非常熟悉，它包括页面h5功能测试，前端性能测试，兼容性能测试，以及服务端性能测试。今天我们来一起了解下h5测试的测试点，希望可以帮助大家了解：如何进行h5页面的测试，如何发现问题以及相应的优化规则。

h5页面的测试点汇总：

业务逻辑相关

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

1、登陆

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

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中提到的异常之外的异常，通常可归结为一类进行处理。

h5适配相关

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

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

b、android4.x随机找一个即可。

c、ios9、ios8、ios7。

网络相关

不同网络类型测试

a)考虑2g\3g\4g\wifi网络

b)考虑移动网络2g\3g\4g基站的变化的影响

c)无连接、关闭连接状态

d)弱网络信号状态

e)有网络信号但网络不可达状态

测试注意点

a)从wifi切换到2g/3g网络、从2g/3g网络切换到wifi等

b)弱网络降级：处于2g/3g网络省流量模式的一些特殊处理，比如2g网络下测试，图片多时是否要懒加载等

c)无网络时，执行需要网络的操作，给予友好提示，并确保不会导致应用crash；

d)内网测试时，要注意选择到外网操作是的异常情况处理；

e)弱网络下，检查功能状态是否正常，确保不因提交数据失败而造成异常甚至应用crash；

f)弱网络下，检查数据是否一直处于提交中的状态，如遇数据交换失败要给予提示；

g)弱网络下，执行操作后，在回调没有完成的情况下，退出本webview或者其他操作，有无异常

安全相关

1、明确投放渠道都有哪些

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

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

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

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

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

操作页面体验相关

1、资源相关

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

b、资源是否压缩、是否通过cdn加载。

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

2、流量

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

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

3、页面展现时间

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

4、页面提示

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

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

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

5、手机操作相关

a、锁屏之后展示页面。

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

埋点数据检查

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

总结：

随着科技的进步，h5页面的普及和运用正深深的影响着每个行业的发展，我们可以发现在各种各样的app，都从native app往hybird app发展，比如微信、手机淘宝、支付宝等重量级应用，都在多个入口嵌入了h5，因此，h5的测试需求也是非常大的。

废话少说，最后给大家分享一个小干货——一张图玩转h5测试，其目的在于，当一个测试员拿到一个h5的测试任务时，可以引导你怎么去思考来完整的测试你的业务：