​近期接触了关于H5页面和小程序的测试。H5,也就是“HTML5”,指“HTML”的第5个版本,HTML5也是一种网页技术,包括HTML、CSS和JavaScript在内的一套技术组合,H5本质上可以理解为是一个网页,依赖的外壳主要是浏览器;微信小程序,是一种不需要下载安装即可使用的应用。对H5页面和小程序的一些通用测试方法进行总结,在此分享给大家:

运行环境区分

1.客户端运行环境:

H5是网页,运行环境主要依赖于浏览器;

而微信小程序运行环境本身就属于计算机程序,再配合自己定义的开发语言标准,进而大幅提升了小程序的流畅度及其性能。

2.服务器配置:

由于小程序的性能比H5高些,所以服务器的配置要求上来说,小程序的要求要比H5更高一些。

H5优势与劣势:

优势

劣势

H5可以跨平台,开发成本相对较低


H5可随时上线,只需更新版本,适合快速迭代

但H5目前基本无法将数据存储在本地,依赖实时性数据,网络状态不好的时候卡到哭

H5可以轻量的触达用户,提供更快捷的服务

但性能相对较低,影响用户体验

在微信入口或者浏览器上,用户只需点开链接就可以获取我们所提供的服务

但H5->的转化强依赖于浏览器

H5功能验证

(1)对于页面中的返回,以及浏览器自带的返回的测试。页面中的返回要考虑业务逻辑,返回到相应层次,需要从用户角度返回的转跳逻辑,不能出现死循环;并要注意返回后是否需要刷新页面请求通过H5页面(非手机自带返回键)的返回功能键返回,可以返回到正确的页面(上一级/退出H5)点击返回与back键,回退页面是否是期望页面。

(2)横竖屏切换后页面能自适应,不会出现布局散乱问题;或页面是否限制了只支持横或竖屏。

(3)在手机上从list列表点击进入detail详情页面是在原窗口打开。目的是这样可以通过页头的返回按钮返回,而不需要通过手机的返回键返回,交互表现更友好。

(4)关注页面请求是否会有多余的请求,或者请求后有多余的数据返回。目的是精简的内容减少了流量的浪费。

(5)图片适配测试。根据不同屏幕和分辨率做适配,以及适配后的清晰度,高端机取双倍尺寸的图--app兼容测试。H5的测试点可 详见:接口测试、业务测试(功能测试)、UI界面测试、兼容性测试、权限测试、安全测试、性能测试、数据埋点测试(​​​你对 “数据埋点测试” 知晓多少?​​)

小程序测试技术

小程序的有这种特点:(1)类似WEB,但非HTML5;(2)即用即得;(3)拥有离线能力;(4)基于微信跨平台;(5)媲美原生操作体验

小程序的架构:微信小程序的框架包含两部分:一部分是View视图层(为了渲染页面结构,一般用WebView渲染),另一部分是AppSerive 逻辑层(用来逻辑处理、数据请求、接口调用,该层是使用JSCore运行),这两部分是分别在2个线程里进行运行,是通过系统层的JSBrigdage进行通信,AppSerive逻辑层把数据变化通知到WebView渲染,触发WebView渲染页面更新,WebView渲染把触发的事件通知到App Serive逻辑层进行业务处理。

小程序的测试点

小程序的测试点可 详见:​​微信小程序测试点​​

除此上面列出的小程序测试点,还补充一下几点:

性能测试:除了(1)页面的白屏时间;(2)首屏时间;(3)资源占用;(4)页面渲染时间;还需要考虑耗电量、滑动帧率的测试

安全测试:危险账号授权、与小程序的app账号关联,以及接口测试中涉及传递的数据的安全性;

其他补充事项:(1)小程序目前不支持分享至朋友圈,但是可以用图片的方式分享至朋友圈;(2)小程序的添加删除功能;(3)微信端取消授权登录;(4)小程序升级更新(一般情况是强制升级更新);(5)是否支持离线操作;

本文转载自微信公众号「BeeTester视野」,可以通过以下二维码关注。转载本文请联系联系【BeeTester视野】公众号作者。