小程序自動化測試實踐

曾幾何時，大家還不知道什麼是小程序，它到底能幹些什麼，跟APP有啥區別，跟H5又有啥區別，但是最近幾年，依託於騰訊這顆大樹，已經迅速建立起了小程序良好的生態體系，同時也因為APP市場的飽滿，以及其開發和推廣成本高等問題，目前幾乎所有的互聯網公司的業務都用起了小程序，而且頁面也越來越複雜，涉及的業務場景也越來越多，小程序已經是IT互聯網領域一個舉足輕重的屬性了。

為了應對小程序如火如荼的發展，騰訊在今年5月底推出了miniprogram-automator來支持小程序的自動化測試，本文也主要是基於此項技術來做介紹，讓大家對小程序自動化有個初步的瞭解。

之前小程序自動化的模式

在騰訊推出此項技術之前，其實小程序的自動化測試已經有所開展了，主要有以下幾種方式：

1. 通過APP自動化的工具appium來實現的

2. 通過Airtest來實現

3. 通過FAutoTest來實現

這些方法大同小異，基本上都屬於黑盒自動化方案。此處不做具體介紹，大家可以自行查閱。

純Miniprogram-automator模式

Miniprogram-automator是騰訊自研的一套小程序自動化sdk，原理跟大家熟知的自動化測試框架selenium webdriver類似，只是操作的目標不同而已。

運行環境

• Nodejs版本需要大於8.0
• 小程序基礎庫的版本需要大於等於2.7.3,需要注意的此處不是小程序最低支持的基礎庫的版本，而是本地調試基礎庫的版本

• 開發工具版本 : 1.02.1907232 及以上

SDK安裝

npm i miniprogram-automator --save-dev

​框架支持編寫語言

目前此框架僅支持通過javascript來書寫自動化測試用例。

簡單應用

代碼片段

const automator = require('miniprogram-automator')
const miniProgram = automator.launch({
 cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli',
 projectPath: '/Users/user/Desktop/miniprogram-quickstart-master/miniprogram-quickstart-master',
 }).then(async miniProgram => {
 const page = await miniProgram.reLaunch('/pages/index/index')
 await page.waitFor(500)
 const element = await page.$('.user-motto')
 console.log(await element.text())
 await miniProgram.close() 
})

運行用例

將上述代碼保存到test.js中，然後運行命令如下：

node test.js

代碼講解

const automator = require('miniprogram-automator')

首先需要引入miniprogram-automator自動化包，此處需要注意的是代碼文件和miniprogram-automator包的地址的路徑問題，否則會出現類似Cannot find module 'miniprogram-automator' 這樣的問題出現。

const miniProgram = automator.launch({
 cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli',
 projectPath: '/Users/user/Desktop/miniprogram-quickstart-master/miniprogram-quickstart-master',
 }).then(async miniProgram => {
})

此塊創建了miniProgram的實例，該模塊提供了控制小程序的方法automator.launch用來啟動並連接微信開發者工具。

cliPath: 工具cli位置，默認路徑是/Applications/wechatdevtools.app/Contents/MacOS/cli

projectPath: 項目文件路徑

此處是通過cli命令行來啟動微信開發者工具，要達到此目的，需要注意以下前提條件：

1、確保工具安全設置中已開啟 CLI/HTTP 調用功能。

開發者工具菜單中的設置->安全設置->服務端口

2、開啟小程序自動化功能

cli --auto <project> --auto-port <port>
const page = await 
miniProgram.reLaunch('/pages/index/index')
/<port>/<project>

此處是通過調用miniProgram提供的relaunch方法創建了一個page的實例，page模塊提供了控制小程序頁面的方法，relanch方法會關閉所有的頁面，打開到應用內指定的頁面。裡面中的參數是頁面的路徑，此路徑可以從app.json文件中獲取到。

await page.waitFor(500) 

此處是調用page的waitFor方法，等待直到指定條件成立，方法的參數是number類型，該參數會被當成超時時長，當經過指定時間後，結束等待。這塊屬於隱式等待，如果想進行顯示等待的話，可以傳入string或是function類型。

const element = await page.$('.user-motto')

此處是調用page模塊的$方法，用來獲取頁面元素，參數是元素的選擇器字符串，定位element元素時可以在微信開發者工具調試器中wxml處進行調試。

await miniProgram.close() 

此處調用miniProgram模塊的close方法關閉與小程序運行的連接並且關閉項目窗口。

Miniprogram-automator + Jest模式

Miniprogram-automator 這個僅僅是小程序自動化的sdk，說直白些，僅提供了一些API，並不是真正意義上的測試框架，這意味著上述的代碼僅僅是javascript的代碼片段，而非真正意義上的自動化測試用例，要達到真正書寫自動化測試用例，需要一款測試框架，該框架可以是市面上任意一款node.js的javascript框架。miniprogram-automator負責操作小程序頁面的信息，測試框架負責組織和斷言。

測試框架選取與安裝

此處使用時下比較流行的facebook出品的一款測試框架Jest，該框架集成了眾多框架的功能。

npm i jest -g

簡單應用

代碼片段

const automator = require('miniprogram-automator')
describe('小程序自動化測試初體驗', () => {
let miniProgram
 beforeAll(async () => {
 miniProgram = await automator.launch({
 cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli', 

 projectPath: '/Users/user/Desktop/miniprogram-quickstart-master/miniprogram-quickstart-master', 
 })
 }, 30000)
 it('測試微信用戶座右銘是hello world', async () => {
 const page = await miniProgram.reLaunch('/pages/index/index')
 const user_motto = await page.$('.user-motto')
 expect(await user_motto.text()).toBe('Hello World')
 })
 afterAll(async () => {
 await miniProgram.close()
 })
})

運行用例

將上述代碼保存到quickstart.test.js中，然後運行命令如下：

jest quickstart.test.js

測試結果如下

代碼講解

此處僅講解與純miniprogram-automator模式不一樣的代碼部分。

describe('小程序自動化測試初體驗', () => {
let miniProgram
 beforeAll(async () => {
 miniProgram = await automator.launch({
 cliPath: '/Applications/wechatwebdevtools.app/Contents/MacOS/cli',
 projectPath: '/Users/user/Desktop/miniprogram-quickstart-master/miniprogram-quickstart-master', 
 })
 }, 30000)

因為Jest集成了Mocha,chai,jsdom,sinon等功能，所以這些框架的語法都可以在Jest應用，describe此處就是起test suite的意義。

beforeAll屬於測試生命週期API的一種，用在所有測試用例開始前執行。此方法可以進行一些測試初始化的操作。

30000 屬於設置的Jest的超時時間，因為工具項目窗口啟動初次編譯需要一定時長，Jest 默認 5 秒超時太短，所以需要修改如此。

it('測試微信用戶座右銘是hello world', async () => {
 const page = await miniProgram.reLaunch('/pages/index/index')
 const user_motto = await page.$('.user-motto')
 expect(await user_motto.text()).toBe('Hello World')
​ })

此處屬於具體的測試用例，可以用it，也可以用test關鍵字。

toBe是matcher函數，使用expect和”matcher”函數結合驗證屬於具體的斷言部分。判斷實際得到的結果跟預期結果是否一致。

afterAll(async () => {
 await miniProgram.close()
})

afterAll也屬於測試生命週期API的一種，用來在所有用例執行完畢後執行，此處可以進行一些清理收尾工作。

注：本文是針對小程序快速啟動模板項目https://github.com/wechat-miniprogram/miniprogram-quickstart 做的自動化測試。

大家對小程序自動化測試有什麼想法和意見，歡迎回復和討論!