小程序自動化測試實踐

曾幾何時，大家還不知道什麼是小程序，它到底能幹些什麼，跟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_root> --auto-port <port>const page = await miniProgram.reLaunch('/pages/index/index')
此處是通過調用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 做的自動化測試。
大家對小程序自動化測試有什麼想法和意見，歡迎回復和討論!