微信小程序demo测试实践

爱被打了一巴掌 2024-04-19 14:32 68阅读 0赞

[https://mp.weixin.qq.com/cgi-bin/wx][https_mp.weixin.qq.com_cgi-bin_wx]：平台地址

建议先了解他的各个文档，

github.com/wechat-miniprogram/miniprogram-demo

demo下载地址

[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]

开发者工具地址

开发版：测试

安装后需要登录，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70][]

把demo放进开发者工具里，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 1][]

demo的文件内容。这里导入时需要APPID 如果没有可以使用测试号会有选填

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 2][]

编译完成后可以预览，预览可以直接绑定测试机上亦可扫描二维码。导入后会显示此些工具，模拟器、编辑器、调速器（f12的控制台）![20190919015628754.png][]

真机调试时分为直接关联手机和二维码扫码，展开后 会查看到

我的真实情况是![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 3][]这里是没有打开性能面板

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 4][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 5][]打开后需要重启

安卓打不开---问题

通过展示出来的性能数据，我们能够直观的看到实时的性能，比如切换页面时的页面切换耗时。如果想要看性能的整体的长时间变化趋势，则需要借助trace工具。

我的安卓和苹果都没有；开发版的无法解决在其他两个版本中连接adb使用查看性能解决长时间问题。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 6][]

未有权限报错：invalid scope 没有权限，请先开通云服务

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob25nbWVpMTIx_size_16_color_FFFFFF_t_70][]

百度的解决办法，但我么有就先搁置，

appDate 类似于fiddler中inspectors。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 7][]

通过修改真机调试界面中AppData中的数据可以实现和fiddler中autoresponder类似的功能，检查各种数据的情况下界面的显示。因为微信小程序是运行在微信之上的，所以各种功能交互更多是微信考虑处理，测试微信小程序时可以不用太考虑。

兼容性测试：

1、**操作系统**兼容性（兼容android系统和ios系统），android系统和ios系统对js代码的处理存在差异，所以需要考虑这两个系统的兼容性。实际工作中同一个小程序，需要在android微信上和ios微信上分别进行测试。

2、机型兼容性（屏幕的适配），**微信小程序中考虑了屏幕的自动适配**，专门设计了一个rpi单位，但还是不能完全保证适配没问题，所以针对小程序仍然需要考虑机型兼容。

3、微信版本的兼容性（基础库版本适配）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 8][]针对开发版，通过修改调试基础库版本即可做兼容性测试。

在详情本地设置栏，

**微信小程序网络测试**

移动app 的网络测试考虑：

1、强网测试，不同网络下使用、网络切换下的使用

2、弱网测试

3、无网测试

微信小程序和移动app的网络测试类似。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 9][]

控制台红色部分是进行的无网，

其他两个版本可以用filder测试（体验版和正式版）

对于体验版或者正式版，可以完全类似于移动app的测试方式，利用fiddler来做测试。

使用步骤：

1、电脑上的fiddler设置抓取和解析https的包

2、手机上安装fiddler的证书

3、手机上开启代理

运行小程序后，即可以在fiddler上看到抓取的https的包。

**　微信小程序性能测试**

移动app的性能测试关注：

1、业务响应时间（启动时间/页面切换时间），通过logcat中查询displayed关键字

2、Cpu，emmagee

3、Gpu，过度绘制、高速相机

4、内存，emmagee

5、流量，emmagee

6、电量，emmagee

微信小程序因为一般运行的时间短、频度低，所以关注的性能指标比app要少一些。

1、业务响应时间（小程序包下载时间/启动时间/页面切换时间）

2、内存

3、Cpu

4、帧率

5、数据缓存大小

微信小程序针对开发版提供性能监控器工具。

**微信小程序特殊测试点**

1、小程序包大小不能超过3M，开发版对大小没有限制，但是体验版和正式版都有限制。

2、页面层级跳转不能超过10次，比如分类-》居家-》布艺软装-》居家-》被枕-》居家-》。。。达到10次就无法跳转了，如果非要有这种跳转方式，需要考虑不让微信觉得是10次跳转。

3、缓存，微信小程序为了提升用户体验，会缓存用户的页面及数据，方便下次调用时直接使用。可能产生的问题：

1）微信小程序缓存的数据是否和服务器端一致。实际测试时可以先访问页面，然后修改服务器上数据，再回看小程序中页面，看数据是否一致。

2）切换相似的页面，看是否缓存的数据会产生混乱，比如居家和餐厨两个分类，切换分类的时候，会不会因为缓存导致具体信息不发生变化。

**1.fiddler的使用场景**  
开发环境host配置，前后端接口调试，线上bugfix，性能分析优化

2.fiddler的主界面分为：工具面板，会话面板，监控面板，状态面板  
工具面板：

![70][]

说明注释、重新请求、删除会话、继续执行、流模式/缓冲模式、解码、保留会话、监控指定进程、寻找、保存会话、切图、计时、打开浏览器、清除IE缓存、编码/解码工具、弹出控制监控面板、MSDN、帮助  
两种模式  
缓冲模式（Buffering Mode）Fiddler直到HTTP响应完成时才将数据返回给应用程序。可以控制响应，修改响应数据。但是时序图有时候会出现异常  
流模式（Streaming Mode）Fiddler会即时将HTTP响应的数据返回给应用程序。更接近真实浏览器的性能。时序图更准确,但是不能控制响应。

![70 1][]

抓取手机端是灰色的问题

![format_png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 10][]

发现使用的http connect方法

connect是为了建立http tunnel，connect是http众多方法中的其中一种，它跟post、get、put、options方法是并列的。但是它的使用场景很特殊。只有在受限制的网络环境中（防火墙、NAT、代理器）并且是https通信时，客户端使用http connect请求代理服务器，代理服务器使用connect方法与目标服务器建立http tunnel，通道建立后，客户端与服务器进行通信，代理服务器就像透明一样，只是接收、转发tcp stream。

为什么要建立http tunnel呢？  
这是因为，网络环境受限，客户端无法直接访问某些网络，所以只能通过代理服务器访问网络，然后，将内容转发给客户端，从宏观上看，客户端与服务器端就像建立了一条隧道一样。  
但是由于http tunnnel可控性不强，所以，服务器通常会限制”可connect的端口”(一般只开放SSL的443端口)

关于NAT(network address translation)环境如下图  
![这里写图片描述][SouthEast]

又一问题需要解决

总结：

一、微信小程序的测试点---

**单纯功能测试的层面来说，微信小程序测试、APP测试、web测试在流程和功能测试上是没有区别的，但由于载体的不同，导致有一些不同，主要可以从几个方面体现：入口，微信钱包、卡包、**

**1、系统架构方面**

**2、性能方面**

**3、兼容方面**

**4、测试工具方面**

**微信小程序测试与app测试非常相似，微信小程序是已微信为载体的，通过微信进入小程序中。**

**性能方面：**

**1.微信小程序使用微信开发者工具对小程序进行性能测试和web差不多 主要是页面展开时间、页面渲染时间、资源的占用，**

**兼容性：**

**3、微信版本-微信各个版本（可估计主要的用户群体和使用的微信版进行测试（主要不同的微信版本对应的api）-微信小程序后台可查看使用版本的统计）**

**测试点：**

**更新：热更新、覆盖更新（需要注意更新版本时，用户是否需要删除小程序才会有效果）**

**微信版本类型：开发版、体验版、正式版，在测试过程中，曾经遇到同一套代码在体验版正常，发布 正式版就挂了，经开发分析是微信本身的bug，需要注意这点。**

**安全方面：  
什么内嵌啊不需要测 因为是在微信中运行，主要测接口数据是否加密**

[https_mp.weixin.qq.com_cgi-bin_wx]: https://mp.weixin.qq.com/cgi-bin/wx
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ba7e304258c043d886ee30d0b448fad5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4ee6c3b9084b499d8b205c32fc1e57df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3eae4d6906064ad9af93177b7858e15d.png
[20190919015628754.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9edd167e6fe44563bd9417c805cfb873.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c1a6a96eb0db4cf1a4f7c4a7309c8272.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190919023255842.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3b8303af262b4ed0b45399d1f09ed2c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0deefeed9fcf4632a74457db798a6ab0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob25nbWVpMTIx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e3ae32d0f82e4cfc9561bf1274b0bbc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/58a7fc925dc8455188d06ec6539353ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8e60e590232e4cb3ace3db9bc5cb2e8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2e89ba9b4217400cab607132d9c6f42c.png
[70]: https://img-blog.csdn.net/20180620173513663?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzU4NjI5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180620173536465?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzU4NjI5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTA1NDc4Mi8yMDE2MTEvMTA1NDc4Mi0yMDE2MTEwMTE4MDAzMjE1OC0xMTQzOTE5MjI1LnBuZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzM4OTQx_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/267013f797a64dc4baf2b5c743b23ba7.png
[SouthEast]: https://img-blog.csdn.net/20170106193958278?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ2p1bjUxNTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast