Macaca 使用 Macaca 测试 Electron 桌面 App

Super-Ps · 2019年09月26日 · 最后由 daidaidy-github 回复于 2021年01月05日 · 8260 次阅读
本帖已被设为精华帖!

继上一篇分享解决了部分问题,本次分享完整的 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 交互过程

  1. 先启动服务,启动方式是 命令行输入 macaca-server 启动服务时 macaca-cli 执行 macaca-cli-server,之后调用 webdriver-server 的 inded.js,然后启动 koa 服务,加载中间件,路由,监听端口,等待客户端请求。
  2. 客户端脚本引入 macaca-wd,它是 macaca 客户端支持 node.js 的包,包括了 webdriver 的各种操作。
  3. 客户端调用 promiseChainRemote 是 macaca-wd/wd/lib/main.js 文件的方法,解析传递进来的参数,加上 ./promise-webdriver 支持的链式调用,这里指的是解析了 host,port 两个参数,并得到了一个 driver 对象可以链式调用各种方法。
  4. 进入测试用例套件,调用 init 方法, 该方法在 commands.js ,通过 webdriver.js 的 _init 方法发送脚本内传递的参数到服务端 3456 端口, 执行用例之前我们就启动的服务端,所以一直有监听。
  5. webdriver-server / responseHandler.js 接受客户端请求,并返回给客户端,在服务端命令行可以查看到详细的交互信息。
  6. macaca-chrome 调用 macaca-chromedriver.start(caps) , caps 参数就是脚本 init 里面的参数,此时 macaca-chromedriver 构造时初始化了一系列属性,proxyHost, proxyPort, urlBase ,获取版本,下载默认版本,或者自动下载与浏览器对应的 chromedriver 版本,启动 9515 服务。
  7. macaca-chromedrive 调用 proxy.js 代理请求 发送 status ,session 请求到 9515 服务。
  8. 最后总结 1 下顺序:启动 macaca-server --> macaca-wd --> webdriver-server --> macaca-chrome --> macaca-chromedrive.proxy --> 9515 ,响应按原路返回。

顺手附草图一张,可以根据顺序找下源码文件
alt 源码文件图

熟悉了过程之后要解决 2 个问题:

  1. 如何传递 electron 应用的路劲?
  2. 该参数谁处理? 根据移动端示例参数的传递可以做为参考,实践 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 的操作步骤,如果你已经懂得如何传递参数,请忽略了以下步骤。

  1. clone 示例库 到本地
  2. 安装依赖 $ npm i $ npm run build $ npm run dist
  3. 启动服务并执行测试用例 $ npm run mac-start $ npm run test
  4. 测试用例示例,因代码格式渲染有问题,直接附上完整的 testCase地址

最后

本着解决自己项目难题的目的,最终却输出了两次分享,过程中不断遇到问题,解决问题,把分析过程跟思考记录下来是希望鼓励更多人,最终沉淀出来的方案是希望帮忙更多人,同时自己也在不断成长,用积累回馈社区。
欢迎大家试用,一起探讨,学习,更加完善示例库,比如有兴趣的同学可以完善 electron 示例应用的 UI 开发,针对各种场景添加 case 等等。

共收到 8 条回复 时间 点赞
陈恒捷 将本帖设为了精华贴 09月27日 09:26

加精理由: 非常鼓励这种 发现 - 解决 - 分享 的方式,内容也很完整可参考

点赞。。

@13528427307 sample 会有报错

Error: >> versions.js:85:12 [master] pid:69241 No proper chromedriver version found for webview version: 77!
    at Logger.error (/Users/xdf/prjs/macaca/macaca-electron-app-sample/node_modules/_xlogger@1.0.6@xlogger/lib/xlogger.js:169:9)
    at ChromedriverVersion.getVersionFromWebviewVersion (/Users/xdf/prjs/macaca/macaca-electron-app-sample/node_modules/_macaca-chromedriver@1.2.3@macaca-chromedriver/lib/versions.js:85:12)

npm run dist 执行报错

版本维护没有更新到 77 版本,等查询 chromedriver 最新版本对应关系后 更新。

当前存在的问题:WIN 不能运行 DEMO,
按照官网操作如下:
$ npm run win-start
$ npm run win-server
$ npm run test

执行结果显示不能定位到该元素,目前已知问题是,分别打包了 mac ,win,mac 的可以跑,win 报错如下,实际情况可以查看到 DOM 元素。该问题待解决,正在尝试用别的打包方式后再测试。

simple [精彩盘点] TesterHome 社区 2019 年 度精华帖 中提及了此贴 12月24日 22:45
仅楼主可见

UI 自动化的时候需要手机验证码如何解决?
苹果双重认证如何解决?
复杂的手势交互如何解决?
这些在源码里么有发现好的解决方案

请问为什么不用 selenmiu-webdriver 对 electron 应用进行 UI 自动化测试了呢?
Macaca 是当前唯一一个能进行 electron UI 自动化的框架么?
如果想用 Java 写自动化用例,Macaca 友好不?

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册