正文开始

最近接触了H5页面和小程序的测试。H5，即“HTML”，是指“HTML”的第五个版本，也是一种网页技术，包括HTML、CSS和CSS在内的一套技术组合。H5本质上可以理解为网页，其依赖的壳主要是浏览器；微信小程序则是无需下载安装即可使用的应用程序。

这里我总结了一些H5页面和小程序常见的测试方法，分享给大家：

操作环境区别

客户端运行环境：H5是一个网页，其运行环境主要依赖于浏览器；微信小程序运行环境本身是一个计算机程序，结合自身定义的开发语言标准，大大提高了小程序的流畅度和性能。

服务器配置：由于小程序的性能比H5高，所以小程序对服务器的配置要求也比H5高。

H5优缺点：

优势

缺点

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

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

但是H5目前无法将数据保存在本地，依赖实时数据，当网络状况不好的时候就会卡住。

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

但性能比较低，影响用户体验

在微信门户或浏览器上，用户只需要点击链接就可以获得我们提供的服务。

但H5->的转换高度依赖于浏览器

H5功能验证

（1）测试页面中的返回功能和浏览器内置的返回功能。页面中的返回功能要兼顾业务逻辑，返回到相应的层级。要返回用户角度的跳转逻辑，不能出现死循环。还要注意返回后是否需要刷新页面。通过H5页面的返回功能键（不是手机内置的返回键）返回请求，能否返回到正确的页面（上一层级/退出H5）。点击返回、返回键检查返回页面是否是预期的页面。

（2）页面在横竖屏切换之后能够自我适配，不会出现布局问题；或者是否仅限于页面只支持横屏或者竖屏。

（3）手机端点击列表进入详情页时，在原窗口打开，这样用户不用再通过手机端的返回键，而是直接通过页眉的返回键返回，交互更加人性化。

（4）注意页面请求是否有冗余请求，或者请求后返回的冗余数据。目的是精简内容，减少流量的浪费。

（5）图片适配测试。根据不同屏幕和分辨率进行适配，以及适配后的清晰度。高端设备可拍摄双倍大小的图片-应用兼容性测试。

H5的测试点有：界面测试、业务测试（功能测试）、UI界面测试、兼容性测试、权限测试、安全测试、性能测试、数据嵌入测试（）

小程序测试技术

小程序具备以下特点：（1）似Web，又非Web；（2）即用即用；（3）离线能力；（4）基于微信，跨平台；（5）媲美原生操作体验

小程序的架构：微信小程序的框架由两部分组成：一部分是View层（为了渲染页面结构，一般使用渲染），一部分是逻辑层（用于逻辑处理，数据请求，接口调用，这一层使用运行）。这两部分分别运行在两个线程中，通过系统层进行通信。逻辑层将数据变化通知渲染，触发渲染页面更新，渲染将触发的事件通知给App逻辑层进行业务处理。

小程序测试点

小程序的测试点详细可以参见：

除了上面列出的小程序测试点外，这里还有几点：

性能测试：除了（1）页面白屏时间；（2）首屏时间；（3）资源使用情况；（4）页面渲染时间外，还需要考虑功耗和滑动帧率测试。

安全测试：危险账户的授权、与小程序app账户的关联、接口测试中传输数据的安全性；

其他补充事项：（1）小程序目前不支持分享到朋友圈，但可以以图片形式分享到朋友圈；（2）小程序的增删功能；（3）取消微信的授权登录；（4）小程序升级（一般为必升级）；（5）是否支持离线运行；

正文结束