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

安装inspector

$ npm install app-inspector -g

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

5. 将 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中查询的。唤起办法个人推荐方法二，因为我自己的电脑用第一个不是很稳定。