小程序自動化測試的示例分析

小編給大家分享一下小程序自動化測試的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

背景

近期團隊打算做一個小程序自動化測試的工具，期望能夠做到業務人員操作一遍小程序后，自動還原之前的操作路徑，并且捕獲操作過程中發生的異常，以此來判斷這次發布是否會影響小程序的基礎功能。

上述描述看似簡單，但是中間還是有些難點的，第一個難點就是如何在業務人員操作小程序的時候記錄操作路徑，第二個難點就是如何將記錄的操作路徑進行還原。

自動化 SDK

如何將操作路徑還原這個問題，首選官方提供的 SDK： miniprogram-automator。

小程序自動化 SDK 為開發者提供了一套通過外部腳本操控小程序的方案，從而實現小程序自動化測試的目的。通過該 SDK，你可以做到以下事情：

• 控制小程序跳轉到指定頁面

• 獲取小程序頁面數據

• 獲取小程序頁面元素狀態

• 觸發小程序元素綁定事件

• 往 AppService 注入代碼片段

• 調用 wx 對象上任意接口

• ...

上面的描述都來自官方文檔，建議閱讀后面內容之前可以先看看官方文檔，當然如果之前用過 puppeteer ，也可以快速上手，api 基本一致。下面簡單介紹下 SDK 的使用方式。

// 引入sdkconst automator = require('miniprogram-automator')// 啟動微信開發者工具automator.launch({  // 微信開發者工具安裝路徑下的 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 之前需要開啟開發者工具的服務端口，要不然會啟動失敗。

捕獲用戶行為

有了還原操作路徑的辦法，接下來就要解決記錄操作路徑的難題了。

在小程序中，并不能像 web 中通過事件冒泡的方式在 window 中捕獲所有的事件，好在小程序所以的頁面和組件都必須通過 Page 、Component 方法來包裝，所以我們可以改寫這兩個方法，攔截傳入的方法，并判斷第一個參數是否為 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 // 取出第一個參數
    // 判斷是否為 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 // 取出第一個參數
    // 判斷是否為 event 對象
    if (
      evt && evt.target && evt.type &&
      evtTypes.includes(evt.type) // 判斷事件類型
    ) {      // 記錄用戶行為
    }    return method.apply(this, args)
  }
}復制代碼

確定事件類型之后，還需要明確點擊的元素到底是哪個，但是小程序里面比較坑的地方就是，event 對象的 target 屬性中，并沒有元素的類名，但是可以獲取元素的 dataset。

為了準確的獲取元素，我們需要在構建中增加一個步驟，修改 wxml 文件，將所有元素的 class 屬性復制一份到 data-className 中。

<!-- 構建前 --><view class="close-btn"></view><view class="{{mainClassName}}"></view><!-- 構建后 --><view class="close-btn" data-className="close-btn"></view><view class="{{mainClassName}}" data-className="{{mainClassName}}"></view>復制代碼

但是獲取到 class 之后，又會有另一個坑，小程序的自動化測試工具并不能直接獲取頁面里自定義組件中的元素，必須先獲取自定義組件。

<!-- 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 會得到 nullconst element = await page.$('.toast-close')
element.tap() // Error!// 必須先通過自定義組件的 tagName 找到自定義組件// 再從自定義組件中通過 className 查找對應元素const element = await page.$('toast .toast-close')
element.tap()復制代碼

所以我們在構建操作的時候，還需要為元素插入 tagName。

<!-- 構建前 --><view class="close-btn" /><toast text="loading" show="{{showToast}}" /><!-- 構建后 --><view class="close-btn" data-className="close-btn" data-tagName="view" /><toast text="loading" show="{{showToast}}" data-tagName="toast" />復制代碼

現在我們可以繼續愉快的記錄用戶行為了。

// 記錄用戶行為的數組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 // 取出第一個參數
    // 判斷是否為 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事件觸發時，輸入框的值
      // 記錄用戶行為
      let query = ''
      if (isComponent) {        // 如果是組件內的方法，需要獲取當前組件的 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)
  }
}復制代碼

到這里已經記錄了用戶所有的點擊、輸入、回車相關的操作。但是還有滾動屏幕的操作沒有記錄，我們可以直接代理 Page 的 onPageScroll 方法。

// 記錄用戶行為的數組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)
}復制代碼

這里有個優化點，就是滾動操作記錄的時候，可以判斷一下上次操作是否也為滾動操作，如果是同一個操作，則只需要修改一下滾動距離即可，因為兩次滾動可以一步到位。同理，輸入事件也是，輸入的值也可以一步到位。

還原用戶行為

用戶操作完畢后，可以在控制臺輸出用戶行為的 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 }
]// 啟動微信開發者工具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，防止頁面跳轉過程中，后面的操作找不到頁面
    await page.waitFor(5000)
  }    // 關閉 IDE
  await miniProgram.close()
})復制代碼

這里只是簡單的還原了用戶的操作行為，實際運行過程中，還會涉及到網絡請求和 localstorage 的 mock，這里不再展開講述。同時，我們還可以接入 jest 工具，更加方便用例的編寫。

看完了這篇文章，相信你對“小程序自動化測試的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！