摘要：前言年月號微信小程序正式上線，小程序不需要安裝就能使用，依托微信強大的生態環境，能做到很多所不能做的事情。當然更希望的是小程序官方能給出相應的單元測試方案吧。

2017年1月9號微信小程序正式上線，小程序不需要安裝就能使用，依托微信強大的生態環境，能做到很多H5所不能做的事情。從微信小程序發布這段時間，陸陸續續開發了不少小程序相關的項目，總結了一些通用性的組件，但是對于小程序如何做測試，依然是一頭霧水，直到做了不少的項目，積累的一些經驗和開源庫之后才理清如何做測試，下面將會介紹如何對小程序做UI測試和單元測試。

node

puppeteer

wept

mocha

chai

node
這個應該不用多做介紹了，不過這次demo中要求node版本應該大于7.6.0，因為puppeteer要求最低版本是v6.4.0，但是因為官方示例中大量使用 async/await 等新特性，所以需要使用 v7.6.0 或更高版本的 Node，async/await能讓異步回調代碼更加簡潔，不然整個代碼都是promise.then

puppeteer
Chrome 團隊出品的一款更友好的Headless Chrome Node API，用于代替用戶在頁面上面點擊、拖拽、輸入等多種操作，常見的使用場景還是應用到UI自動化測試，puppeteer可以對頁面進行截圖保存為圖片或者PDF，解決爬蟲無法實現的一些操作（異步加載頁面內容） 。

類似的工具：
phantomjs
seleniumhq
nightmare

wept
wept可以讓小程序脫離開發者工具或者微信客戶端直接運行在瀏覽器上面，后臺使用node，提供小程序API的模擬返回（wx.login、wx.getUserInfo等），前端實現了 view 層、service 層和控制層之間的相關通訊邏輯。

mocha
JavaScript測試框架，在瀏覽器和Node環境都可以使用，通過測試框架，可以為你的JavaScript代碼添加相應的測試用例，使得項目代碼更加強健。

chai
Chai是一個BDD/TDD模式的斷言庫，在node和瀏覽器環境都能運行，API通俗易懂，斷言類型和方式豐富，搭配mocha，江湖人戲稱為"抹茶"

npm i -g wept
npm i  --save-dev puppeteer mocha chai

在安裝puppeteer有可能會出現以下報錯

ERROR: Failed to download Chromium r508693! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
Error: Download failed: server returned code 502. URL: https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/508693/chrome-win32.zip
    at ClientRequest.https.get.response (D:chromium
ode_modulespuppeteerutilsChromiumDownloader.js:197:21)
    at Object.onceWrapper (events.js:316:30)
    at emitOne (events.js:115:13)
    at ClientRequest.emit (events.js:210:7)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:565:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:116:23)
    at Socket.socketOnData (_http_client.js:454:20)
    at emitOne (events.js:115:13)
    at Socket.emit (events.js:210:7)
    at ClientRequest.onsocket (D:chromium
ode_moduleshttps-proxy-agentindex.js:181:14)

其實是因為下載完puppeteer包之后有執行node install.js去下載chromium（實驗版chrome），但是由于網絡的原因，下載失敗了，我們可以避免缺省的下載 chromium，通過設置環境變量來阻止set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
然后手動去下載chromium，上面有給出鏈接https://storage.googleapis.co...

直接看官方給出的demo

const puppeteer = require("puppeteer");
(async () => {
  //這里和官方不一樣的就是，需要手動指定chromium目錄所在的地址（上面鏈接下載之后解壓），headless為true則不會打開chromium
  const browser = await puppeteer.launch({executablePath: "/chromium/chrome.exe",headless: false});
  
  //相當于新建選項卡
  const page = await browser.newPage();
  //跳轉到指定URL
  await page.goto("https://example.com");
  //截圖
  await page.screenshot({path: "example.png"});
  //關閉頁面或者選項卡
  await browser.close();
})();

上面幾行代碼其實就是相當于我們日常的一些操作：打開chrome->新建選項卡->輸入url并回車->頁面截圖->保存，也可以看出puppeteer是站在使用者的角度去設計API。

跑通測試demo之后，來試試小程序這邊，首先必須讓小程序跑在chrome上面，就要用到wept了。
1. 直接在小程序根目錄上面執行wept
然后打開chrome，訪問http://localhost:3000/#!pages/index/index ，就可以看到小程序運行在chrome上了，接下來要讓puppeteer去抓取小程序里面的內容，直接上代碼

const puppeteer = require("puppeteer");
const devices = require("puppeteer/DeviceDescriptors");
(async () => {
        const browser = await puppeteer.launch({executablePath: "/chromium/chrome.exe",headless: true});
        const page = await browser.newPage();
        //設置展示的設備https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js
        await page.emulate(devices["iPhone 6"]);
        //多一個參數waitUntil，指跳轉之后等待網絡空閑之后再執行下一步操作，沒有這個的話，截圖很有可能是白屏，因為內容還沒渲染出來
        await page.goto("http://localhost:3000/#!pages/index/index", {waitUntil: "networkidle"});
        //小程序的內容其實是放在一個iframe里面，外面是無法直接抓取到iframe里面的內容，所以這里需要獲取頁面所有的iframe
        const frames = await page.frames();
        //根據iframe的name屬性來獲取正確的iframe
        const weChatFrame = frames.find(f => f.name() === "view-0");
        //在上下文環境中獲取需要抓取的內容
        const outerText = await weChatFrame.evaluate(() => {
        //上下文執行環境，跟H5一致
            const anchors = Array.from(document.querySelectorAll(".container"));
            return anchors.map(anchor => anchor.textContent);
        });
        console.log("the outerText: ", outerText);
        await browser.close();

})();

直接來看頁面執行的效果

這樣我們就能拿到小程序的內容，便于我們后續的單元測試，接下來我們可以加入"抹茶"來測試輸出是否符合預期，先上代碼

const puppeteer = require("puppeteer");
const devices = require("puppeteer/DeviceDescriptors");
const expect = require("chai").expect;
describe("output test", () => {
    it("should return Hello 測試帳號 ", () => {
        (async () => {
            //小程序內容獲取代碼跟上述一致
            //...
            expect(outerText[0]).to.equal("Hello 測試帳號");
            //...
        })
    })
})

運行效果

小程序其實也有上線一個云測試，但是我覺得有個不好的地方，假如你的小程序是依賴于后臺CGI返回數據作為展示，那么你必須先上線CGI才能使用云測試，不夠靈活，更希望有一個能自己mock數據來測試不同情況下的小程序的展示。

本篇文章介紹使用wept和puppeteer來對小程序做E2E測試，對于測試環境和正式環境還是有差異的，比如Object.defineProperty小程序是不支持這個API的，但是測試環境是可以跑通的，當然測試環境下面也可以通過某種方式（比如delete）來禁用不支持小程序的API，從而達到測試環境盡可能的貼近小程序的正式環境。當然更希望的是小程序官方能給出相應的單元測試方案吧。