微信小程序自动化测试实践

原创听白酷家乐技术质量

前言

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

现在公司有许多产品通过小程序来进行使用与分享，了解微信小程序的测试常识变得必不可少

概述

本文主要介绍一下小程序测试的基础知识,自动化测试相关的实践

1.基础部分包含:小程序测试环境搭建、小程序测试基础、测试注意点

2.自动化测试使用在pytest中以插件的方式封装官方提供的MiniTest库

小程序测试环境搭建

微信开发者工具

在进行小程序测试的时候,有时候会有如下的一些需求

查看小程序在不同机型上的展示
查看接口请求与响应
开发修改后快速验证
查看js的报错
分析代码质量\性能情况\主包大小...
...

这时候可以使用「微信开发者工具」

前往官网进行下载IDE
联系小程序负责人申请小程序的开发者权限
打包小程序
使用微信开发者工具打开小程序打包产物

小程序测试基础知识

渲染层和逻辑层

小程序的渲染层和逻辑层分别由2个线程管理：

渲染层的界面使用了WebView 进行渲染；
逻辑层采用 JsCore 线程运行 JS 脚本。

一个小程序存在多个界面，所以渲染层存在多个 WebView 线程

这两个线程的通信会经由微信客户端（ Native ）做中转，逻辑层发送网络请求也经由 Native 转发。

小程序不同版本

不同版本的入口

开发版:使用「微信开发者工具」预览，二维码有效期30分钟

体验版:酷家乐小程序平台-对应的小程序-版本管理，二维码固定不变，永久有效

正式版:微信中直接搜索

在使用开发版或者体验版进行测试的时候需要开启调试模式

如果不开启调试会出现

1.无法访问没在小程序后台配置的域名会提示表现为「获取失败,请检查网络链接」

2.无法查看调试信息

公司内部平台上可以进行环境切换

修改env变量切换线上或线下等环境

启动机制

为了保证⼩程序的快速访问和⽤户体验，微信会缓存整个⼩程序，包括⼩程序⽂件、授权数据、登录数据等等。因此⽤⼩程序常碰到缓存问题，例如切换环境（线上线下互切）、发布、登陆等有时候会发⽣数据切换不过来的场景，为了避免⼀些不必要的缓存问题，简单粗暴的⽅法就是，将⼩程序删掉重新进⼊。

冷启动:用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
热启动:用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

访问外部网页限制和公众号文章限制

很多小程序中会内嵌H5页面

在非正式版的时候可以选择「不校验合法域名、web-view(业务域名）、TLS 版本以及 HTTPS 证书」来进行测试,但是到了正式版本后需要将外部链接加入到白名单

小程序内关联的文章也是有限制，必须是当前小程序关联的公众号

程序包限制

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 20M；
单个分包/主包大小不能超过 2M。

开发者工具中如何查看分包大小

性能数据

在「微信开发者工具」中的调试器中的「Show console drawer」中点击「Task」即可看到实时的性能数据了

Mock数据

有一个获取客户列表的口:https://beta.kujiale.com/kuaida/intelligent/match/customer/pagelist

现在需要修改它的返回值

准备数据

数据格式为:

{  "data": "",  "statusCode": "",  "header": ""}

这次mock后让它就返回一个客户的信息

{"c":"0","m":"","d":{"pageIndex":1,"pageSize":20,"rowTotal":1,"pageTotal":1,"data":[{"obsCustomerId":"xx","customerName":"听白","customerPhone":"","designNames":null}]},"f":null}

合并一下

{  "data": {"c":"0","m":"","d":{"pageIndex":1,"pageSize":20,"rowTotal":1,"pageTotal":1,"data":[{"obsCustomerId":"xx","customerName":"听白","customerPhone":"","designNames":null}]},"f":null},  "statusCode": 200,  "header": ""}

匹配接口

使用正则的方式匹配的接口为

https:\/\/xx.com\/xx\/ixx\/xx\/xx\/pagelist

测试

刷新一下页面进行测试,查看是否mock成功

修改一下响应的内容

{   "obsCustomerId": "3FO4K4VYBUKQ",   "customerName": "听白1111111111111111111111111111111111111",   "customerPhone": "123",   "designNames": null }

查看效果

测试注意点

免登录场景

分享出去的⻚⾯，这个链接⼀般是免登录的，需要使⽤完全没有登录过的⼿机或者清理干净缓存再去验证

右上角操作

右上⻆开放出了哪些功能，我们都需要验证⼀边，确保正常。

特别是浮窗切换，前台后台切换的时候，容易出现⻚⾯错乱或者⽩屏的现象

支付功能

微信支付
二维码支付
第三方支付

需要测试各个支付方式都能正常唤起并支付

缓存

⼩程序为了快速流畅的⽤户体验缓存了整个⼩程序，⼏乎每个⻚⾯都会存在⼤量的缓存.

我们需要明确哪些我们需要缓存，哪些⽆需缓存，注意⻚⾯切换或者账号切换时数据的正确性。

入口有效性

可以通过「发现」模块下的「⼩程序」中的搜索框搜索到对应的⼩程序；
可以通过「附近的⼩程序」找到⼩程序；
已打开过的⼩程序，还可以通过微信聊天⻚⾯的下拉框找到⼩程序；
分享链接可正常打开⼩程序；
⼩程序码扫描可正常打开⼩程序；
删除⼩程序后重新发现正常可正常进⼊。

兼容性

操作系统兼容性

不同运行环境下，脚本执行环境以及用于组件渲染的环境是不同的，性能表现也存在差异：

在 iOS、iPadOS 和 Mac OS 上，小程序逻辑层的 JavaScript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS 14、iPad OS 14、Mac OS 11.4 等；
在 Android 上，小程序逻辑层的 JavaScript 代码运行在 V8 中，视图层是由基于 Mobile Chromium 内核的微信自研 XWeb 引擎来渲染的；
在 Windows 上，小程序逻辑层 JavaScript 和视图层都是用 Chromium 内核；
在开发工具上，小程序逻辑层的 JavaScript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。

JavaScriptCore 无法开启 JIT 编译 (Just-In-Time Compiler)，同等条件下的运行性能要明显低于其他平台。

机型兼容性

主要是屏幕的适配

微信小程序定义了一个新的尺寸单位 rpx(responsive pixel) 可以适配不同尺寸的屏幕，在页面上定义对象的单位是 rpx 就可以在不同的屏幕上适配。

部分机型会出现边框缺失:小程序1rpx边框不完美解决方案

微信版本兼容性

基础库

为了避免新版本的基础库给线上小程序带来未知的影响，微信客户端都是携带 上一个稳定版 的基础库发布的。

小程序的能力需要微信客户端来支撑，每一个基础库都只能在对应的客户端版本上运行，高版本的基础库无法兼容低版本的微信客户端。

有条件可以切换多个版本的微信来进行测试

交叉事件

与微信的交叉事件:微信视频,语言通话等打断小程序操作
与手机的交叉事件:手机电话,闹钟,文件接收等打断小程序操作

小程序不会阻止交叉事件的发生(不会打不进电话等)

查看小程序会不会出现中断,白屏,卡死,闪退等问题

网络

测试3G、4G、5G、wifi 网络下应用运行的速度。
网络不好时，提交数据是否一直处理提交中，是否会有延迟，数据交换失败是否会有提醒。
有网到无网再到有网环境时，数据是否可以自动恢复，能正常加载。

自动化测试

pytest-mini

https://pypi.org/project/pytest-mini/

该项目基于MiniTest进行pytest改造

在保留原有特性的情况下,可以使用pytest来进行代码编写,提高编写效率

安装

pip install pytest-mini --upgrade

项目结构

页面元素:components_page.py

from pytest_mini import Mini, Locator class ComponentsPage(Mini):    view_container = Locator('view', inner_text='视图容器', desc='组件页-视图容器')

前置条件:conftest.py

import pytest from pytest_mini import pluginsfrom demo.pages import ComponentsPage pytest_plugins = plugins(    "/Users/zhongxin/github/miniprogram-demo",  # 待测试的小程序项目路径    "/Applications/wechatwebdevtools.app/Contents/MacOS/cli"  # 微信开发者工具路径) @pytest.fixture(scope="session")def components_page(mini):    yield ComponentsPage(driver=mini.driver)

测试代码:test_home.py

import allurefrom pytest_mini import compose  @compose(feature="小程序官方组件展示", story="组件", title='容器视图操作')def test_view_container(components_page):    with allure.step("点击容器视图"):        components_page.click(components_page.view_container)        assert False, "故意失败,查看报告截图"

demo测试结果

真实项目测试结果

查看网络请求信息