进行 UniApp + Vue3 微信小程序的强化测试,通常需要覆盖多个维度,包括功能、兼容性、性能、安全性等。以下是一个强化测试的指南和一些示例用例,供你参考和使用:
✅ 一、测试准备
环境配置确认
- 确保使用
HBuilderX的最新版本或使用vite构建。 vue3 + <script setup>语法启用- 微信开发者工具已设置兼容调试
🔍 二、功能测试(关键路径验证)
| 功能点 | 测试项 | 示例用例 |
|---|---|---|
| 页面导航 | tabBar 页面切换 / 非 tabBar 页面跳转 | 验证页面切换是否正常、参数传递是否正确 |
| 表单交互 | v-model 双向绑定,表单提交验证 | 输入不合法内容是否被拦截 |
| 接口调用 | uni.request / onLoad 异步初始化 | 接口失败/超时时,页面是否处理错误逻辑 |
| 登录流程 | 获取用户信息、授权、登录态验证 | 未登录用户是否被重定向,缓存是否有效 |
| 动态组件渲染 | 条件渲染、异步组件、slot | 在复杂逻辑下组件是否正确挂载和销毁 |
📱 三、兼容性测试(小程序端差异)
| 测试点 | 内容 |
|---|---|
| 多设备测试 | iOS / Android / 模拟器 / 真机实测 |
| 系统授权兼容性 | 检查定位、摄像头、存储授权流程 |
| 页面适配性 | 不同分辨率是否 UI 正常(单位转换 upx -> px) |
| 小程序 API 差异 | 如 wx.getUserProfile 替代旧版授权接口 |
🚀 四、性能测试(关键页面加载与响应)
| 场景 | 方法 | 目标 |
|---|---|---|
| 首屏加载 | console.time + 页面监听 | 加载 < 1.5s |
| 长列表滚动 | 使用虚拟列表(如 scroll-view 优化) | 保持流畅无卡顿 |
| 图片加载 | 使用 image 组件懒加载 / base64 图片优化 | 图片加载耗时小于 300ms |
| 接口请求性能 | 接口合并、压缩、缓存机制 | 网络流量 & 响应优化 |
🔐 五、安全测试(前后端联测)
- 🔒 登录态校验(token + 时间戳 + 加密)
- 🔒 微信小程序合法域名校验
- 🔒 页面参数防篡改
- 🔒 表单字段防注入
- 🔒
uni.navigateTo跳转路径白名单限制
🧪 六、自动化测试建议
虽然小程序自动化不如 Web 完善,但你可以使用以下方式进行部分自动化:
单元测试
使用 vitest 进行 Vue3 组件逻辑单测:
import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
test('点击按钮计数 +1', async () => {
const wrapper = mount(MyComponent)
await wrapper.find('button').trigger('tap')
expect(wrapper.text()).toContain('1')
})
小程序自动化测试
工具选项:
- 小程序 UI 自动化框架:miniprogram-automator(微信官方)
- uni-app cli 模拟器 + puppeteer(需定制)
📋 七、测试报告 & 追踪
建议集成测试记录表或自动报告模板,例如:
| 模块 | 测试项 | 结果 | 备注 |
|---|---|---|---|
| 登录页 | 用户名为空登录 | ✅ | 提示信息正确 |
| 首页 | 数据加载失败 | ❌ | 缺少 loading 状态处理 |