继上一篇分享解决了部分问题，本次分享完整的 Macaca 集成 Eletron APP 测试方案。
Macaca 交付过程分析
为了使 Macaca 有测试 Electron 的能力，回顾之前试验的方案 selenmiu-webdriver ，其方式是：传递 chromeDriver 9515 服务端口，启动该端口建立连接，传递 binary 参数，指明 app 的路劲，传递 forBrowser 参数，指明平台类型，所以现在思考的问题是，Macaca 是否通过传递同样的参数能实现？通过 Macaca 官方示例来 分析 1 下原理,精简一下代码
const wd = require('macaca-wd');
var browser = process.env.browser || 'electron' || 'puppeteer';
browser = browser.toLowerCase();
describe('macaca-test/desktop-browser-sample.test.js', function() {
this.timeout(5 * 60 * 1000);
var driver = wd.promiseChainRemote({
host: 'localhost',
port: process.env.MACACA_SERVER_PORT || 3456
});
before(() => {
return driver
.init({
platformName: 'desktop',
browserName: browser,
userAgent: `Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0 Safari/537.36 Macaca Custom UserAgent`,
deviceScaleFactor: 2
})
.setWindowSize(800, 600);
});
上面代码是 Macaca web 端的示例，对应 macaca 服务端的包就是 macaca-chrome ，为什么用它，因为它是基于 chromedriver 的，与我要做的 electron 集成方案底层服务相同。根据以上一段脚本来简要分析 1 下 macaca 交互过程
- 先启动服务，启动方式是 命令行输入 macaca-server 启动服务时 macaca-cli 执行 macaca-cli-server，之后调用 webdriver-server 的 inded.js，然后启动 koa 服务，加载中间件，路由，监听端口，等待客户端请求。
- 客户端脚本引入 macaca-wd，它是 macaca 客户端支持 node.js 的包，包括了 webdriver 的各种操作。
- 客户端调用 promiseChainRemote 是 macaca-wd/wd/lib/main.js 文件的方法，解析传递进来的参数，加上 ./promise-webdriver 支持的链式调用，这里指的是解析了 host，port 两个参数，并得到了一个 driver 对象可以链式调用各种方法。
- 进入测试用例套件，调用 init 方法, 该方法在 commands.js ，通过 webdriver.js 的 _init 方法发送脚本内传递的参数到服务端 3456 端口， 执行用例之前我们就启动的服务端，所以一直有监听。
- webdriver-server / responseHandler.js 接受客户端请求，并返回给客户端，在服务端命令行可以查看到详细的交互信息。
- macaca-chrome 调用 macaca-chromedriver.start(caps) , caps 参数就是脚本 init 里面的参数，此时 macaca-chromedriver 构造时初始化了一系列属性，proxyHost, proxyPort, urlBase ，获取版本，下载默认版本，或者自动下载与浏览器对应的 chromedriver 版本，启动 9515 服务。
- macaca-chromedrive 调用 proxy.js 代理请求 发送 status ，session 请求到 9515 服务。
- 最后总结 1 下顺序：启动 macaca-server --> macaca-wd --> webdriver-server --> macaca-chrome --> macaca-chromedrive.proxy --> 9515 ，响应按原路返回。
熟悉了过程之后要解决 2 个问题：
- 如何传递 electron 应用的路劲？
- 该参数谁处理？ 根据移动端示例参数的传递可以做为参考，实践 1 下，将代码改写为：
before(() => {
return driver
.init({
platformName: 'desktop',
browserName: browser,
app: "/Applications/macaca-electron-builder.app/Contents/MacOS/macaca-electron-builder"
})
});
运行结果报错了！通过打印 log，参数是已经传递到了步骤 6，步骤 7，参数传递到了，但是 9515 服务没处理，反复跟踪 macaca 运行过程找问题，折腾很久最后得高人指点查询Chromedriver 的参数才恍然大悟，原来 capabilities 是有提供参数的， 参数没传递正确，格式跟参数名字都不对，这里需要一个 chromeOptions Objiect 修正之后长这样
before(() => {
return driver
.init({
platformName: 'desktop',
browserName: browser,
chromeOptions: { //设置chromeDriver chromeOptions object 参数
binary: '/Applications/macaca-electron-builder.app/Contents/MacOS/macaca-electron-builder' // 填写自己的执行文件路劲或者安装之后的文件路劲
})
});
所以，当代理转发参数到设备端时，大多数情况设备端已经实现了该参数，按照规则去设置就能调起来应用了，两个在思考的问题都已解决，下面就描述 1 下完整的方案。
测试 Electron Demo
目前该方案已经提交 macaca 官方并通过了，如果大家想体验示例，可以直接从 macaca 官方网站 或者 官方示例库里查看，这里描述 1 下 mac 的操作步骤，如果你已经懂得如何传递参数，请忽略了以下步骤。
- clone 示例库 到本地
- 安装依赖
$ npm i $ npm run build $ npm run dist - 启动服务并执行测试用例
$ npm run mac-start $ npm run test - 测试用例示例，因代码格式渲染有问题，直接附上完整的 testCase地址
最后
本着解决自己项目难题的目的，最终却输出了两次分享，过程中不断遇到问题，解决问题，把分析过程跟思考记录下来是希望鼓励更多人，最终沉淀出来的方案是希望帮忙更多人，同时自己也在不断成长，用积累回馈社区。
欢迎大家试用，一起探讨，学习，更加完善示例库，比如有兴趣的同学可以完善 electron 示例应用的 UI 开发，针对各种场景添加 case 等等。
今日份的知识已摄入！想要学习更多干货知识、结识质量行业大牛和业界精英？
第十届中国互联网测试开发大会·深圳，了解下 >>
