最近沒啥事然後有個不是需求的需求。老大突然間看到了小程序自動化工具,於是讓我研究一下。
微信官方的文檔真的是很簡潔。感覺好多地方都沒說清楚。。。
小程序自動化官方文檔
閒話不多說首先我們要先安裝自動化插件
npm i miniprogram-automator --save-dev
任意打開一個小程序進入到微信開發者工具->設置->安全->選擇開啓服務端口->重新打開開發者工具
說明微信開發者工具端口開啓成功!
接下來我們要開啓連接微信開發者工具服務端口對應的自動化端口(兩個端口是不一樣的)
在開發這工具的安裝目錄下打開命令行工具輸入
./cli.bat --auto C:\Users\洪偉江\Desktop\IT自學\testXCX --auto-port 9420
C:\Users\洪偉江\Desktop\IT自學\testXCX是對應要進行項目自動化的小程序目錄地址;
9420是自動化的端口
命令行出現如下代碼說明自動化開啓成功,屆時會自動啓動微信開發這工具
接下來就可以開始寫我們的自動化腳本了
miniprogram-automator自動化插件是基於node的因此我們需要用node來編寫腳本。
const 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 input = await enterPage.$$('input')//獲取標籤名爲input的集合
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 button.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);
});
編寫完腳本之後再命令行中啓動腳本
接下來就可以看到微信開發者工具的小程序根據你的腳本自動的輸入文字和跳轉了。還可以進行真機調試哦!!!