H5页面测试该如何进行？

做一个H5页面并不难，做好一个H5页面却需要很大的努力，我们之所以能够扩大H5页面的用户使用量，无疑是因为H5页面的质量和效果是非常的好才行。我们能够做到的不仅仅是在制作的时候用心，还需要在完成之后进行足够多的测试，这样才能得到更加精准的效果。

一、环境配置

一般的测试流程是H5页面开发完成后，先在测试环境进行测试，测试通过再部署到线上环境，所以测试阶段要先进行测试环境配置。

二、 测试关注点

1、页面元素UI测试

页面UI主要包括文字、图片以及页面布局等方面测试；

文字：风格一致、错别字、标点符号统一、换行是否显示正常、一行长文字是省略显示全显示、图片与文字是否一致、刷新页面文字是否展示；

图片：1）静态：大小、风格；2）动态：大小、风格、准确性动态图、转场动画，loading动画，点击动画等；3）刷新页面图片是否正常展示；4）图片适配：根据不同屏幕和分辨率进行适配；

页面布局：页面文字图片是否能自适应屏幕、整体布局是否合理等；

内嵌链接：空链接、刷新链接数据是否展示；链接跳转是否正确；

2、业务逻辑测试

业务逻辑相关的测试，视具体业务的需求而定；

3、 页面操作

1）刷新与返回

页面刷新是否仍然处于当前页面；用户主动点击刷新按钮是否仍然处于当前页面；点击返回与back键，回退页面是否是期望页面（安卓物理按键返回；iOS左滑返回，考虑左滑一半松手，自动回到H5页面是否正常加载的情况）；

2）浮层页面

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

3）翻页

遇到翻页加载的页面，需要注意内容为一页或者多页的情况；数据分页加载时，注意后续页面请求数据的正确；

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

4）弹窗出现/关闭

手机测试要特别关注交互是否友好，可能会导致一些体验的问题，比如：弹出层的点击，是否会穿透，影响到弹出层下面的页面；

5）手机操作相关

锁屏之后展示页面；退到后台，再重新呼出在前台展示；

6）页面提示

弱网络下，数据加载较慢，是否有对应的loading提示；接口获取异常时，提示是否合理；刷新页面或者加载新内容时页面是否有抖动；

4、接口测试

1）接口返回处理：

请求成功，且返回有数据，测试接口返回数据的各种场景-接口返回的数据期望的是否一致；接口入参的边界值校验；检查接口的容错性，如对于传输数据类型错误能否处理等，整型的输入小数、中英文等；请求成功，但data内容为空；请求接口异常时，页面处理；

2）接口性能测试：

页面加载时间：关注页面首屏加载时间；调用接口数据返回的时间，速度过慢会影响用户体验；资源相关：页面中有图片的话，尽量缩小图片；资源是否压缩、是否通过CDN加载。

服务端并发性能：用户量过多时，服务器性能是否受到影响；

内存：反复访问，检查是否占用大量内存；

流量消耗：对于一些不会变化的图片，如游戏动画效果相关图片，不需要每次都请求的东西，做本地缓存；数据较多时是否做了分页加载。

5、适配测试

H5页面需要适配的内容主要有：图片高清适配；字体大小适配；页面布局宽度适配；横竖屏适配；

考虑适配因素：对不同屏幕尺寸和分辨率的机型进行适配；不同平台iOS和安卓进行适配；屏幕横竖屏适配；日夜间模式适配；深色浅色模式适配（iOS13系统）；

6、网络测试

网络环境：WiFi、4G、3G、2G；网络异常：弱网、断网；网络切换；

7、埋点测试

埋点数据检查；

8、安全测试

明确投放渠道都有哪些，是否对未投放渠道做了限制，直接通过url请求是否拦截等；接口部分敏感信息是否加密传输等；直接URL是否能打开；防止恶意攻击；

9、上线后验证测试

上线后：H5涉及到的各种资源文件，在测试环境（包括预发环境），一般都是内域，正式上线，RD童鞋有把资源文件（或者说url中的链接忘了修改）漏发的风险，所以上线后一定要用外网环境再快速回归下；如何保证二次发布后有效更新；

H5页面制作后的测试注重点基本上就在这了，基本上所有的应用到移动端APP的常见的H5页面测试上面都是这些测试内容。一个好的上线H5一定要先经过多方测试，才能达到最好的效果上线。