前言2017年1月9號微信小程序正式上線,小程序不需要安裝就能使用,依托微信強大的生態(tài)環(huán)境,能做到很多H5所不能做的事情。從微信小程序發(fā)布這段時間,陸陸續(xù)續(xù)開發(fā)了不少小程序相關的項目,總結了一些通用性的組件,但是對于小程序如何做測試,依然是一頭霧水,直到做了不少的項目,積累的一些經驗和開源庫之后才理清如何做測試,下面將會介紹如何對小程序做UI測試和單元測試。 工具的準備
介紹node這個應該不用多做介紹了,不過這次demo中要求node版本應該大于7.6.0,因為puppeteer要求最低版本是v6.4.0,但是因為官方示例中大量使用 async/await 等新特性,所以需要使用 v7.6.0 或更高版本的 Node,async/await能讓異步回調代碼更加簡潔,不然整個代碼都是promise.then puppeteerChrome 團隊出品的一款更友好的Headless Chrome Node API,用于代替用戶在頁面上面點擊、拖拽、輸入等多種操作,常見的使用場景還是應用到UI自動化測試,puppeteer可以對頁面進行截圖保存為圖片或者PDF,解決爬蟲無法實現的一些操作(異步加載頁面內容) 。 類似的工具:
weptwept可以讓小程序脫離開發(fā)者工具或者微信客戶端直接運行在瀏覽器上面,后臺使用node,提供小程序API的模擬返回(wx.login、wx.getUserInfo等),前端實現了 view 層、service 層和控制層之間的相關通訊邏輯。 mochaJavaScript測試框架,在瀏覽器和Node環(huán)境都可以使用,通過測試框架,可以為你的JavaScript代碼添加相應的測試用例,使得項目代碼更加強健。 chaiChai是一個BDD/TDD模式的斷言庫,在node和瀏覽器環(huán)境都能運行,API通俗易懂,斷言類型和方式豐富,搭配mocha,江湖人戲稱為”抹茶“ 配置環(huán)境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\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) 其實是因為下載完puppeteer包之后有執(zhí)行node install.js去下載chromium(實驗版chrome),但是由于網絡的原因,下載失敗了,我們可以避免缺省的下載 chromium,通過設置環(huán)境變量來阻止set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 然后手動去下載chromium,上面有給出鏈接 https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/508693/chrome-win32.zip TODO直接看官方給出的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. 直接在小程序根目錄上面執(zhí)行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,指跳轉之后等待網絡空閑之后再執(zhí)行下一步操作,沒有這個的話,截圖很有可能是白屏,因為內容還沒渲染出來 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'); //在上下文環(huán)境中獲取需要抓取的內容 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(); })(); 直接來看頁面執(zhí)行的效果
這樣我們就能拿到小程序的內容,便于我們后續(xù)的單元測試,接下來我們可以加入”抹茶”來測試輸出是否符合預期,先上代碼 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測試,對于測試環(huán)境和正式環(huán)境還是有差異的,比如Object.defineProperty小程序是不支持這個API的,但是測試環(huán)境是可以跑通的,當然測試環(huán)境下面也可以通過某種方式(比如delete)來禁用不支持小程序的API,從而達到測試環(huán)境盡可能的貼近小程序的正式環(huán)境。當然更希望的是小程序官方能給出相應的單元測試方案吧。 |