【相關學習推薦：
微信小程序教程】背景近期團隊打算做一個小程序自動化測試的工具，期望能夠做到業(yè)務人員操作一遍小程序后，自動還原之前的操作路徑，并且捕獲操作過程中發(fā)生的異常，以此來判斷這次發(fā)布是否會影響小程序的基礎功能。
上述描述看似簡單，但是中間還是有些難點的，第一個難點就是如何在業(yè)務人員操作小程序的時候記錄操作路徑，第二個難點就是如何將記錄的操作路徑進行還原。
自動化 SDK如何將操作路徑還原這個問題，首選官方提供的 SDK：
miniprogram-automator。
小程序自動化 SDK 為開發(fā)者提供了一套通過外部腳本操控小程序的方案，從而實現(xiàn)小程序自動化測試的目的。
通過該 SDK，你可以做到以下事情：
控制小程序跳轉(zhuǎn)到指定頁面獲取小程序頁面數(shù)據(jù)獲取小程序頁面元素狀態(tài)觸發(fā)小程序元素綁定事件往 AppService 注入代碼片段調(diào)用 wx 對象上任意接口...上面的描述都來自官方文檔，建議閱讀后面內(nèi)容之前可以先看看官方文檔，當然如果之前用過 puppeteer ，也可以快速上手，api 基本一致。
下面簡單介紹下 SDK 的使用方式。
// 引入sdkconst automator = require('
miniprogram-automator'
)// 啟動微信開發(fā)者工具automator.launch({
// 微信開發(fā)者工具安裝路徑下的 cli 工具 // Windows下為安裝路徑下的 cli.bat // MacOS下為安裝路徑下的 cli cliPath: '
path/to/cli'
, // 項目地址，即要運行的小程序的路徑 projectPath: '
path/to/project'
, }
).then(async miniProgram => {
// miniProgram 為 IDE 啟動后的實例 // 啟動小程序里的 index 頁面 const page = await miniProgram.reLaunch('
/page/index/index'
) // 等待 500 ms await page.waitFor(500) // 獲取頁面元素 const element = await page.$('
.main-btn'
) // 點擊元素 await element.tap() // 關閉 IDE await miniProgram.close() }
)復制代碼有個地方需要提醒一下：
使用 SDK 之前需要開啟開發(fā)者工具的服務端口，要不然會啟動失敗。
捕獲用戶行為有了還原操作路徑的辦法，接下來就要解決記錄操作路徑的難題了。
在小程序中，并不能像 web 中通過事件冒泡的方式在 window 中捕獲所有的事件，好在小程序所以的頁面和組件都必須通過 Page 、Component 方法來包裝，所以我們可以改寫這兩個方法，攔截傳入的方法，并判斷第一個參數(shù)是否為 event 對象，以此來捕獲所有的事件。
// 暫存原生方法const originPage = Pageconst originComponent = Component// 改寫 PagePage = (params) => {
const names = Object.keys(params) for (const name of names) {
// 進行方法攔截 if (typeof obj[name] === '
function'
) {
params[name] = hookMethod(name, params[name], false) }
}
originPage(params) }
// 改寫 ComponentComponent = (params) => {
if (params.methods) {
const {
methods }
= params const names = Object.keys(methods) for (const name of names) {
// 進行方法攔截 if (typeof methods[name] === '
function'
) {
methods[name] = hookMethod(name, methods[name], true) }
}
}
originComponent(params) }
const hookMethod = (name, method, isComponent) => {
return function(...args) {
const [evt] = args // 取出第一個參數(shù) // 判斷是否為 event 對象 if (evt && evt.target && evt.type) {
// 記錄用戶行為 }
return method.apply(this, args) }
}
復制代碼這里的代碼只是代理了所有的事件方法，并不能用來還原用戶的行為，要還原用戶行為還必須知道該事件類型是否是需要的，比如點擊、長按、輸入。
const evtTypes = [ '
tap'
, // 點擊 '
input'
, // 輸入 '
confirm'
, // 回車 '
longpress'
// 長按]const hookMethod = (name, method) => {
return function(...args) {
const [evt] = args // 取出第一個參數(shù) // 判斷是否為 event 對象 if ( evt && evt.target && evt.type && evtTypes.includes(evt.type) // 判斷事件類型 ) {
// 記錄用戶行為 }
return method.apply(this, args) }
}
復制代碼確定事件類型之后，還需要明確點擊的元素到底是哪個，但是小程序里面比較坑的地方就是，event 對象的 target 屬性中，并沒有元素的類名，但是可以獲取元素的 dataset。
為了準確的獲取元素，我們需要在構建中增加一個步驟，修改 wxml 文件，將所有元素的 class 屬性復制一份到 data-className 中。
復制代碼但是獲取到 class 之后，又會有另一個坑，小程序的自動化測試工具并不能直接獲取頁面里自定義組件中的元素，必須先獲取自定義組件。
{
{
text}
}
復制代碼// 如果直接查找 .toast-close 會得到 nullconst element = await page.$('
.toast-close'
) element.tap() // Error!// 必須先通過自定義組件的 tagName 找到自定義組件// 再從自定義組件中通過 className 查找對應元素const element = await page.$('
toast .toast-close'
) element.tap()復制代碼所以我們在構建操作的時候，還需要為元素插入 tagName。
復制代碼現(xiàn)在我們可以繼續(xù)愉快的記錄用戶行為了。
// 記錄用戶行為的數(shù)組const actions = [];
// 添加用戶行為const addAction = (type, query, value = '
'
) => {
actions.push({
time: Date.now(), type, query, value }
) }
// 代理事件方法const hookMethod = (name, method, isComponent) => {
return function(...args) {
const [evt] = args // 取出第一個參數(shù) // 判斷是否為 event 對象 if ( evt && evt.target && evt.type && evtTypes.includes(evt.type) // 判斷事件類型 ) {
const {
type, target, detail }
= evt const {
id, dataset = {
}
}
= target const {
className = '
'
}
= dataset const {
value = '
'
}
= detail // input事件觸發(fā)時，輸入框的值 // 記錄用戶行為 let query = '
'
if (isComponent) {
// 如果是組件內(nèi)的方法，需要獲取當前組件的 tagName query = `${
this.dataset.tagName}
` }
if (id) {
// id 存在，則直接通過 id 查找元素 query += id }
else {
// id 不存在，才通過 className 查找元素 query += className }
addAction(type, query, value) }
return method.apply(this, args) }
}
復制代碼到這里已經(jīng)記錄了用戶所有的點擊、輸入、回車相關的操作。
但是還有滾動屏幕的操作沒有記錄，我們可以直接代理 Page 的 onPageScroll 方法。
// 記錄用戶行為的數(shù)組const actions = [];
// 添加用戶行為const addAction = (type, query, value = '
'
) => {
if (type === '
scroll'
|| type === '
input'
) {
// 如果上一次行為也是滾動或輸入，則重置 value 即可 const last = this.actions[this.actions.length - 1] if (last && last.type === type) {
last.value = value last.time = Date.now() return }
}
actions.push({
time: Date.now(), type, query, value }
) }
Page = (params) => {
const names = Object.keys(params) for (const name of names) {
// 進行方法攔截 if (typeof obj[name] === '
function'
) {
params[name] = hookMethod(name, params[name], false) }
}
const {
onPageScroll }
= params // 攔截滾動事件 params.onPageScroll = function (...args) {
const [evt] = args const {
scrollTop }
= evt addAction('
scroll'
, '
'
, scrollTop) onPageScroll.apply(this, args) }
originPage(params) }
復制代碼這里有個優(yōu)化點，就是滾動操作記錄的時候，可以判斷一下上次操作是否也為滾動操作，如果是同一個操作，則只需要修改一下滾動距離即可，因為兩次滾動可以一步到位。
同理，輸入事件也是，輸入的值也可以一步到位。
還原用戶行為用戶操作完畢后，可以在控制臺輸出用戶行為的 json 文本，把 json 文本復制出來后，就可以通過自動化工具運行了。
// 引入sdkconst automator = require('
miniprogram-automator'
)// 用戶操作行為const actions = [ {
type: '
tap'
, query: '
goods .title'
, value: '
'
, time: 1596965650000 }
, {
type: '
scroll'
, query: '
'
, value: 560, time: 1596965710680 }
, {
type: '
tap'
, query: '
gotoTop'
, value: '
'
, time: 1596965770000 }
]// 啟動微信開發(fā)者工具automator.launch({
projectPath: '
path/to/project'
, }
).then(async miniProgram => {
let page = await miniProgram.reLaunch('
/page/index/index'
) let prevTime for (const action of actions) {
const {
type, query, value, time }
= action if (prevTime) {
// 計算兩次操作之間的等待時間 await page.waitFor(time - prevTime) }
// 重置上次操作時間 prevTime = time // 獲取當前頁面實例 page = await miniProgram.currentPage() switch (type) {
case '
tap'
: const element = await page.$(query) await element.tap() break;
case '
input'
: const element = await page.$(query) await element.input(value) break;
case '
confirm'
: const element = await page.$(query) await element.trigger('
confirm'
, {
value }
);
break;
case '
scroll'
: await miniProgram.pageScrollTo(value) break;
}
// 每次操作結束后，等待 5s，防止頁面跳轉(zhuǎn)過程中，后面的操作找不到頁面 await page.waitFor(5000) }
// 關閉 IDE await miniProgram.close() }
)復制代碼這里只是簡單的還原了用戶的操作行為，實際運行過程中，還會涉及到網(wǎng)絡請求和 localstorage 的 mock，這里不再展開講述。
同時，我們還可以接入 jest 工具，更加方便用例的編寫。
總結看似很難的需求，只要用心去發(fā)掘，總能找到對應的解決辦法。
另外微信小程序的自動化工具真的有很多坑，遇到問題可以先到小程序社區(qū)去找找，大部分坑都有前人踩過，還有一些一時無法解決的問題只能想其他辦法來規(guī)避。
最后祝愿天下無 bug。
相關學習推薦：
微信公眾號開發(fā)教程以上就是詳解小程序自動化測試的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！
微信
分享相關標簽：
小程序 自動化本文轉(zhuǎn)載于：
juejin，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
學習微信小程序如何使用echarts圖表
下一篇：
沒有了相關文章相關視頻詳解js中nightwatch的自動化測試什么是python自動化怎么提取微信小程序的鏈接小程序如何生成二維碼微信小程序?qū)崿F(xiàn)簽到的日歷功能詳解小程序自動化測試小程序API接口（一）第三方平臺開發(fā)小程序（二）（歐陽克）微信小程序與CMS后臺認識小程序開發(fā)工具 [溫州做小程序]