H5测试

柔情只为你懂 2022-04-18 02:30 386阅读 0赞

一提到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的测试任务时，可以引导你怎么去思考来完整的测试你的业务：

![t012c4b0b48ae559af0.jpg_size_684x806][]

[t012c4b0b48ae559af0.jpg_size_684x806]: /images/20220418/6421a009163342b89fb5137354960529.png

H5测试

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关小程序&H5的测试

相关 H5测试扫盲，小白必看！

相关 node js本地测试uniapp(H5)

相关 H5测试||fiddle的使用

相关 H5测试||测试执行阶段测啥

相关 H5测试||锦上添花的辅助工具

相关 H5测试||测试流程

相关 App/H5/小程序测试技术

相关 h5页面测试

相关 H5测试