本文由Super-Ps發(fā)表于TesterHome論壇，點(diǎn)擊原文鏈接可查看作者的更多文章并與ta在線交流。

繼上一篇分享解決了部分問題，本次分享完整的 Macaca 集成 Eletron APP 測(cè)試方案。

Macaca 交付過程分析

為了使 Macaca 有測(cè)試 Electron 的能力，回顧之前試驗(yàn)的方案 selenmiu-webdriver ，其方式是：傳遞 chromeDriver 9515 服務(wù)端口，啟動(dòng)該端口建立連接，傳遞 binary 參數(shù)，指明 app 的路勁，傳遞 forBrowser 參數(shù)，指明平臺(tái)類型，所以現(xiàn)在思考的問題是，Macaca 是否通過傳遞同樣的參數(shù)能實(shí)現(xiàn)？通過 Macaca 官方示例來 分析 1 下原理,精簡(jiǎn)一下代碼

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 端的示例，對(duì)應(yīng) macaca 服務(wù)端的包就是 macaca-chrome ，為什么用它，因?yàn)樗腔?chromedriver 的，與我要做的 electron 集成方案底層服務(wù)相同。根據(jù)以上一段腳本來簡(jiǎn)要分析 1 下 macaca 交互過程

1. 先啟動(dòng)服務(wù)，啟動(dòng)方式是 命令行輸入 macaca-server 啟動(dòng)服務(wù)時(shí) macaca-cli 執(zhí)行 macaca-cli-server，之后調(diào)用 webdriver-server 的 inded.js，然后啟動(dòng) koa 服務(wù)，加載中間件，路由，監(jiān)聽端口，等待客戶端請(qǐng)求。
2. 客戶端腳本引入 macaca-wd，它是 macaca 客戶端支持 node.js 的包，包括了 webdriver 的各種操作。
3. 客戶端調(diào)用 promiseChainRemote 是 macaca-wd/wd/lib/main.js 文件的方法，解析傳遞進(jìn)來的參數(shù)，加上 ./promise-webdriver 支持的鏈?zhǔn)秸{(diào)用，這里指的是解析了 host，port 兩個(gè)參數(shù)，并得到了一個(gè) driver 對(duì)象可以鏈?zhǔn)秸{(diào)用各種方法。
4. 進(jìn)入測(cè)試用例套件，調(diào)用 init 方法, 該方法在 commands.js ，通過 webdriver.js 的 _init 方法發(fā)送腳本內(nèi)傳遞的參數(shù)到服務(wù)端 3456 端口， 執(zhí)行用例之前我們就啟動(dòng)的服務(wù)端，所以一直有監(jiān)聽。
5. webdriver-server / responseHandler.js 接受客戶端請(qǐng)求，并返回給客戶端，在服務(wù)端命令行可以查看到詳細(xì)的交互信息。
6. macaca-chrome 調(diào)用 macaca-chromedriver.start(caps) , caps 參數(shù)就是腳本 init 里面的參數(shù)，此時(shí) macaca-chromedriver 構(gòu)造時(shí)初始化了一系列屬性，proxyHost, proxyPort, urlBase ，獲取版本，下載默認(rèn)版本，或者自動(dòng)下載與瀏覽器對(duì)應(yīng)的 chromedriver 版本，啟動(dòng) 9515 服務(wù)。
7. macaca-chromedrive 調(diào)用 proxy.js 代理請(qǐng)求 發(fā)送 status ，session 請(qǐng)求到 9515 服務(wù)。
8. 最后總結(jié) 1 下順序：?jiǎn)?dòng) macaca-server --> macaca-wd --> webdriver-server --> macaca-chrome --> macaca-chromedrive.proxy --> 9515 ，響應(yīng)按原路返回。

image.png

熟悉了過程之后要解決 2 個(gè)問題：

1. 如何傳遞 electron 應(yīng)用的路勁？
2. 該參數(shù)誰處理？ 根據(jù)移動(dòng)端示例參數(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ù)名字都不對(duì)，這里需要一個(gè) chromeOptions Objiect 修正之后長(zhǎng)這樣

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 下完整的方案。

測(cè)試 Electron Demo

目前該方案已經(jīng)提交 macaca 官方并通過了，如果大家想體驗(yàn)示例，可以直接從 macaca 官方網(wǎng)站 或者 官方示例庫里查看，這里描述 1 下 mac 的操作步驟，如果你已經(jīng)懂得如何傳遞參數(shù)，請(qǐng)忽略了以下步驟。

1. clone 示例庫 到本地
2. 安裝依賴 $ npm i $ npm run build $ npm run dist
3. 啟動(dòng)服務(wù)并執(zhí)行測(cè)試用例 $ npm run mac-start $ npm run test
4. 測(cè)試用例示例，因代碼格式渲染有問題，直接附上完整的 testCase地址

最后

本著解決自己項(xiàng)目難題的目的，最終卻輸出了兩次分享，過程中不斷遇到問題，解決問題，把分析過程跟思考記錄下來是希望鼓勵(lì)更多人，最終沉淀出來的方案是希望幫忙更多人，同時(shí)自己也在不斷成長(zhǎng)，用積累回饋社區(qū)。
歡迎大家試用，一起探討，學(xué)習(xí)，更加完善示例庫，比如有興趣的同學(xué)可以完善 electron 示例應(yīng)用的 UI 開發(fā)，針對(duì)各種場(chǎng)景添加 case 等等。

本文由Super-Ps發(fā)表于TesterHome論壇，點(diǎn)擊原文鏈接可查看作者的更多文章并與ta在線交流。

今日份的知識(shí)已攝入！想要學(xué)習(xí)更多干貨知識(shí)、結(jié)識(shí)質(zhì)量行業(yè)大牛和業(yè)界精英？
第十屆中國(guó)互聯(lián)網(wǎng)測(cè)試開發(fā)大會(huì)·深圳，了解下 >>