微信小程序测试

一、测试前准备（环境搭建）

1.前端页面

微信Web开发者工具安装、授权测试用的微信号可预览和调试小程序...
可参考此文：微信Web开发者工具-下载、安装和使用图解

2.管理后台

配置内网测试服务器环境，通过PC端Web站点管理小程序前端的输出内容，可从开发人员获取管理账号进行测试

二、测试范围

1.权限测试

需要检查以下几种情况下微信用户访问的权限
1）未授权微信登录小程序
未授权时，一般使用一些业务功能的时候，都会弹出提醒：先授权再操作对应功能。or在提交数据到后台的时候，会提示补充相关身份信息才能提交成功
2）已授权微信登录小程序
授权微信访问小程序，意味着自己的微信账号可被小程序管理方所获取，自动以微信的身份行使业务操作权限，比如咨询、支付、数据查询等
3）同一微信号在不同手机端登录授权查看数据权限
同一微信号在不同手机微信端授权登录同一小程序之后，所能查看的数据和操作的权限都应该是同步一致的

2.功能测试

1）按功能模块测试
根据设计好的各个大类功能模块划分，然后再逐级细化，覆盖到每个功能尽可能全面的测试点
2）按业务流程测试
小程序的业务，比如咨询、支付、播放、查询、下载。把各个功能点串联起来形成完整的业务流程来检查；同一个业务，可能有不能的路径来实现，每个路径都需要覆盖检查
3）按数据流向测试
根据数据从某一端操作输入和输出流向，设计基于数据流的测试用例，输出的数据也可能成为另外一端的输入，检查输入的数据是否按照代码逻辑执行正确的输出，是否数据发生异常（无法输入；有输入却无任何输出；输出不正确；多余的输出其他信息...）
4）同一功能不同的入口有效性的检查
小程序中在首页、列表页、详细页、其他的业务功能相关页面，都有可能存在同一个功能的入口，如付费咨询、免费咨询业务中，可以直接从首页进入付费咨询入口，也可以通过免费咨询入口再切换到付费咨询入口。每一个入口路径都需要覆盖检查
5）交互性检查
一般而言，产生数据和功能交互变化的情况主要有这几个分类：前台<-->前台、后台<-->后台、前台<-->后台。前台从A1页面提交的数据，可能需要在前台A2页面查看到，也会在对应后台的B页面查到记录；后台B1页面修改or添加的数据，对应到前台的A页面产生交互变化，后台本身的不同页面之间也可能存在同一个数据的输出值

3.版本配置测试

有时候小程序一次性做了几套不相同的模板，在前端程序代码中修改配置参数，保存后重新编译，即可从一个版本切换到另一版本，同时也需要在管理后台作相应的切换，以保证前端进行数据调用
对于非公用的部分：不同版本直接的切换，需要保证彼此的功能模块和数据独立性不受干扰影响，即不同版本的管理后台所添加的数据只应该调用到各自对应模板的前台小程序中，不同版本的小程序从前台提交的数据也只会提交到各自管理后台，不应该有交差重叠
对于公用的部分：切换不同的模板，都会显示相同的内容

4.兼容性测试

1）手机操作系统
常规的手机端OS为：Android（7.x/6.x/4.x/2.x...）、IOS（11.x/10.x/9.x...）
2）微信版本
对于已上线的小程序，有可能会因为微信版本升级之后导致对部分小程序的组件支持产生冲突，手机端微信上查看的小程序页面出现样式有异常，比如出现少部分区域的黑屏，这种情况需要同步在小程序的程序包中修改一些组件再次更新

5.易用性测试

1）导航
定位到页面某个模块所在位置，回到顶部or底部，导航条的收展，导航标签的文字是否容易理解
2）功能入口
重要且常用业务的功能入口，是否在比较显眼的位置，业务操作过程是否便于大多数用户使用和查看
3）上下层级进入&返回
首页<-->列表页、列表页<-->详细页、首页<-->详细页。不同层级之间的进入和返回实现是否有相应按键易操作
4）字体、图片、动态交互效果
字体：标签、标题、内容、动态播放字体...
图片：轮播图、背景图、封面图、触屏产生的交互图...

三、注意事项

1.上线

1）上线配置
内网测试、线上测试对应不同url接口；上线前，需要修改内网测试接口地址为正式环境使用的接口。同时还有一个配置参数的转换设置也要关注到
2）审核
将程序包提交给微信官方进行审核，工作日审核一般0.5d-1d之内可以搞定
3）发布
微信官方审核通过后，即可发布小程序到正式环境中访问使用，通过手机微信端搜索对应小程序的名字即可搜索到

2.常用功能

1）缓存清理
微信Web开发者工具、手机端微信的缓存清理。
使用场景：数据修改后检查修改的效果，程序修改代码后检查效果等情况，可清除缓存后再检查
2）编译
更新测试版本时使用。小程序需要经过几轮的循环测试和修复，开发人员每次修复Bug完成之后会添加新的程序包给到测试人员，测试人员则需要通过微信Web开发者工具删除旧版本的项目程序，重新添加新版本的程序包，然后编译调试

3.常用操作键

新建项目：Ctr+Shift+N
保存：Ctr+S
关闭文件：Ctr+W
搜索：Ctr+F
刷新：Ctr+R
编译：Ctr+B
预览：Ctr+Shift+P
清除缓存

小程序的介绍与认识

是一种微信开发不需要下载安装即可使用的应用。

小程序的架构：包含View视图层、AppService逻辑层。View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个线程里运行。视图层使用WebView渲染，逻辑层使用JSCore运行。

视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

小程序的限制：

1）数量限制：小程序一个应用只能同时打开5个页面；若忽略5个页面的限制，这时如果跳转逻辑超过5个页面会出现跳转打不开的情况；若已做到跳出5个页面的限制，需要特别查看各个页面间的跳转情况，重复进入的页面以及关闭页面能否返回上一层页面。

2）大小限制：小程序源码打包后的大小限制为1M，因此源码中的图片和icon和数据等都需要压缩。这里就可能出现数据和图片丢失，不清晰等问题

小程序的版本类型

版本类型

开发版

体验版

共同点

1、无需审核

2、需要给微信号配置权限3、通过扫小程序的二维码才能访问

不同点

开发版小程序的二维码有效期比较短

小程序的环境类型

由小程序的版本类型可以看出，我们一般会准备三套环境：

1、发版访问测试环境

2、体验版访问预发布环境

3、正式版访问生产环境

小程序测试注意事项

1、留意分享功能的权限：若某页面对游客访问有权限限制，则需要设置取消其分享功能。

PS:目前小程序不支持直接分享朋友圈，只能分享微信好友；有很多小程序通过生成带有二维码的图片，用户可以退出程序将图片发布到朋友圈

2、小程序强制更新功能：新版小程序上线后，自动、强制更新。

小程序的测试点

1、测试点如下：权限测试、UI测试、功能测试、兼容性测试、易用性测试、网络测试、性能测试、接口测试

2、测试点具体说明：见下图

小程序上线前的注意事项

1、测试环境使用测试域名。当在测试环境将所有功能跑通后，需要开发使用正式域名，然后再去做下回归验收测试。

2、回归验收测试完成后，整理测试报告

小程序和WebApp有什么区别

小程序	特征
入口	在二维码里，小程序的启动更多是来源于二维码扫描
是否要下载	不需要到应用商店去下载
是否订阅	不需要订阅
能否推送消息	不能推送消息
设计理念	微信小程序开发相当于重新做了一个不同于传统形式的APP，从开发、设计、测试、升级都是单独的一套。微信小程序和原生APP以及轻应用都不同，它更像是微信功能的延伸，更加注重场景化。
本质内容	但从本质上讲，它依旧没有摆脱原生APP开发以及轻应用所面临的两个问题：基于H5的特性和功能上的限制，微信小程序开发虽然无需安装可以即开即用，能够很大地减少手机的存储空间占用，但是对于网络的依赖也更加严重，轻量的定位在功能体验上也会不如传统APP开发出色。

点击下载工具包并安装，点击下载
准备好开发代码（从git/svn下载）
打开工具，登录微信账号，导入测试代码
ps:微信小程序的测试需要微信开发者权限以及项目代码权限，需要找项目负责人

使用开发者工具测试

1、支持选择不同屏幕的模拟机，支持选择wifi、4G等网络环境下测试

2、清缓存，比较常用的是退出微信登录，模拟未登录态

3、切换微信账号是指换一个微信账号登录开发者工具：

4、编译模式

微信开发者工具默认了一种编译模式，指定的页面为：pages/index/index，页面参数为空，编译成功后进入到小程序的首页。

但在一些场景下，我们需要直接指定编译到某个页面，比如：

页面入口还没有实现，无参数进入页面

比如严选周年庆时，周年庆入口和周年庆页面的开发不是同一个人，页面已经完成开发但入口还没能实现，为了能够及时测试，QA需要直接进入到页面测试，这时候，我们可以这样设置：

编译模式 --> 新增模式 --> 指定页面，编译时选择自定义编译模式进入到指定页面

需要添加参数的编译模式

另一种场景，比如拼团，我们需要一个非常复杂的前置条件（比如开团，参团，验证手机号，验证新人身份，凑齐3个人）才能进入到多个人拼团成功的页面，在这个页面有一个显示的bug需要复现，因为复现的路径太复杂，我们可以通过自定义编译模式直接进入到拼团成功页，查看页面显示情况，节省测试复现时间。

5、调试器辅助测试

整体上，调试工具分为 7 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace，简单说下几个常见使用的panel

1、console下跟chrome基本一致，查看控制台报错信息

2、network，查看页面请求、响应值

3、wxml跟chrome的element基本一致，这里是 wxml 转化后的界面，可以看到真实的页面结构。我们可以通过修改一些参数值来测试字符串过长、过短、截断、为空等问题

4、Appdata是页面的动态数据，是接口返回的请求值，我们可以通过修改appdata的值来伪造接口返回，他能实时的反馈到界面上显示，能节省很多QA造数据的时间。

5、source是用于当前项目的脚本文件的，可用于断点调试，精准提bug

6、storage 用于显示当前项目的一些数据存储的信息，比如我们显示的是登录认证的cookie等，当我们编辑cookie/session来伪造假的登录数据来参与拼团、下单等操作，验证服务端是否会返回正确的响应。

6、设置代理，进入设置-->代理设置，默认使用系统代理，可通过修改hosts来指定请求网络，或者可以手动设置代理，如图设置了fiddler的代理路径，可通过fiddler抓包

真机测试

通过点击预览按钮，生成二维码，使用有开发者权限的微信，打开微信扫一扫二维码进入真机体验。开发板允许打开调试和性能窗口进行简单的页面请求调试和性能数据查看。

远程调试

点击远程调试之后，等待设备接入调试，待微信扫一扫进入之后，进入远程调试状态，这个功能能够方便开发定位不同型号手机上出现的问题。

网易云免费体验馆，0成本体验20+款云产品！

更多网易技术、产品、运营经验分享请点击。

https://sq.163yun.com/blog/article/211687595744047104