工具:miniprogram-automator
需要准备:微信开发者工具(需要记住自己的安装位置)
安装
使用小程序自动化SDK,在cmd执行以下命令npm i miniprogram-automator --save-dev
如果没有开科学上网就用cnpm i miniprogram-automator --save-dev
如果报错说npm/cnpm不是可用命令,说明电脑里没有node环境,百度配一下就好了,很方便。
启动微信开发者工具的远程连接端口
- 打开一个小程序(第一次使用建议新建一个demo,项目较为简单)
设置
->安全
->选择开启服务端口
- cmd进入微信开发者工具的安装目录,输入
./cli.bat --auto 项目绝对路径 --auto-port 9420
出现以下即代表成功:
此时会弹出微信开发者工具和模拟器
(若没有弹出微信开发者工具请检查前面的所有操作或升级微信开发者工具版本)
编写自动化测试代码
- 新建一个js文件
- 编写测试代码以上脚本的改变于微信小程序官方文档,功能为打开首页,点击第一个image标签。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36const automator = require('miniprogram-automator');//引入自动化工具
automator.connect({
wsEndpoint: 'ws://localhost:9420',//连接到9420端口
}).then(async miniProgram => {//连接成功
// 从首页重启
const page = await miniProgram.reLaunch('/pages/index/index')
// const joinBtn = await page.$$('.index__card')
// await joinBtn[0].tap()//点击事件
// let enterPage = await miniProgram.reLaunch('/pages/joinConference/index')//加入会议页面
const img = await page.$$('image')//获取标签名为image的集合
// await input[0].trigger('input',{value: 12312312})//input框输入事件,这里的第二个参数对应小程序event事件中的detail下的对象
// await page.waitFor(500)//等待500ms
// await input[0].trigger('blur')
// await page.waitFor(500)
// await input[2].trigger('input',{value: 1234})
// await page.waitFor(500)
// await input[2].trigger('blur')
// await page.waitFor(500)
// const button = await enterPage.$('button')
await img[0].tap()
// const page = await miniProgram.reLaunch('/pages/index/index')
// const input = await page.$('input')
// // console.log(await page.data())//获取页面的data数据
// await page.setData({motto: '12242342'})//通过修改直接修改data数据
// await input.trigger('change',{a: '23433534647687990'})//输入框改变的事件
// const test = await page.$('test')//组件
// await test.trigger('test',{a: '12423423'})
// console.log(await test.callMethod('methods'))//组件的事件
}).catch(e => {
console.log('catch a error', e);
}); - 运行代码
在js脚本编辑器终端输入命令:node js脚本的路径
(编辑器IDE不限,webstorm等前端开发工具均可,此处展示的是VSCode)
将会看到用户头像被点击,跳转到logs界面(使用的微信小程序代码为官方样例代码,新建工程时默认)
更多资料见:https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html
底部有界面元素的提取规则