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。