引言
本篇将介绍最近在
小程序开发
项目上所遇到的有关自动化测试
的一些笔记分享。
微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。
微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,已经有超过150万的开发者加入到了微信小程序的开发,与我们一起共同发力推动微信小程序的发展,微信小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升。
在进行小程序自动化测试前,你需要准备👇:
- Node.js - v8.0及以上
- 微信开发者工具 - v1.02.1907232及以上
- 微信官方小程序Demo - 待测试的项目Demo
Get Started
Step1: 项目初始化
cd miniprogram-demo
npm i
cd miniprogram
npm i
Step2: 引入自动化测试插件与框架
完成上述步骤后,安装miniprogram-automator,这是一款由微信官方
推出的小程序自动化测试框架。
npm i miniprogram-automator --save-dev
引入jset测试框架
npm i jest
PS: 在下载完jest后,还需要前往package.json配置jest。
"scripts"
:
{
"test"
:
"jest"
}
添加完上述代码后,在进行测试时系统会自动找到
包括.test.js结尾的测试文件并运行。
Step3: 开启自动化测试端口
PS: (该步骤可省略,当第5步出现问题时,可先开启端口再执行第5步命令)
打开微信开发者工具,前往设置 -> 通用设置 -> 安全 -> 开启服务端口
前往你的微信开发者工具安装目录,例:D:\微信开发者工具,开启自动化测试端口
.\cli.bat --auto 你的项目地址 --auto-port 9420
当出现以下信息时,表示端口启用成功,并会同时开启/重启微信开发者工具。
PS D:\微信web开发者工具> .\cli.bat --auto C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram --auto-port 9420
√ IDE server has started, listening on http://127.0.0.1:33553
[warn] DEPRECATED please upgrade to the following v2 command instead ( doc: https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html )
cli auto --project C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram --auto-port 9420
√ Open project with automation enabled success C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram
Step4: 编写测试脚本
开启完测试端口后,新建一个miniTest文件夹用于放置测试文件,创建index.test.js文件,开始编写测试脚本。
此处使用官方的测试脚本案例👇
const automator = require('miniprogram-automator')
describe('index', () => {
let miniProgram
let page
beforeAll(async () => {
miniProgram = await automator.launch({
cliPath: 'D://微信web开发者工具//cli.bat',// cli.bat文件一般在微信开发者工具目录下,MacOS下一般无需配置cliPath
projectPath: './' // 默认当前项目地址即可
})
page = await miniProgram.reLaunch('/page/component/index') // 测试页面
await page.waitFor(500)
}, 30000)
// 测试脚本
it('desc', async () => {
const desc = await page.$('.index-desc')
expect(desc.tagName).toBe('view')
expect(await desc.text()).toContain('以下将展示小程序官方组件能力')
})
afterAll(async () => {
await miniProgram.close()
})
})
Step5: 开始自动化测试
编写完测试脚本后,在终端输入npm run test,即可进行自动化测试,期间将会打开/重启
微信开发者工具。
PS C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram> npm run test
> miniprogram@1.0.0 test C:\Users\P7XXTM1-G\Desktop\miniprogram-demo\miniprogram
> jest
PASS miniTest/index.test.js (21.827 s)
index
√ desc (12 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 22.683 s, estimated 27 s
Ran all test suites.
当出现上述信息时,表示自动化测试已通过。
API
Automator 模块提供了
启动及连接开发者工具
的方法。MiniProgram 模块提供了
控制小程序
的方法。Page模块提供了
控制小程序页面
的方法。Element 模块提供了
控制小程序页面元素
的方法。