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

运行环境区分

1.客户端运行环境：

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

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

2.服务器配置：

由于小程序的性能比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视野】公众号作者。