自动化-Appium-元素定位工具

元素定位工具

本章节讲解Android / IOS常用的元素定位工具，针对包括原生（APP）、Web（WEBVIEW）和混合（APP与WEBVIEW）。

第1章 Android

1.1APP

1.1.1uiautomatorviewer

uiautomatorviewer是Android SDK里的一个工具，这个工具在Android SDK目录下的tools文件夹下。uiautomatorviewer使用简单，速度也相对比较快。

在Windows / Mac环境下操作基本一致，这里以Windows进行讲解。使用adb devices命令查看模拟器或真机是否连接上。如图所示已经连上设备。

在模拟器或真机里，打开要定位元素的App应用程序，操作到想要定位的页面。之后双击打开uiautomatorviewer文件。

uiautomatorviewer工具打开后，点击左上角的拍照按钮。

点击完后，设备上的界面就会被同步到这个工具的左侧，点击左侧需要查看的控件，在这个工具的右侧就可以看到对应这个控件的详细信息。

如果需要继续定位其他页面里的元素，将设备操作到要定位元素的页面后，再次点击工具左上角的拍照按钮，就可以抓取最新的页面元素信息。

点击保存按钮，可保存页面屏幕截屏和.uix文件（页面源码）。

保存后，生成的2个文件（页面屏幕截屏和.uix文件）。

点击打开文件，可以将之前保存好的页面屏幕截屏和.uix文件导入进来。

导入后即可进行元素定位操作。

1.1.2Appium Inspector

Appium Inspector是Appium Desktop附带的一个元素定位检查器，用来调试定位应用程序很方便。

在Windows / Mac环境下操作基本一致，这里以Windows进行讲解。使用adb devices命令查看模拟器或真机是否连接上。如图所示已经连上设备。

启动Appium Desktop。

Simple模式可以设置服务IP和端口。

Advanced模式可以设置更多（例如：允许会话重写），之后可以保存此预设置。例如：Demo。

Presets模式可以启动或删除之前保存好的预设置。例如：之前保存好的Demo预设置进行启动或删除。

一般选择Simple模式即可。如服务IP和端口默认的情况下，点击Start Server v1.8.0来开启Appium服务。

点击放大镜（Start Inspector Session）。

选择Automatic Server配置Desired Capabilities信息。

可以直接点击左边Desired Capabilities添加或删除完善Desired Capabilities信息。也可以直接把Desired Capabilities生成JSON直接复制到右侧的JSON Representation框中并保存。两种方法效果是一样的。

例如JSON信息：

代码语言：javascript复制

{
  "platformName": "Android",
  "platformVersion": "6.0",
  "deviceName": "Galaxy C7",
  "udid": "MYV0215825000026",
  "automationName": "Appium",
  "appPackage": "com.xiaoV.BWalletBeta",
  "appActivity": "com.xiaoV.BWallet.yklogin.YkSplashActivity"
}

之后点击Start Session。

启动成功后，默认会启动首页，如果需要查看其它页面的控件信息，可以在设备上手动点击进入需要查看的页面，然后点击屏幕中央的刷新按钮，刷新屏幕即可。在左侧显示区域移动鼠标，可以看到选中区域元素的属性。

Appium Inspector还支持录制功能，点击录制按钮，进行操作（例如：输入数据），之后会生成操作代码（支持Java、Python）。

1.2WEBVIEW

1.2.1Chrome Inspect

Chrome Inspect是Chrome提供的一个移动端Web开发调试工具，通过它我们可以调试手机页面，可以看到页面的源码，从而进行元素的定位。

在Windows / Mac环境下操作基本一致，这里以Windows进行讲解。首先要有一台PC，上面安装了Chrome浏览器；一台Android模拟器或真机。将设备通过USB数据线连接到你的PC机并开启USB调试模式，使用adb devices命令查看模拟器或真机是否连接上。如图所示已经连上设备。

打开设备应用程序里含有Webview的页面，接下来打开PC的Chrome浏览器，输入访问地址chrome://inspect/

如图所示，可以检测到当前应用程序界面是Webview。

点击页面的inspect链接，弹出新窗口，显示当前页面的Webview元素信息（由于国内网络问题，第一次页面加载可能需要FANQIANG）。元素定位方法同Selenium WebDriver一致。

但是一般在Chrome调试定位不如在Firefox上方便，所以作者一般是新建一个.html文件，将此页面的源码拷贝进去。如图：页面源码拷贝到.html文件里

之后打开Firefox，将此.html文件拖拽进去，如果显示乱码，可将Firefox的文字编码格式改为中文，虽然在Firefox上页面显示样式丢失，但基本的元素都是可见的，再结合定位工具Firebug和FirePath调试定位还是很方便的。

注意：当连接的设备是真机时，Chrome Inspect无法检测到Webview页面是怎么回事？

从Android 4.4开始，webkit是支持远程调试的，不过需要将App的debug模式打开，可以使用如下代码：WebView.setWebContentsDebuggingEnabled(true);

其实大部分App的debug模式都是关闭的，要去找一个开启debug模式的版本还是比较麻烦的。因此需要使用借助第三方工具来强制开启任何App的Android webview debug模式，使之可以使用Chrome Inspect。而这个工具就是Xposed。

解决方法：

1、将设备进行root

因为涉及到root权限，因此需要将设备进行root。有很多工具可以来root，比如KingRoot等。

2、安装Xposed框架

打开Xposed文件里的de.robv.android.xposed.installer_v33_36570c.apk安装到设备里。

或者：

打开官网地址下载安装：http://repo.xposed.info/module/de.robv.android.xposed.installer

3、安装Xposed webview debugging模块

打开Xposed文件里的WebViewDebugHook.apk安装到设备里。

4、激活Xposed

安装完上述2个程序之后，可以看到设备上出现了一个叫Xposed Installer的图标，点击进去之后会看到提示说Xposed未激活，点击进入框架页面，点击“安装/更新”按钮即可。安装完成之后，重启再打开，点击进入模块页面，勾选“webView debug hook”，再重启，重启之后即激活了Xposed。之后就可以使用Chrome Inspect查看App的webview页面元素了。

第2章 IOS

2.1APP

2.1.1Appium Inspector

Appium Inspector是Appium Desktop附带的一个元素定位检查器，用来调试定位应用程序很方便。

在Mac环境下，终端输入idevice_id -l，查看设备是否连接上。

如图所示：显示该真机的udid信息。

启动Appium Desktop。

Simple模式可以设置服务IP和端口。

Advanced模式可以设置更多（例如：允许会话重写），之后可以保存此预设置。例如：Demo。

Presets模式可以启动或删除之前保存好的预设置。例如：之前保存好的Demo预设置进行启动或删除。

一般选择Simple模式即可。如服务IP和端口默认的情况下，点击Start Server v1.8.0来开启Appium服务。

点击放大镜（Start Inspector Session）。

选择Automatic Server配置Desired Capabilities信息。

例如JSON信息：

代码语言：javascript复制

{
  "platformName": "iOS",
  "platformVersion": "11.1",
  "deviceName": "test",
  "automationName": "XCUITest",
  "bundleId": "com.xiaoV.BangWalletBeta",
  "udid": "c5dc675bddf7d1ac6d91783d5224d72b427f8d04",
  "xcodeOrgId": "69XXXXXXXX",
  "xcodeSigningId": "iPhone Developer"
}

之后点击Start Session。

Appium Inspector还支持录制功能，点击录制按钮，进行操作（例如：点击按钮），之后会生成操作代码（支持Java、Python）。

2.2WEBVIEW

2.2.1Safari

1、设置模拟器或真机打开模拟器或真机的settings --> Safari --> Advanced，把里面的Web Inspector打开。

2、设置Mac机器上的Safari 打开Safari --> 点击菜单栏上的"Safari" --> Preferences... --> Advanced --> 选上Show Develop menu in menu bar。

3、在模拟器或真机上打开需要查看webview的app，跳转到webview。

4、打开Mac上的Safari，选择开发--->设备（如图：设备名为test），可以看到此时真机设备打开的Webview页面，例如：帮帮应用的帮助中心页面。

点击帮助中心页面的链接，会弹出新窗口，显示帮助中心页面的html源码信息，则可以获取相应的Webview元素信息。

2.2.2ios_webkit_debug_proxy

首先将真机设备上的应用程序打开，之后打开此应用显示的Webview页面；

之后在Mac上打开终端，输入启动代理命令

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

Mac上打开Chrome浏览器，在地址栏输入http://localhost:9221/，这里会显示所有已连接的设备清单，选择一个设备并点击打开。例如：真机设备（test）

此时检测到真机设备上打开的Webview页面，例如：帮助中心页面

选中后，鼠标右键点击转到……

打开选中的页面，将Chrome的开发者工具打开，显示html源码信息，则可以获取相应的Webview元素信息。

或者，选中后，鼠标右键复制链接地址

例如：

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9223/devtools/page/1

打开Chrome新窗口，将复制的地址粘贴后访问

显示html源码信息，则可以获取相应的Webview元素信息。

2.2.3RemoteDebug iOS WebKit Adapter

该工具可以是你像调试Android webview一样调试IOS webview页面，非常方便。

RemoteDebug iOS Webkit Adapter（能够让你在Windows以及Mac上，利用VS Code、Chrome DevTools、Firefox debugger.html等工具来调试Safari、IOS WebViews）。

RemoteDebug iOS Webkit Adapter的用途：

1、能够让一些基于Chrome Debugging Protocol（CDP）实现的工具也具备调试IOS Safari / Webkit的能力。

2、能够提供协议适配器（protocol adapter），该协议适配器主要用于Chrome Debugging Protocol 以及Webkit Remote Debugging Protocol之间API存在的差异性。

3、能够在ios-webkit-debug-proxy上进行二次开发，这是因为RemoteDebug iOS Webkit Adapter项目是基于ios-webkit-debug-proxy项目构建的，也可以把RemoteDebug iOS Webkit Adapter项目看作是ios-webkit-debug-proxy项目的延伸。

RemoteDebug iOS WebKit Adapter是可以运行在Windows以及Mac平台上的。可以通过NPM安装包的方式，来开始安装该适配器。

安装：

确保已安装Homebrew，并运行以下命令来安装ios-webkit-debug-proxy和libimobiledevice

brew update

brew unlink libimobiledevice ios-webkit-debug-proxy

brew uninstall --force libimobiledevice ios-webkit-debug-proxy

brew install --HEAD libimobiledevice

brew install --HEAD ios-webkit-debug-proxy

安装RemoteDebug iOS Webkit Adapter：

npm install remotedebug-ios-webkit-adapter -g