安装环境
按照官方文档：developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html 进行配置：
执行命令，安装sdk：
npm i miniprogram-automator --save-dev
之后开启工具安全设置中的CLI/HTTP调用功能。关闭状态无法通过脚本对小程序进行自动化操作；
设置/安全设置
手动编写脚本
1. 自定义脚本
我们可以使用jest或者直接通过node环境来执行脚本，以下例子以node环境举例：
引入 SDK 开始编写控制脚本，在项目中任意路径新建一个js文件，如index.js,填充以下内容
const automator = require('miniprogram-automator')
// 根据路径唤起开发者工具
automator.launch({
cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli',
projectPath: '/Users/XXX/XXX/XXX/wechat-app',
}).then(async miniProgram => {
// 开发者工具被唤醒，接下来执行自定义操作
const page = await
miniProgram.reLaunch('/mps/zfsy/plugin/zufang/pages/home/home')
await page.waitFor(500)
})
可能遇到问题：开发者工具未安装到默认位置，cliPath路径报错
UnhandledPromiseRejectionWarning: Error: Failed to launch wechat web devTools, please make sure cliPath is correctly specified
解决：mac找到微信小程序开发工具，右键显示包内容，进入Contents/MacOs/找到 cli文件并将其选中，快捷键 ：command+option+c复制路径,
路径
之后执行该文件
node index.js
就会发现微信开发者会启动并跳转到/mps/zfsy/plugin/zufang/pages/home/home页面；录得视频太大了贴不上。。全靠脑补；
上面是通过微信sdk的automator.launch来创建端口并进行连接，我们还可以通过命令行来手动开启端口+automator.connect达到该效果。
按照上文说到的路径进入 /Applications/wechatwebdevtools.app/Contents/MacOS/中，之后执行以下代码开启自动化
// 12345 是随便指定的端口
./cli auto --project /Users/XXXX/XXXX/wechat-app --auto-port 12345
官网直接cli了，但是mac不可以！！需要./cli 才可以！！一大坑
执行命令后会自动唤起你的开发者工具并提示！！！
执行
提示成功，emm我这工具好像有点奇怪
启动之后就可以执行我们其他的脚本啦，举个例子下面代码判断的代码筛选项是否为4个
const automator = require('miniprogram-automator')
automator.connect({
wsEndpoint: 'ws://localhost:12345' //这里就是我们通过cli开启的端口
}).then(async miniProgram => {
await page.waitFor(500);
//获取组件filter-ftoy
const filter = await page.$('filter-ftoy')
//获取组件filter-ftoy中class为filter-tab-item的元素
const filterTabs = await filter.$$(".filter-tab-item")
await miniProgram.pageScrollTo(500)
if(filterTabs.length!==4){
console.log("error:筛选项渲染成功")
return;
}
})
当然我们也可以安装jest，使脚本提示更友好：
npm i miniprogram-automator jest
npm i jest -g
之后执行
const automator = require('miniprogram-automator')
describe('index', () => {
let miniProgram
let page
beforeAll(async () => {
miniProgram = await automator.connect({wsEndpoint: 'ws://localhost:12345'})
}, 30000)
// 用例
it('筛选项个数', async () => {
const filter = await page.$('filter-ftoy')
const filterTabs = await filter.$$(".filter-tab-item")
expect(filterTabs.length).toBe(4)
})
// ....
afterAll(async () => {
// await miniProgram.close()
})
})
之后执行命令
2. 自动化录制用例并生成脚本
除开手动写测试脚本以外，我们也可以进一步使用开发者工具来实现录制用例后自动开跑：
在菜单栏找到工具/自动化测试，在菜单栏上方点击开始录制，之后按照自己的逻辑进行步骤录制；
菜单栏中的开始录制
随着你的点击滚动等操作，在下图画圈处会有同步的记录；
捕捉动作
并在会在你的项目中新建minitest文件夹(默认可在project.config.json中修改”textRoot“)，其中保存的是录制好的用例对应的json文件；
通过共享该文件夹达到协同
录制完成后，可以针对某一步骤进行修改，比如，我把点击的筛选项文字从价格改为并不是价格，查找方式改为全局文字匹配；
之后我们点击菜单栏上的回放，此时将自动化重新跑一遍刚才录制的用例；
此时发现有报错，因为小程序中点击的就是带有
价格字样的筛选项，并不是我们设定的并不是价格，所以报错了；这种自动化可以帮助我们便捷的跑跑主流程，快速大范围进行回归；
这里的用例也可以导出，导出的是个zip包，里面有jest脚本，可二次开发；
微信的云测
地址: developers.weixin.qq.com/miniprogram/dev/devtools/minitest/cloud_problem.html
可将我们项目中录制的用例进行上传，有机器人自动远程帮跑；还可以进行测试计划的管理等，也很方便。 在微信开发者工具提供的自动化测试内，可以选中某个用例并且将其导出成jest脚本或者json。
导出后开发zip
再将其中的json导入到云测，进行数据互通；
导入
网友评论