前言
根据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。