瀏覽器領(lǐng)域，我們有如selenium和puppeteer這樣的庫(kù)，可以自動(dòng)化控制瀏覽器執(zhí)行自動(dòng)化腳本，以完成自動(dòng)化端對(duì)端測(cè)試、定時(shí)自動(dòng)化任務(wù)等。隨著持續(xù)集成、持續(xù)部署也就是CI/CD的需求日益增長(zhǎng)，自動(dòng)化也成為必不可少的一環(huán)。

對(duì)于日益增長(zhǎng)的小程序開(kāi)發(fā)需求，我們能不能自動(dòng)化控制小程序呢，進(jìn)而達(dá)成自動(dòng)測(cè)試、自動(dòng)發(fā)布等任務(wù)呢？

針對(duì)微信小程序，自2019年5月，微信官方也開(kāi)始提供了一個(gè)官方的自動(dòng)化SDK： miniprogram-automator 。這是一個(gè)通過(guò)NodeJS操控開(kāi)發(fā)者工具以及遠(yuǎn)程真機(jī)中微信的SDK。通過(guò)這個(gè)SDK，可以控制小程序跳轉(zhuǎn)到指定頁(yè)面、獲取小程序頁(yè)面數(shù)據(jù)、獲取小程序頁(yè)面元素狀態(tài)、觸發(fā)小程序元素綁定事件、往 AppService 注入代碼片段、調(diào)用 wx 對(duì)象上任意接口等等。

這個(gè)SDK通過(guò)腳本控制本機(jī)的微信開(kāi)發(fā)者工具來(lái)近似達(dá)到自動(dòng)化測(cè)試業(yè)務(wù)的目的，同時(shí)，也可通過(guò)遠(yuǎn)程控制真機(jī)，達(dá)到真機(jī)測(cè)試的目的。

原理與初步體驗(yàn)

我們首先來(lái)體驗(yàn)一下這個(gè)SDK。

首先，你需要確保你安裝了微信開(kāi)發(fā)者工具，并且版本大于1.02.1907232，并設(shè)置你的基礎(chǔ)庫(kù)版本在2.7.3以上，同時(shí)請(qǐng)安裝NodeJS 8.0以上的版本。

我們知道，微信開(kāi)發(fā)者工具提供了命令行與 HTTP 服務(wù)兩種接口供外部調(diào)用，開(kāi)發(fā)者可以通過(guò)命令行或 HTTP 請(qǐng)求指示工具進(jìn)行登錄、預(yù)覽、上傳等操作。

SDK通過(guò)命令行方式將微信開(kāi)發(fā)者工具調(diào)起，再通過(guò)外部方式導(dǎo)入目標(biāo)項(xiàng)目。微信開(kāi)發(fā)者工具通過(guò)讀取目標(biāo)項(xiàng)目的project.config.js，初始化項(xiàng)目。并讀取啟動(dòng)命令的 --auto-port 參數(shù)，使得SDK可以通過(guò)此端口的Websocket服務(wù)，實(shí)現(xiàn)與對(duì)應(yīng)的目標(biāo)小程序調(diào)試窗口進(jìn)行交互。

這就是 miniprogram-automator 工作的大致原理。

感興趣的讀者可以嘗試使用微信開(kāi)發(fā)者工具的cli方式來(lái)嘗試運(yùn)行此命令。

cli auto --project { 項(xiàng)目路徑 } --auto-port { websocket的端口 }

為了運(yùn)行上述命令，我們需要找到微信開(kāi)發(fā)者工具的安裝目錄。不同的操作系統(tǒng)位置不同。Mac位于:<安裝路徑>/Contents/MacOS/cli，windows位于: <安裝路徑>/cli.bat。對(duì)于經(jīng)常使用的讀者，建議將cli所在的目錄放在系統(tǒng)的環(huán)境變量中。

你可能遇到IDE服務(wù)超時(shí)的情況。因此，為了保證開(kāi)發(fā)者工具能夠通過(guò)命令行打開(kāi)，需要將開(kāi)發(fā)者工具的HTTP服務(wù)調(diào)用接口打開(kāi)。

打開(kāi)的方式是，進(jìn)入微信開(kāi)發(fā)者工具，選擇：設(shè)置 > 安全設(shè)置。在服務(wù)端口中選擇：打開(kāi)。此時(shí)，微信開(kāi)發(fā)者工具會(huì)自動(dòng)指定一個(gè)可用的端口號(hào)。

細(xì)心的讀者會(huì)發(fā)現(xiàn)這里又出現(xiàn)了一個(gè)“端口”。不同于上面提到的端口，這個(gè)端口是IDE提供對(duì)外服務(wù)的端口。如上圖所示，36146是IDE服務(wù)的端口。你在啟動(dòng)IDE之后，可以訪問(wèn) http://127.0.0.1:36146/open

你的IDE就會(huì)聚焦到你的面前。 http://127.0.0.1:36146/ 是IDE服務(wù)的根域名，open是命令，讀者可以參考 命令索引 通過(guò)不同的URL發(fā)出不同的命令。

好，安裝好了SDK，我們來(lái)操練一下：

首先，我們init一個(gè)npm庫(kù)如 auto ，通過(guò)： npm i miniprogram-automator --save-dev 或 yarn add miniprogram-automator --dev 即可安裝 miniprogram-automator 。

接下來(lái)，我們下載一個(gè) 微信示例程序 ，并解壓在~/demo-miniapp/

下面，我們新建一個(gè)文件，如index.js，內(nèi)容如下：

const automator = require('miniprogram-automator')

automator.launch({
  projectPath: '~/demo-miniapp/', // 項(xiàng)目文件地址
}).then(async miniProgram => {
  const page = await miniProgram.reLaunch('/page/tabBar/component/index')
  await page.waitFor(500)
  const element = await page.$('.kind-list-text')
  console.log(await element.attribute('class'))
  await element.tap()
  await page.waitFor(500)

  await miniProgram.close()
})

現(xiàn)在，讓我們運(yùn)行起來(lái)。 node index.js 。我們看到，IDE自動(dòng)啟動(dòng)，并加載了我們的項(xiàng)目文件，并自動(dòng)地點(diǎn)開(kāi)了第一個(gè)項(xiàng)目，過(guò)一段時(shí)間之后，程序自動(dòng)的退出。

這就是我們對(duì)于自動(dòng)運(yùn)行的初步體驗(yàn)。

API組成

截至目前（2020年4月初）最新的SDK的API主要分四個(gè)模塊：Automater、MiniProgram、Page和Element等。

Automator 模塊提供了啟動(dòng)及連接開(kāi)發(fā)者工具的方法。開(kāi)發(fā)者可以對(duì)連接地址、端口號(hào)、項(xiàng)目路徑等作出設(shè)置。歸根結(jié)底是對(duì)于cli的包裝。詳見(jiàn)： Automator

MiniProgram提供對(duì)小程序的控制。提供以下幾類支持，詳見(jiàn)： MiniProgram ：

• 路由方法?？刂菩〕绦虻奶D(zhuǎn)
• 系統(tǒng)信息。與API的wx.getSystemInfo等價(jià)
• 轉(zhuǎn)調(diào)、mock以及恢復(fù)微信API對(duì)象wx上的方法
• 在APP對(duì)象上注入方法、向小程序暴露方法
• 截圖、滾動(dòng)等方法
• 測(cè)試真機(jī)、截圖、測(cè)試賬號(hào)、關(guān)閉等方法
• 打印事件、報(bào)錯(cuò)事件

Page 模塊提供了控制小程序頁(yè)面的方法。提供以下幾類支持，詳見(jiàn)： Page ：

• 頁(yè)面路徑方法
• 頁(yè)面元素選取方法
• 頁(yè)面元素/邏輯鉤子方法
• 頁(yè)面數(shù)組方法
• 頁(yè)面行為方法
• 頁(yè)面方法調(diào)用代理

Element 模塊提供了控制小程序頁(yè)面元素的方法。提供以下幾類支持，詳見(jiàn)： Element ：

• 元素本身屬性獲取方法
• 元素子代與后繼選擇器方法
• 元素事件觸發(fā)方法
• 元素?cái)?shù)據(jù)訪問(wèn)方法
• 元素方法訪問(wèn)代理方法

可以看出，除Automator之外，每個(gè)API模塊都在自己的領(lǐng)域內(nèi)提供對(duì)小程序自身內(nèi)容的訪問(wèn)特性以及擴(kuò)充特性。這比較類似于Pupputeer的API設(shè)定。

與測(cè)試框架的整合

miniprogram-automator 本身不提供測(cè)試框架，我們可以選用熟悉的測(cè)試框架與之整合。這里我們以jest為例。其他諸如mocha、jasmine、Cucumber都比較類似。

現(xiàn)在，在我們之前的項(xiàng)目 auto 里安裝jest。 npm i jest -g 或 yarn global add jest

簡(jiǎn)單科普下jest的工作原理。在項(xiàng)目中，jest識(shí)別三種測(cè)試文件：

• 以.test.js結(jié)尾的文件
• 以.spec.js結(jié)尾的文件
• 放到 tests 文件夾中的文件。

Jest 在進(jìn)行測(cè)試的時(shí)候，它會(huì)在整個(gè)項(xiàng)目進(jìn)行查找，只要碰到這三種文件它都會(huì)執(zhí)行。Jest有以下設(shè)定：

• 一個(gè)describe塊稱為一個(gè)“測(cè)試套件”。
• 一個(gè)it/test塊，稱為“測(cè)試用例”。測(cè)試用例是測(cè)試的最小單位。
• 每個(gè)測(cè)試文件應(yīng)至少包含一個(gè)describe或一個(gè)it/test塊。
• 一個(gè)describe塊應(yīng)至少包含一個(gè)或多個(gè)it/test塊。
• 每個(gè)測(cè)試用例，可以組合各種斷言來(lái)判定是否符合預(yù)期。

Jest 測(cè)試提供了一些測(cè)試的生命周期 API。可以輔助我們?cè)诿總€(gè) case 的開(kāi)始和結(jié)束做一些處理。 這樣，在進(jìn)行一些和數(shù)據(jù)相關(guān)的測(cè)試時(shí)，可以在測(cè)試前準(zhǔn)備一些數(shù)據(jù)，在測(cè)試后，清理測(cè)試數(shù)據(jù)。 4 個(gè)主要的生命周期函數(shù)：

1. afterAll(fn, timeout): 當(dāng)前文件中的所有測(cè)試執(zhí)行完成后執(zhí)行 fn, 如果 fn 是 promise，jest 會(huì)等待 timeout 毫秒，默認(rèn) 5000
2. afterEach(fn, timeout): 每個(gè) test 執(zhí)行完后執(zhí)行 fn，timeout 含義同上
3. beforeAll(fn, timeout): 同 afterAll，不同之處在于在所有測(cè)試開(kāi)始前執(zhí)行
4. beforeEach(fn, timeout): 同 afterEach，不同之處在于在每個(gè)測(cè)試開(kāi)始前執(zhí)行

回到 miniprogram-automator 。我們可以在 auto 項(xiàng)目中加入一個(gè)index.spec.js文件。

const automator = require('miniprogram-automator')
let miniProgram, page

beforeAll(async () => {
    miniProgram = await automator.launch({
        projectPath: '/Users/liuguanyu/devspace/demo-miniapp/'
    })
    page = await miniProgram.reLaunch('/page/tabBar/component/index')
    await page.waitFor(500)
}, 50000)

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

現(xiàn)在，你在 auto 下運(yùn)行 jest 會(huì)報(bào)錯(cuò)。

意思是需要我們?cè)黾又辽僖粋€(gè)測(cè)試套件或測(cè)試用例。

為此我們?cè)黾右粋€(gè)測(cè)試套件，并增加一些測(cè)試用例，修改如下：

const automator = require('miniprogram-automator')
let miniProgram, page

beforeAll(async () => {
    miniProgram = await automator.launch({
        projectPath: '/Users/liuguanyu/devspace/demo-miniapp/'
    })
    page = await miniProgram.reLaunch('/page/tabBar/component/index')
    await page.waitFor(500)
}, 50000)

describe("測(cè)試微信小程序", () => {
    // 1. 測(cè)試頂部描述
    it("標(biāo)題欄", async () => {
        const desc = await page.$('.index-desc')
        // 要求測(cè)試標(biāo)簽名必須為view
        expect(desc.tagName).toBe('view')
        // 要求測(cè)試內(nèi)容包含文字以下將展示小程序官方組件能力
        expect(await desc.text()).toContain('以下將展示小程序官方組件能力')
    })

    // 2. 測(cè)試列表項(xiàng)
    it('列表項(xiàng)', async () => {
        const lists = await page.$$('.kind-list-item')
        // 測(cè)試共有7個(gè)列表項(xiàng)
        expect(lists.length).toBe(7)
        const list = await lists[0].$('.kind-list-item-hd')
        //第一個(gè)列表元素的標(biāo)題應(yīng)該是“視圖窗器”
        expect(await list.text()).toBe('視圖容器')
    })

    // 3. 測(cè)試列表項(xiàng)行為
    it('列表行為', async () => {
        const listHead = await page.$('.kind-list-item-hd')

        // 點(diǎn)擊應(yīng)展開(kāi)未展開(kāi)項(xiàng)
        expect(await listHead.attribute('class')).toBe('kind-list-item-hd')
        await listHead.tap()
        await page.waitFor(200)
        expect(await listHead.attribute('class')).toBe(
            'kind-list-item-hd kind-list-item-hd-show',
        )

        // 再次點(diǎn)擊應(yīng)合上
        await listHead.tap()
        await page.waitFor(200)
        expect(await listHead.attribute('class')).toBe('kind-list-item-hd')

        // 點(diǎn)擊子列表項(xiàng)應(yīng)該會(huì)跳轉(zhuǎn)到指定頁(yè)面
        await listHead.tap()
        await page.waitFor(200)
        const item = await page.$('.index-bd navigator')
        await item.tap()
        await page.waitFor(1500)
        expect((await miniProgram.currentPage()).path).toBe('page/component/pages/view/view')
    })

    // 4. 驗(yàn)證wxml方法和setData方法及快照比對(duì)
    it('驗(yàn)證WXML', async () => {
        const element = await page.$('page')
        expect(await element.wxml()).toMatchSnapshot()
        await page.setData({
            list: []
        })
        expect(await element.wxml()).toMatchSnapshot()
    })

    // 5. mock方法測(cè)試并還原
    it('偽造請(qǐng)求結(jié)果', async () => {
        // 偽造請(qǐng)求數(shù)據(jù)
        const mockData = [{
            rule: 'testRequest',
            result: {
                data: 'test',
                cookies: [],
                header: {},
                statusCode: 200,
            }
        }]

        // mock方法
        await miniProgram.mockWxMethod(
            'request',
            function (obj, data) {
                for (let i = 0, len = data.length; i < len; i++) {
                    const item = data[i]
                    const rule = new RegExp(item.rule)
                    if (rule.test(obj.url)) {
                        return item.result
                    }

                    // 沒(méi)命中規(guī)則的真實(shí)訪問(wèn)后臺(tái)
                    return new Promise(resolve => {
                        obj.success = res => resolve(res)
                        obj.fail = res => resolve(res)
                        this.origin(obj)
                    })
                }
            },
            mockData
        )

        // 請(qǐng)求mock的方法
        const result = await miniProgram.callWxMethod('request', {
            url: 'https://14592619.qcloud.la/testRequest',
        })
        expect(result.data).toBe('test')
        // 還原方法
        await miniProgram.restoreWxMethod('request')
    }, 30000)
})

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

此時(shí)，我們?cè)?nbsp;auto 目錄下再次運(yùn)行 jest ，則得到如下結(jié)果：

我們看到所有的測(cè)試都已通過(guò)。

真機(jī)測(cè)試

真機(jī)測(cè)試可以自動(dòng)測(cè)試以及掃碼測(cè)試。此時(shí)可以在beforeAll里面加入 await miniProgram.remote(true) 。這個(gè)true如果不寫(xiě)，就需要用真機(jī)掃碼測(cè)試。當(dāng)編譯好之后，開(kāi)發(fā)者工具會(huì)自動(dòng)將小程序和調(diào)試工具發(fā)送到真機(jī)。并在側(cè)邊增加了測(cè)試條。

當(dāng)不寫(xiě)true時(shí)候，運(yùn)行到remote時(shí)，會(huì)彈出這樣的對(duì)話框：

小結(jié)

發(fā)布3年多，微信小程序已經(jīng)從微信生態(tài)的一環(huán)，逐步向多領(lǐng)域滲透。隨著開(kāi)發(fā)者的日益增多，面向開(kāi)發(fā)的工具也逐步完善。本文試圖管中窺豹，給大家介紹了微信自動(dòng)化的主要環(huán)節(jié)。時(shí)至今日，小程序已經(jīng)成長(zhǎng)為一種重要的產(chǎn)品形式和生態(tài)環(huán)境。越來(lái)越多的小程序平臺(tái)正在自己的領(lǐng)域以不同的形式給小程序這個(gè)產(chǎn)品形式添磚加瓦。小程序生態(tài)和開(kāi)發(fā)環(huán)節(jié)的完善和成長(zhǎng)，也需要廣大平臺(tái)、開(kāi)發(fā)者共同努力，將這一Created in China 的生態(tài)體系發(fā)揚(yáng)光大。