前言
小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
现在公司有许多产品通过小程序来进行使用与分享,了解微信小程序的测试常识变得必不可少
概述
本文主要介绍一下小程序测试的基础知识,自动化测试相关的实践
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":"3FO4K4VYBUKQ","customerName":"听白","customerPhone":"","designNames":null}]},"f":null}
合并一下
{
"data": {"c":"0","m":"","d":{"pageIndex":1,"pageSize":20,"rowTotal":1,"pageTotal":1,"data":[{"obsCustomerId":"3FO4K4VYBUKQ","customerName":"听白","customerPhone":"","designNames":null}]},"f":null},
"statusCode": 200,
"header": ""
}
匹配接口
使用正则的方式匹配的接口为https:\/\/beta.kujiale.com\/kuaida\/intelligent\/match\/customer\/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 plugins
from 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 allure
from 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测试结果
真实项目测试结果
查看网络请求信息