AAAA&

11月

小程序測(cè)試方案初探

1922

作者：鄒世杰

前言

2017年1月9號(hào)微信小程序正式上線，小程序不需要安裝就能使用，依托微信強(qiáng)大的生態(tài)環(huán)境，能做到很多H5所不能做的事情。從微信小程序發(fā)布這段時(shí)間，陸陸續(xù)續(xù)開(kāi)發(fā)了不少小程序相關(guān)的項(xiàng)目，總結(jié)了一些通用性的組件，但是對(duì)于小程序如何做測(cè)試，依然是一頭霧水，直到做了不少的項(xiàng)目，積累的一些經(jīng)驗(yàn)和開(kāi)源庫(kù)之后才理清如何做測(cè)試，下面將會(huì)介紹如何對(duì)小程序做UI測(cè)試和單元測(cè)試。

工具的準(zhǔn)備

node
puppeteer
wept
mocha
chai

介紹

node

這個(gè)應(yīng)該不用多做介紹了，不過(guò)這次demo中要求node版本應(yīng)該大于7.6.0，因?yàn)閜uppeteer要求最低版本是v6.4.0，但是因?yàn)楣俜绞纠写罅渴褂?async/await 等新特性，所以需要使用 v7.6.0 或更高版本的 Node，async/await能讓異步回調(diào)代碼更加簡(jiǎn)潔，不然整個(gè)代碼都是promise.then

puppeteer

Chrome 團(tuán)隊(duì)出品的一款更友好的Headless Chrome Node API，用于代替用戶在頁(yè)面上面點(diǎn)擊、拖拽、輸入等多種操作，常見(jiàn)的使用場(chǎng)景還是應(yīng)用到UI自動(dòng)化測(cè)試，puppeteer可以對(duì)頁(yè)面進(jìn)行截圖保存為圖片或者PDF，解決爬蟲(chóng)無(wú)法實(shí)現(xiàn)的一些操作（異步加載頁(yè)面內(nèi)容）。

類(lèi)似的工具：

phantomjs
seleniumhq
nightmare

wept

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

mocha

JavaScript測(cè)試框架，在瀏覽器和Node環(huán)境都可以使用，通過(guò)測(cè)試框架，可以為你的JavaScript代碼添加相應(yīng)的測(cè)試用例，使得項(xiàng)目代碼更加強(qiáng)健。

chai

Chai是一個(gè)BDD/TDD模式的斷言庫(kù)，在node和瀏覽器環(huán)境都能運(yùn)行，API通俗易懂，斷言類(lèi)型和方式豐富，搭配mocha，江湖人戲稱為”抹茶“

配置環(huán)境

npm i -g wept

npm i —save-dev puppeteer mocha chai

在安裝puppeteer有可能會(huì)出現(xiàn)以下報(bào)錯(cuò)

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\node_modules\puppeteer\utils\ChromiumDownloader.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\node_modules\https-proxy-agent\index.js:181:14)

其實(shí)是因?yàn)橄螺d完puppeteer包之后有執(zhí)行node install.js去下載chromium（實(shí)驗(yàn)版chrome），但是由于網(wǎng)絡(luò)的原因，下載失敗了，我們可以避免缺省的下載 chromium，通過(guò)設(shè)置環(huán)境變量來(lái)阻止set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

然后手動(dòng)去下載chromium，上面有給出鏈接 https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/508693/chrome-win32.zip

TODO

直接看官方給出的demo

const puppeteer = require('puppeteer');
(async () => {
  //這里和官方不一樣的就是，需要手動(dòng)指定chromium目錄所在的地址（上面鏈接下載之后解壓），headless為true則不會(huì)打開(kāi)chromium
  const browser = await puppeteer.launch({executablePath: '/chromium/chrome.exe',headless: false});

  //相當(dāng)于新建選項(xiàng)卡
  const page = await browser.newPage();
  //跳轉(zhuǎn)到指定URL
  await page.goto('https://example.com');
  //截圖
  await page.screenshot({path: 'example.png'});
  //關(guān)閉頁(yè)面或者選項(xiàng)卡
  await browser.close();
})();

上面幾行代碼其實(shí)就是相當(dāng)于我們?nèi)粘５囊恍┎僮鳎?打開(kāi)chrome->新建選項(xiàng)卡->輸入url并回車(chē)->頁(yè)面截圖->保存，也可以看出puppeteer是站在使用者的角度去設(shè)計(jì)API。

跑通測(cè)試demo之后，來(lái)試試小程序這邊，首先必須讓小程序跑在chrome上面，就要用到wept了。

1. 直接在小程序根目錄上面執(zhí)行wept

然后打開(kāi)chrome，訪問(wèn) http://localhost:3000/#!pages/index/index ，就可以看到小程序運(yùn)行在chrome上了，接下來(lái)要讓puppeteer去抓取小程序里面的內(nèi)容，直接上代碼

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();
        //設(shè)置展示的設(shè)備https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js
        await page.emulate(devices['iPhone 6']);
        //多一個(gè)參數(shù)waitUntil，指跳轉(zhuǎn)之后等待網(wǎng)絡(luò)空閑之后再執(zhí)行下一步操作，沒(méi)有這個(gè)的話，截圖很有可能是白屏，因?yàn)閮?nèi)容還沒(méi)渲染出來(lái)
        await page.goto('http://localhost:3000/#!pages/index/index', {waitUntil: 'networkidle'});
        //小程序的內(nèi)容其實(shí)是放在一個(gè)iframe里面，外面是無(wú)法直接抓取到iframe里面的內(nèi)容，所以這里需要獲取頁(yè)面所有的iframe
        const frames = await page.frames();
        //根據(jù)iframe的name屬性來(lái)獲取正確的iframe
        const weChatFrame = frames.find(f => f.name() === 'view-0');
        //在上下文環(huán)境中獲取需要抓取的內(nèi)容
        const outerText = await weChatFrame.evaluate(() => {
        //上下文執(zhí)行環(huán)境，跟H5一致
            const anchors = Array.from(document.querySelectorAll('.container'));
            return anchors.map(anchor => anchor.textContent);
        });
        console.log('the outerText: ', outerText);
        await browser.close();

})();

直接來(lái)看頁(yè)面執(zhí)行的效果

這樣我們就能拿到小程序的內(nèi)容，便于我們后續(xù)的單元測(cè)試，接下來(lái)我們可以加入”抹茶”來(lái)測(cè)試輸出是否符合預(yù)期，先上代碼

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

運(yùn)行效果

結(jié)語(yǔ)

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

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