關(guān)于小程序自動(dòng)化測(cè)試的案例分析

// 引入sdk
const automator = require('miniprogram-automator')

// 啟動(dòng)微信開發(fā)者工具
automator.launch({
 // 微信開發(fā)者工具安裝路徑下的 cli 工具
 // Windows下為安裝路徑下的 cli.bat
 // MacOS下為安裝路徑下的 cli
 cliPath: 'path/to/cli',
 // 項(xiàng)目地址，即要運(yùn)行的小程序的路徑
 projectPath: 'path/to/project',
}).then(async miniProgram => { // miniProgram 為 IDE 啟動(dòng)后的實(shí)例
 // 啟動(dòng)小程序里的 index 頁(yè)面
 const page = await miniProgram.reLaunch('/page/index/index')
 // 等待 500 ms
 await page.waitFor(500)
 // 獲取頁(yè)面元素
 const element = await page.$('.main-btn')
 // 點(diǎn)擊元素
 await element.tap()
 // 關(guān)閉 IDE
 await miniProgram.close()
})

// 暫存原生方法
const originPage = Page
const originComponent = Component

// 改寫 Page
Page = (params) => {
 const names = Object.keys(params)
 for (const name of names) {
 // 進(jìn)行方法攔截
 if (typeof obj[name] === 'function') {
  params[name] = hookMethod(name, params[name], false)
 }
 }
 originPage(params)
}
// 改寫 Component
Component = (params) => {
 if (params.methods) {
  const { methods } = params
  const names = Object.keys(methods)
  for (const name of names) {
  // 進(jìn)行方法攔截
  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 // 取出第一個(gè)參數(shù)
 // 判斷是否為 event 對(duì)象
 if (evt && evt.target && evt.type) {
  // 記錄用戶行為
 }
 return method.apply(this, args)
 }
}

const evtTypes = [
 'tap', // 點(diǎn)擊
 'input', // 輸入
 'confirm', // 回車
 'longpress' // 長(zhǎng)按
]
const hookMethod = (name, method) => {
 return function(...args) {
 const [evt] = args // 取出第一個(gè)參數(shù)
 // 判斷是否為 event 對(duì)象
 if (
  evt && evt.target && evt.type &&
  evtTypes.includes(evt.type) // 判斷事件類型
 ) {
  // 記錄用戶行為
 }
 return method.apply(this, args)
 }
}

<!-- 構(gòu)建前 -->
<view class="close-btn"></view>
<view class="{{mainClassName}}"></view>
<!-- 構(gòu)建后 -->
<view class="close-btn" data-className="close-btn"></view>
<view class="{{mainClassName}}" data-className="{{mainClassName}}"></view>

<!-- Page -->
<toast text="loading" show="{{showToast}}" />
<!-- Component -->
<view class="toast" wx:if="{{show}}">
 <text class="toast-text">{{text}}</text>
 <view class="toast-close" />
</view>

// 如果直接查找 .toast-close 會(huì)得到 null
const element = await page.$('.toast-close')
element.tap() // Error!

// 必須先通過自定義組件的 tagName 找到自定義組件
// 再?gòu)淖远x組件中通過 className 查找對(duì)應(yīng)元素
const element = await page.$('toast .toast-close')
element.tap()

<!-- 構(gòu)建前 -->
<view class="close-btn" />
<toast text="loading" show="{{showToast}}" />
<!-- 構(gòu)建后 -->
<view class="close-btn" data-className="close-btn" data-tagName="view" />
<toast text="loading" show="{{showToast}}" data-tagName="toast" />

// 記錄用戶行為的數(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 // 取出第一個(gè)參數(shù)
 // 判斷是否為 event 對(duì)象
 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ā)時(shí)，輸入框的值
  // 記錄用戶行為
  let query = ''
  if (isComponent) {
  // 如果是組件內(nèi)的方法，需要獲取當(dāng)前組件的 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)
 }
}

// 記錄用戶行為的數(shù)組
const actions = [];
// 添加用戶行為
const addAction = (type, query, value = '') => {
 if (type === 'scroll' || type === 'input') {
 // 如果上一次行為也是滾動(dòng)或輸入，則重置 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) {
 // 進(jìn)行方法攔截
 if (typeof obj[name] === 'function') {
  params[name] = hookMethod(name, params[name], false)
 }
 }
 const { onPageScroll } = params
 // 攔截滾動(dòng)事件
 params.onPageScroll = function (...args) {
 const [evt] = args
 const { scrollTop } = evt
 addAction('scroll', '', scrollTop)
 onPageScroll.apply(this, args)
 }
 originPage(params)
}

// 引入sdk
const 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 }
]

// 啟動(dòng)微信開發(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) {
  // 計(jì)算兩次操作之間的等待時(shí)間
  await page.waitFor(time - prevTime)
 }
 // 重置上次操作時(shí)間
 prevTime = time
 
 // 獲取當(dāng)前頁(yè)面實(shí)例
 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;
 }
 // 每次操作結(jié)束后，等待 5s，防止頁(yè)面跳轉(zhuǎn)過程中，后面的操作找不到頁(yè)面
 await page.waitFor(5000)
 }

 // 關(guān)閉 IDE
 await miniProgram.close()
})