关于electron:使用-Macaca-测试-Electron-桌面-App

本文由 Super-Ps 发表于 TesterHome 论坛，点击原文链接可查看作者的更多文章并与 ta 在线交换。

继上一篇分享解决了局部问题，本次分享残缺的 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 交互过程

先启动服务，启动形式是命令行输出 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 下残缺的计划。

目前该计划曾经提交 macaca 官网并通过了，如果大家想体验示例，能够间接从 macaca 官方网站或者官网示例库里查看，这里形容 1 下 mac 的操作步骤，如果你曾经懂得如何传递参数，请疏忽了以下步骤。

clone 示例库到本地
装置依赖 $ npm i $ npm run build $ npm run dist
启动服务并执行测试用例 $ npm run mac-start $ npm run test
测试用例示例，因代码格局渲染有问题，间接附上残缺的 testCase 地址

本着解决本人我的项目难题的目标，最终却输入了两次分享，过程中一直遇到问题，解决问题，把剖析过程跟思考记录下来是心愿激励更多人，最终积淀进去的计划是心愿帮忙更多人，同时本人也在一直成长，用积攒回馈社区。
欢送大家试用，一起探讨，学习，更加欠缺示例库，比方有趣味的同学能够欠缺 electron 示例利用的 UI 开发，针对各种场景增加 case 等等。

本文由 Super-Ps 发表于 TesterHome 论坛，点击原文链接可查看作者的更多文章并与 ta 在线交换。

今日份的常识已摄入！想要学习更多干货常识、结识品质行业大牛和业界精英？
第十届中国互联网测试开发大会·深圳，理解下 >>

关于electron:使用-Macaca-测试-Electron-桌面-App

Macaca 交付过程剖析

测试 Electron Demo

最初