本文由Super-Ps發(fā)表于TesterHome論壇盐捷，點(diǎn)擊原文鏈接可查看作者的更多文章并與ta在線交流。
繼上一篇分享解決了部分問題，本次分享完整的 Macaca 集成 Eletron APP 測試方案虏劲。
Macaca 交付過程分析
為了使 Macaca 有測試 Electron 的能力俐东，回顧之前試驗(yàn)的方案 selenmiu-webdriver 尘颓，其方式是：傳遞 chromeDriver 9515 服務(wù)端口兄春，啟動該端口建立連接疯趟，傳遞 binary 參數(shù)拘哨，指明 app 的路勁，傳遞 forBrowser 參數(shù)迅办，指明平臺類型宅静，所以現(xiàn)在思考的問題是，Macaca 是否通過傳遞同樣的參數(shù)能實(shí)現(xiàn)站欺？通過 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 端的示例姨夹，對應(yīng) macaca 服務(wù)端的包就是 macaca-chrome ，為什么用它矾策，因?yàn)樗腔?chromedriver 的磷账，與我要做的 electron 集成方案底層服務(wù)相同。根據(jù)以上一段腳本來簡要分析 1 下 macaca 交互過程
- 先啟動服務(wù)贾虽，啟動方式是 命令行輸入 macaca-server 啟動服務(wù)時(shí) macaca-cli 執(zhí)行 macaca-cli-server逃糟，之后調(diào)用 webdriver-server 的 inded.js，然后啟動 koa 服務(wù)，加載中間件绰咽，路由菇肃，監(jiān)聽端口，等待客戶端請求取募。
- 客戶端腳本引入 macaca-wd琐谤，它是 macaca 客戶端支持 node.js 的包，包括了 webdriver 的各種操作玩敏。
- 客戶端調(diào)用 promiseChainRemote 是 macaca-wd/wd/lib/main.js 文件的方法斗忌，解析傳遞進(jìn)來的參數(shù)，加上 ./promise-webdriver 支持的鏈?zhǔn)秸{(diào)用旺聚，這里指的是解析了 host织阳，port 兩個(gè)參數(shù)，并得到了一個(gè) driver 對象可以鏈?zhǔn)秸{(diào)用各種方法砰粹。
- 進(jìn)入測試用例套件唧躲，調(diào)用 init 方法, 該方法在 commands.js ，通過 webdriver.js 的 _init 方法發(fā)送腳本內(nèi)傳遞的參數(shù)到服務(wù)端 3456 端口碱璃， 執(zhí)行用例之前我們就啟動的服務(wù)端惊窖，所以一直有監(jiān)聽。
- webdriver-server / responseHandler.js 接受客戶端請求厘贼，并返回給客戶端，在服務(wù)端命令行可以查看到詳細(xì)的交互信息圣拄。
- macaca-chrome 調(diào)用 macaca-chromedriver.start(caps) , caps 參數(shù)就是腳本 init 里面的參數(shù)嘴秸，此時(shí) macaca-chromedriver 構(gòu)造時(shí)初始化了一系列屬性，proxyHost, proxyPort, urlBase 庇谆，獲取版本岳掐，下載默認(rèn)版本，或者自動下載與瀏覽器對應(yīng)的 chromedriver 版本饭耳，啟動 9515 服務(wù)串述。
- macaca-chromedrive 調(diào)用 proxy.js 代理請求 發(fā)送 status ，session 請求到 9515 服務(wù)寞肖。
- 最后總結(jié) 1 下順序：啟動 macaca-server --> macaca-wd --> webdriver-server --> macaca-chrome --> macaca-chromedrive.proxy --> 9515 纲酗，響應(yīng)按原路返回。
熟悉了過程之后要解決 2 個(gè)問題：
- 如何傳遞 electron 應(yīng)用的路勁觅赊？
- 該參數(shù)誰處理？ 根據(jù)移動端示例參數(shù)的傳遞可以做為參考琼稻，實(shí)踐 1 下吮螺，將代碼改寫為：
before(() => {
return driver
.init({
platformName: 'desktop',
browserName: browser,
app: "/Applications/macaca-electron-builder.app/Contents/MacOS/macaca-electron-builder"
})
});
運(yùn)行結(jié)果報(bào)錯(cuò)了！通過打印 log，參數(shù)是已經(jīng)傳遞到了步驟 6鸠补，步驟 7萝风，參數(shù)傳遞到了，但是 9515 服務(wù)沒處理紫岩，反復(fù)跟蹤 macaca 運(yùn)行過程找問題规惰，折騰很久最后得高人指點(diǎn)查詢Chromedriver 的參數(shù)才恍然大悟，原來 capabilities 是有提供參數(shù)的被因， 參數(shù)沒傳遞正確卿拴，格式跟參數(shù)名字都不對，這里需要一個(gè) chromeOptions Objiect 修正之后長這樣
before(() => {
return driver
.init({
platformName: 'desktop',
browserName: browser,
chromeOptions: { //設(shè)置chromeDriver chromeOptions object 參數(shù)
binary: '/Applications/macaca-electron-builder.app/Contents/MacOS/macaca-electron-builder' // 填寫自己的執(zhí)行文件路勁或者安裝之后的文件路勁
})
});
所以梨与，當(dāng)代理轉(zhuǎn)發(fā)參數(shù)到設(shè)備端時(shí)堕花，大多數(shù)情況設(shè)備端已經(jīng)實(shí)現(xiàn)了該參數(shù)，按照規(guī)則去設(shè)置就能調(diào)起來應(yīng)用了粥鞋，兩個(gè)在思考的問題都已解決缘挽，下面就描述 1 下完整的方案。
測試 Electron Demo
目前該方案已經(jīng)提交 macaca 官方并通過了呻粹，如果大家想體驗(yàn)示例壕曼，可以直接從 macaca 官方網(wǎng)站 或者 官方示例庫里查看，這里描述 1 下 mac 的操作步驟等浊，如果你已經(jīng)懂得如何傳遞參數(shù)腮郊，請忽略了以下步驟。
- clone 示例庫 到本地
- 安裝依賴
$ npm i $ npm run build $ npm run dist - 啟動服務(wù)并執(zhí)行測試用例
$ npm run mac-start $ npm run test - 測試用例示例筹燕，因代碼格式渲染有問題轧飞，直接附上完整的 testCase地址
最后
本著解決自己項(xiàng)目難題的目的，最終卻輸出了兩次分享撒踪，過程中不斷遇到問題过咬，解決問題，把分析過程跟思考記錄下來是希望鼓勵更多人制妄，最終沉淀出來的方案是希望幫忙更多人掸绞，同時(shí)自己也在不斷成長，用積累回饋社區(qū)耕捞。
歡迎大家試用衔掸，一起探討，學(xué)習(xí)砸脊，更加完善示例庫具篇，比如有興趣的同學(xué)可以完善 electron 示例應(yīng)用的 UI 開發(fā)，針對各種場景添加 case 等等凌埂。
本文由Super-Ps發(fā)表于TesterHome論壇驱显，點(diǎn)擊原文鏈接可查看作者的更多文章并與ta在線交流。
今日份的知識已攝入！想要學(xué)習(xí)更多干貨知識埃疫、結(jié)識質(zhì)量行業(yè)大牛和業(yè)界精英伏恐？
第十屆中國互聯(lián)網(wǎng)測試開發(fā)大會·深圳，了解下 >>
