Mac端安装Macaca App Inspector超详细教程

背景

在做移动端UI自动化时,获取布局元素的信息是一个非常常用的工作,所以找一个比较稳定且高效的工具是非常重要的事。比较常见的有3种工具,简单说一下。

1.uiautomatorviewer

Android端之前比较流行的使用是Android SDK下自带的uiautomatorviewer,这个缺点是只能查看Android布局,而且如果id不唯一时,通过xpath定位还要自己去一层一层的去算xpath定位,比较耗时。当然后来网上出了二次开发版,可以替换jar包,然后在获取布局信息的时候可以直接给出xpath信息,但是这个缺点是对于某些控件的获取会有问题,不是很稳定。

综合评定:优点无,缺点不稳定,耗时,无法支持IOS。

2.Appium Inspector

优点:1.安装环境比较简单,Mac端的话只要下载个Appium桌面版,下载个Android SDK,就可以查看Android的布局了,重新编译build WebDriverAgent在IOS设备上安装即可实现Appium与IOS设备间的通讯。2.稳定性上也算可以接受。3.可以支持IOS和Android。

缺点:1.当ID不唯一时,不能给出最简化的xpath,也需要自己去精简一下2.对于IOS设备稍微不是很友好,耗时稍长

3. Macaca App Inspector

阿里开源的Macaca框架中的一个小工具。
优点:1.比较稳定,响应速度较快 2.可以给出最简化的xpath信息以及元素xpath的绝对路径3.可以支持IOS和Android

缺点:依赖环境较多,安装较耗时。

本人3种都用过,对比起来还是比较喜欢Macaca Inspector。但是安装过程坑还是挺多的,下面讲一下详细的安装步骤,mark一下也方便我以后查看嘿嘿~

Macaca App Inspector安装详细步骤

官网地址:https://macacajs.github.io

1. cnpm:

  • 更新npm到最新版:
    sudo npm install npm@latest -g
  • 验证npm版本
    npm -v
  • 为了方便以后下载东西先把npm搞成淘宝的镜像cnpm,具体用法见 http://npm.taobao.org/

2. node.js:

node.js需要版本貌似是9以上,所以需要确保一下node.js的版本。

  • 先查看本机node.js版本:
    node -v
  • 清除node.js的cache:
    sudo cnpm cache clean -f
  • 安装 n 工具,这个工具是专门用来管理node.js版本的,别怀疑这个工具的名字,是他是他就是他,他的名字就是 "n"
    sudo npm install -g n
  • 安装最新版本的node.js
    sudo n stable
  • 再次查看本机的node.js版本:
     node -v

3.Macaca命令行工具

  • 全局安装
    cnpm i -g macaca-cli

如果看到如下可爱的🐒,那恭喜你安装成功啦!重新安装则会覆盖更新。


macaca安装成功.jpg

4.IOS环境

  • 请安装 Xcode9 或者更高版本
  • 请安装 usbmuxd 以便于通过 USB 通道测试 iOS 真机,不需要测试真机则不用安装
    brew install usbmuxd
  • 请安装 ideviceinstaller 用来给真机安装 App。
    brew install ideviceinstaller
  • 应用中如含有 WebView,请安装 ios-webkit-debug-proxy
    brew install ios-webkit-debug-proxy
  • 安装IOS驱动
   cnpm i macaca-ios -g

备注:使用brew命令需要安装Homebrew(一款常用的 MacOS 的包管理器)

5.IOS真机环境

  1. 打开XCTestWD
    打开finder,然后按快捷键commend+shift+G 输入/usr/local/lib/node_modules/app-inspector/node_modules/xctestwd/XCTestWD,前往,用xcode打XCTestWD.xcodeproj文件


    XCTestWD.xcodeproj文件.png
  2. 重新自定义Bundle ID以及Team ID,每个文件都需要更改Bundle ID以及Team ID,如下图


    id1.png

    id2.png

    id3.png

    id4.png

    id5.png

    id6.png
  3. 重新编译XCTestWDUITests


    build.png

    提示build success即可。

  4. 将 TEAM_ID 通过环境变量传入覆盖安装iOS驱动

    DEVELOPMENT_TEAM_ID=TEAM_ID cnpm i macaca-ios -g

注意此处的TEAM_ID要填写Xcode的TEAM_ID代码,即是这样的格式

    DEVELOPMENT_TEAM_ID=xxxxxxxx  cnpm i macaca-ios -g

查询方法如下图


TEAM_ID.png

点击“other”,然后显示下图,copy红框内代码即可


TEAM_ID1.png
  1. 将 TEAM_ID 通过环境变量传入覆盖安装App Inspector
   DEVELOPMENT_TEAM_ID=TEAM_ID cnpm install app-inspector -g

注意修改TEAM_ID !!!

6.安装Android环境

1.安装JDK以及SDK,不会的请自行百度。
2.安装 gradle 来构建 UIAutomatorWD 和其它依赖包。 ( Windows 用户请安装 gradle 安装包 并且设置对应的环境变量。)

   brew install gradle

3.安装Android驱动

  cnpm i macaca-android  -g

7.检查Macaca安装环境

  macaca doctor

如果是一片绿,那么恭喜你环境OK了。


Macaca doctor.png

8.命令行执行App Inspector

  app-inspector -u  UDID  --verbose

UDID如何查询没请自行百度。执行后浏览器自动打开地址:http://192.168.1.111:5678/ (推荐用 Chrome 浏览器)
出现下图代表成功了。


浏览器打开页面展示.png

9.题外话之命令行唤起xcode模拟器

  • 方法一:

1.IOS模拟器列表获取命令

  xcrun instruments -s 

2.IOS启动模拟器命令

  xcrun instruments -w "iPhone 8 (12.1)"   
  • 方法二:

1.安装IOS-SIM包

sudo cnpm install -g ios-sim  

2.检验安装是否成功

ios-sim showdevicetypes

3.启动IOS模拟器

ios-sim start --devicetypeid iPhone-8

如何仅仅是为了查看IOS布局推荐使用模拟器,模拟器的udid也是可以在xcode中查询的。唤起办法个人推荐方法二,因为我自己的电脑用第一个不是很稳定。

推荐阅读更多精彩内容