如何保证H5活动正常上线

2021年08月20日H5页面开发

 

如何保证H5活动正常上线?除了制作之外,测试也是非常重要的一部分。蓝橙互动作为专业的H5开发公司,我们在给客户报工期的时候,就会测试的时间预估上,以此来保证H5活动能够正常上线。那么,H5页面开发完成之后如何测试的呢?

 

一、 环境配置


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


二、测试关注点


1、业务逻辑测试


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


2、页面元素UI测试


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


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


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


页面布局:页面文字图片是否能自适应屏幕、整体布局是否合理等;内嵌链接:空链接、刷新链接数据是否展示;链接跳转是否正确;

 

3、页面操作


翻页

 

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

 

刷新与返回


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


弹窗出现/关闭


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


浮层页面


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


页面提示


弱网络下,数据加载较慢,是否有对应的loading提示;接口获取异常时,提示是否合理;刷新页面或者加载新内容时页面是否有抖动;手机操作相关;锁屏之后展示页面;退到后台,再重新呼出在前台展示;


4、接口测试


接口返回处理:


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


接口性能测试:


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


服务端并发性能:用户量过多时,服务器性能是否受到影响;内存:反复访问,检查是否占用大量内存;


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


5、 网络测试


网络环境:WiFi、5G、4G、3G、2G;网络异常:弱网、断网;网络切换;


6、 适配测试


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


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


7、 安全测试


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


8、埋点测试


埋点数据检查;


9、 上线后验证测试


上线后:H5涉及到的各种资源文件,在测试环境(包括预发环境),一般都是内域,正式上线,RD童鞋有把资源文件(或者说url中的链接忘了修改)漏发的风险,所以上线后一定要用外网环境再快速回归下;

 

总体来说,测试的重要程度堪比开发了。因为只有不断的测试,不断的调整,才能够保证活动上线不出错。蓝橙互动目前拥有上千款H5案例,每一支案例都是经过我们不断的测试才会上线的,努力让每个活动都达到最好的效果。

版权所有 © 2014-2023 成都微距品牌策划有限责任公司

备案号:蜀ICP备17017356号-2