继上一篇分享解决了部分问题,本次分享完整的 Macaca 集成 Eletron APP 测试方案。
为了使 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 交互过程
顺手附草图一张,可以根据顺序找下源码文件
熟悉了过程之后要解决 2 个问题:
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 下完整的方案。
目前该方案已经提交 macaca 官方并通过了,如果大家想体验示例,可以直接从 macaca 官方网站 或者 官方示例库里查看,这里描述 1 下 mac 的操作步骤,如果你已经懂得如何传递参数,请忽略了以下步骤。
$ npm i
$ npm run build
$ npm run dist
$ npm run mac-start
$ npm run test
本着解决自己项目难题的目的,最终却输出了两次分享,过程中不断遇到问题,解决问题,把分析过程跟思考记录下来是希望鼓励更多人,最终沉淀出来的方案是希望帮忙更多人,同时自己也在不断成长,用积累回馈社区。
欢迎大家试用,一起探讨,学习,更加完善示例库,比如有兴趣的同学可以完善 electron 示例应用的 UI 开发,针对各种场景添加 case 等等。