Electron桌面App測試框架Spectron VS Puppeteer

前言

根據TDD（測試驅動開發）的原理，在開發實現某個功能前，先編寫測試代碼，然後再編寫能通過測試代碼的功能代碼，通過測試來驅動整個開發的進行，有助於編寫簡潔可用和高質量的代碼，並加速開發過程。
測試在軟件工程中的重要性已經無需過多闡述了，但在實際開發項目中，使用TDD作爲指導思想的開發項目少之又少，開發人員往往抵觸寫單元測試（老子業務代碼都忙不過來了，哪有時間寫單元測試），因此開發人員對測試領域的相關技術瞭解甚少，作者也是此類開發的其中一員。爲了擴展自己的知識面，也爲了在項目開發過程中，更好的配合測試，降低出bug率。下文以Electron爲基礎，因時間及能力有限，下面只選了能適用或兼容Electron App的三個測試框架Spectron、Puppeteer進行橫評，主要分析框架特點，以及對Electron的支持程度，如果你準備開始Electron相關的測試項目，希望本文會有參考價值。話不多說，馬上開始。

Electron

一句話描述Electron：“使用Web開發的方式（JavaScript、CSS、HTML）來開發平臺兼容的桌面應用”，順帶提一句IDE新星VS Code也是Electron的桌面應用，如果你想深入瞭解Electron是什麼，可以Elcetron官網上的文檔Electron官方文檔

Spectron

介紹

Spectron是Electron官方推薦的測試框架。首先有了官方這層關係，我們就基本上不用擔心在使用過程中出現測試框架不兼容Electron特性的問題，只要在引入Spectron的時候，注意使用與Electron版本兼容即可。
下面附上Electron和Spectron對應關係表

Electron	Spectron
~1.0.0	~3.0.0
~1.1.0	~3.1.0
~1.2.0	~3.2.0
~1.3.0	~3.3.0
~1.4.0	~3.4.0
~1.5.0	~3.5.0
~1.6.0	~3.6.0
~1.7.0	~3.7.0
~1.8.0	~3.8.0
^2.0.0	^4.0.0
^3.0.0	^5.0.0
^4.0.0	^6.0.0
^5.0.0	^7.0.0
^6.0.0	^8.0.0
^7.0.0	^9.0.0
^8.0.0	^10.0.0
^9.0.0	^11.0.0

試用

話不多說，直接開箱試用Spectron

• 第一步：安裝Spectron

npm install spectron --save-dev

安裝過程中，有時候會卡在安裝chromedriver的環節上，原因是googleapis.com 被牆了，這裏有兩種解決方案：一個用代理；一個用taobao的CDN。具體可以參考下面鏈接：https://segmentfault.com/a/1190000008310875

• 第二步：安裝單元測試工具，這裏選用mocha

npm install mocha –save-dev

• 第三步：寫測試用例（啓動Electron App）

 const Application = require('spectron').Application
  const electronPath = require('electron')
  const path = require('path')

  it('launch App', async () => {
    this.app = new Application({
      path: electronPath,
      args: [path.join(__dirname, '../electron/')]
    })
    await this.app.start()
  })

• 第四步：執行測試，查看執行結果
  

試用評價

Spectron提供的API不多，單元測試基本夠用，Electron的支持程度很高，官方推薦的就是香，開箱即用。但社區活躍度則是慘不忍睹，git上只有1.4k Star，萬一踩到奇怪的坑，那估計得花比較多的時間去解決了，另外如果想實現Electron App的UI測試，那還得集成其他模塊，來完成包括截屏，生成測試報告等功能。

接口豐富度	接口易用性	Electron支持	社區活躍度	UI測試
一般	良好	優秀	慘不忍睹	需要另外集成

Puppeteer

介紹

Puppeteer是Google開源的一款高級爬蟲框架，它通過控制devtools來實現對chromium瀏覽器的控制，因爲Electron也是基於Chromium 和 Node.js實現的，因此Puppeteer和Electron可以算是同宗了，雖然不是官方的Electron測試框架，但使用Puppeteer來測試Electron App也是可行的，加上Puppeteer在UI測試上的優異表現，使用Puppeteer來測試Electron App，是十分有意義的一次嘗試。

試用

話不多說，看看如何在Electron項目中集成Puppeteer

• 第一步：在項目中安裝puppeteer-core

npm install puppeteer-core –seve-dev

這裏裝puppeteer-core而不是puppeteer 是因爲electron app打開時，已經會啓動Chromium，puppeteer-core 則不會自動下載Chromium。

• 第二步：打開Electron chrome調試的遠程調試，這樣啓動electron，Puppeteer才能通過連接chromium來關聯到Electron App

./electron --remote-debugging-port=9200

• 第三步：遠程調試模式啓動Electron App，讓puppeteer連接到electron App

const electron = require("electron")
const puppeteer = require("puppeteer-core")
const { spawn } = require("child_process")

spawnedProcess = spawn(electron, ['./electron', `--remote-debugging-port=9200`], {
shell: true
})
app = await puppeteer.connect({
browserURL: `http://localhost:9200`
})

• 第四步：編寫測試用例

const [page] = await app.pages()
const element = page.$('.c-tab-nav-item')
await element.click()
…

試用評價

Puppeteer 本身就是功能強大的前端測試框架，在測試的表現無可挑剔，無論是接口的豐富度和易用性，都是令人滿意的，Puppeteer讓人吐槽最多的無非就是隻支持Chromium，並且只能用nodejs開發，但這些在Electron的基礎上，這些問題就不再是問題了。但是在Electron的支持上，因Puppeteer對Chromium和NodeJs的版本都有要求，因此有些Electron的版本尤其低版本（低於5.0的Electron版本，基本與Puppeteer無緣了）Puppeteer集成不了，另外項目中用到的模塊對NodeJs的版本有要求的，與Puppeteer要求的版本不兼容的，也是不能使用。
Puppeteer社區活躍度也比較高，遇到坑的話，估計已經有人踩過，解決問題成本相對較低。

接口豐富度	接口易用性	Electron支持	社區活躍度	UI測試
高	良好	一般	高	自帶屬性

總結

首先回顧兩個框架的試用對比：

框架	接口豐富度	接口易用性	Electron支持	社區活躍度	UI測試
Spectron	一般	良好	優秀	慘不忍睹	需要另外集成
Puppeteer	高	良好	一般	高	自帶屬性

一句話總結：需要截圖，生成測試報告等高級測試功能的Electron App，建議使用Puppeteer，需注意Node版本和Electron版本；簡單的單元測試，推薦使用Spectron，開箱即用，100%兼容Electron。