全站最牛最细，小程序自动化测试入门到实践，手把手进阶成大L佬

本文主要是介绍全站最牛最细，小程序自动化测试入门到实践，手把手进阶成大L佬，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前言

随着小程序项目越来越复杂，业务场景越来多，花费在回归测试上的时间会越来越多，前端自动化测试就非常有必要提上日程。

今天要带来的是: 小程序自动化测试入门教程

二、环境

系统 ：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

到此，我们已经可以写测试用例了。这只是入门系列，后续会持续更文

---

这篇关于全站最牛最细，小程序自动化测试入门到实践，手把手进阶成大L佬的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---