一、前言
随着小程序项目越来越复杂,业务场景越来多,花费在回归测试上的时间会越来越多,前端自动化测试就非常有必要提上日程。
今天要带来的是: 小程序自动化测试入门教程
二、环境
系统 :macOS
微信开发者工具版本: 1.05.2106300
三、什么是小程序自动化
微信官方文档:小程序自动化
使用小程序自动化 SDK miniprogram-automator,可以在帮助我们在小程序中完成一些事情,比如:控制小程序跳转到指定页面,获取小程序页面数据,获取小程序页面元素状态等。
配合 jest 就可以实现小程序端自动化测试了。
话不多说,我们开始吧
四、准备
1、项目根目录 mini-auto-test-demo 里面准备两个目录 miniprogram 放小程序代码,和 test-e2e 放测试用例代码
|— mini-auto-test-demo/ // 根目录
|— miniprogram/ // 小程序代码
|— pages/
|— index/ // 测试文件
|— test-e2e/ // 测试用例代码
|— index.spec.js // 启动文件
|— package.json
index 文件夹下准备用于测试的页面
<!--index.wxml-->
<view class="userinfo">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</view>
/**index.wxss**/
.userinfo {
margin-top: 50px;
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
userInfo: {},
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
}
})
2、微信开发者工具->设置-> 安全设置 -> 打卡服务端口
3、安装npm包
如果根目录没有 package.json 文件,先执行
npm init
如果根目录已经有 package.json 文件 ,执行以下命令:
npm install miniprogram-automator jest --save-dev
npm i jest -g
安装需要的依赖
4、在根目录下新建index.spec.js 文件
const automator = require('miniprogram-automator')
automator.launch({
cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli', // 工具 cli 位置
projectPath: '/Users/SONG/Documents/github/mini-auto-test-demo/demo1/miniprogram', // 项目文件地址
}).then(async miniProgram => {
const page = await miniProgram.reLaunch('/pages/index/index')
await page.waitFor(500)
const element = await page.$('.userinfo-avatar')
console.log(await element.attribute('class'))
await element.tap()
await miniProgram.close()
})
这里要注意修改为自己的cli位置和项目文件地址:
1、cliPath:
可以在应用程序中找到微信开发者工具,点击右键点击"显示包内容"
找到cli后,快捷键 :command+option+c 复制路径, 就拿到了
2、projectPath:
注意!!项目路径填写的是小程序文件夹miniprogram而不是mini-auto-test-demo
五、启动
写好路径后,在mac终端进入mini-auto-test-demo根目录或 vscode 终端根目录执行命令:
node index.spec.js
你会发现微信开发者工具被自动打开,并执行了点击事件进入了log页面,终端输出了class的值。 到此你已经感受到了自动化
六、自动化测试
在一开始准备的test-e2e 文件夹下新建integration.test.js文件,引入’miniprogram-automator, 连接自动化操作端口,把刚刚index.spec.js中的测试代码,放到 jest it 里,jest相关内容我们这里就不赘述了
const automator = require('miniprogram-automator');
describe('index', () => {
let miniProgram;
let page;
const wsEndpoint = 'ws://127.0.0.1:9420';
beforeAll(async() => {
miniProgram = await automator.connect({
wsEndpoint: wsEndpoint
});
}, 30000);
it('test index', async() => {
page = await miniProgram.reLaunch('/pages/index/index')
await page.waitFor(500)
const element = await page.$('.userinfo-avatar')
console.log(await element.attribute('class'))
await element.tap()
});
});
在package.json scripts 添加命令
"e2e": "jest ./test-e2e integration.test.js --runInBand"
测试代码写好了,接下来如何运行呢?这里我们提另外一个方法。
七、cli 命令行调用
官方文档:命令行调用
你一定会问,刚刚我们不是学习了启动运行,这么还要学另外一种方法呢?
大家都知道,一般团队里都是多人合作的,大家的项目路径都不一样,难道每次还要改projectPath吗?太麻烦了,使用cli就不需要考虑在哪里启动,项目地址在哪里,话不多说,干!
打开终端进入放微信开发者工具cli文件夹(路径仅供参考):
cd /Applications/wechatwebdevtools.app/Contents/MacOS
执行命令(如果你的微信开发者工具开着项目,先关掉)
./cli --auto /Users/SONG/Documents/github/mini-auto-test-demo/miniprogram --auto-port 9420
微信开发者工具通过命令行启动
启动后在项目根目录下执行,可以看到测试通过
npm run e2e
到此,我们已经可以写测试用例了。这只是入门系列,后续会持续更文
![](https://i-blog.csdnimg.cn/blog_migrate/fef7e561bdc476fd69457d01cc6a2bec.jpeg)