阿狗工具
前言
来啦老铁！
如我在上期文章 Appium 安卓自动化（环境搭建） 中所讲的那样，我打算用几篇文章记录一下手机端自动化测试的探索过程，感兴趣的读者也可以翻翻上期介绍环境搭建的文章。
而今天我们要学习记录的是：
-
Appium Inspector 的使用；
Appium Inspector 早期是是 Appium GUI自带的一个元素定位工具，具体入口在 GUI 启动 server 后的下图入口：
早期点击入口后可以直接打开 Appium Inspector 进行元素定位等后续操作；
而后来，Appium 将 Appium Inspector 从 Appium GUI 上剥离出去，作为另一个独立的应用。
接下来我们一起来看看如何使用 Appium Inspector 吧~
学习路径
- 下载安装 Appium Inspector 应用；
- 认识 Appium Inspector 应用界面；
- 配置 Appium Inspector 基础配置项；
- 配置 Appium Inspector Desired Capabilities 配置项；
- 系统环境变量处理；
- 启动 Session；
- 使用 Appium Inspector 进行元素定位；
1. 下载安装 Appium Inspector 应用；
点击上述 Appium GUI 上的 Appium Inspector 入口会把我们带往 Appium Inspector 的 git 仓库，Appium Inspector 提供两种使用方式，一种为桌面应用，一种为网页应用，如下图：
-
先来看看桌面版；
a. 点击 Releases 入口，前往下载站点下载桌面应用包，例如我选择 mac 版：
b. 下载完成后，打开安装包进行安装；
c. 安装完成后就能在电脑上看到安装好的 Appium Inspector 应用；
-
再来看看网页版；
点击 web application 入口，便可打开网页版，网页版的网址：https://inspector.appiumpro.com/
与桌面版一模一样，事实上，通过简单阅读 Appium Inspector 的源代码，我们会发现，Appium Inspector 的桌面版是使用 Electron 技术的，从原理上来说，实际上与网页版基本没有差异，因此，我们不用过多研究二者的差异，可以认为是相同的；
2. 认识 Appium Inspector 应用界面；
-
Appium Inspector 应用界面 如下：
-
其中：
a. 编码 1 为 Appium server 配置项区域，其中 Remote Host 默认为 0.0.0.0，Remote Port 默认为 4723，Remote Path 默认为 /。
b. 编码 2、3 区域为 Capabilities 相关区域，也即 Appium session 相关区域，其中编号 2 区域的 Desire Capabilities 为 Capabilities 的手动逐个添加区域，编号 3 区域为 JSON 形式的 Capabilities 的批量添加区；
3. 配置 Appium Inspector 基础配置项；
-
我们需要将区域 1 中的 Remote Path 作一下修改，将其值改为 /wd/hub；
没错，跟 selenium server 一样，懂 UI 自动化的都懂；
4. 配置 Appium Inspector Desired Capabilities 配置项；
接下来便是十分重要的 Desired Capabilities 配置项，这关系到我们能否接管我们的设备，进而从事元素定位等相关工作；
-
根据上一篇文章中的 Capabilities 以及 Appium Inspector Desired Capabilities 配置项的配置规则，基本配置如下：
{
"platformName": "Android",
"appium:automationName": "UiAutomator2",
"appium:browserName": "Chrome",
"appium:platformVersion": "7.0",
"appium:deviceName": "pixel2",
"appium:udid": "emulator-5554"
}
（由于笔者要探索的是使用 Appium Inspector 对手机端浏览器进行元素定位，因此此处并未设计 app 包名即 appium:appPackage、app activity 即 appium:appActivity 等相关的配置，取而代之的是 appium:browserName）。
如此，便可以开始连接我们的设备了，如安卓虚拟机、安卓机器；
5. 系统环境变量处理；
-
配置完成后，我们点击应用的右下角的 “Start Session” 按钮，连接我们的设备；
-
然而，刚开始可能会遇到一些问题，比如下面的报错：
Failed to create session.
An unknown server-side error occurred while processing the command. Original error: Cannot verify the signature of '/Applications/Appium Server GUI.app/Contents/Resources/app/node_modules/appium/node_modules/appium-uiautomator2-server/apks/appium-uiautomator2-server-v4.24.0.apk'. Original error: The JAVA_HOME environment variable must be set for Android Tools to work properly
-
根据报错提示，需要设置 JAVA_HOME 环境变量，具体步骤为：
a. 命令行打开 ~/.bash_profile 文件：
vi ~/.bash_profile
b. ~/.bash_profile 文件内按 i 进入编辑模式
c. 在 ~/.bash_profile 文件内增加内容：
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-18.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH
export CLASSPATH=$JAVA_HOME/lib
其中 JAVA_HOME 的值需要读者自行在电脑上找到对应的文件夹；
d. 按键盘的 esc 按钮；
e. ~/.bash_profile 文件中输入如下文本并回车，完成保存；
:wq!
-
完成后再次点击 “Start Session” 按钮，如果还存在问题，则需要重启 Appium Inspector（忘记我探索过程中是否有因为重启解决了这个问题，总之重启过）。
6. 启动 Session；
-
前提是我们已经启动了 Appium Server，这个参考上期文章中 Appium 安卓自动化（环境搭建） 中的步骤7，启动 appium server；
-
当然还有启动好了安卓虚拟机或已连接安卓机器；
-
点击 Appium Inspector 上右下角的 “Start Session” 按钮启动 Session；
-
稍等片刻后，我们的安卓虚拟机或安卓设备打开 Chrome 浏览器空白页面：
-
同时，Appium Inspector 变为：
如此，便表示 Session 已经创建成功；
7. 使用 Appium Inspector 进行元素定位；
作为演示用途，我将演示菜鸟教程网站后，获取菜鸟教程网站页面上的元素定位。
-
手机端输入网址访问菜鸟教程网站：
-
Appium Inspector 点击刷新按钮；
-
选择被测对象的类型；
这个有 2 个选项，一个是 Native App Mode（原生 App 模型），一个是 Web/Hybrid App Mode（网页或混合应用模型），默认是 Native App Mode，在本例我需要切换为 Web/Hybrid App Mode，否则无法进行元素定位；
-
使用选择元素入口进行元素定位；
（双击 xpath 值即可进行复制 xpath 值）
至此，我们已经能通过 Appium Inspector 定位手机网页上页面元素。
特别注意：
-
实际操作过程中，我发现，利用 Appium Inspector 定位手机网页页面元素经常难以精准定位，效果极差，因此，手机网页上页面元素还是更推荐使用桌面浏览器的 emulator 对元素进行定位，效果如下：
-
反观利用 Appium Inspector 定位原生 app 的页面元素，则效果比较好，如对系统闹钟这个应用内的元素进行定位：
虽然本次探索学习并未能很好地达到定位手机网页页面元素的目的，但也并非一无是处，其价值体现在：
1. 了解了利用 Appium Inspector 定位手机网页页面元素这种方式并不靠谱；
2. 为将来原生应用页面元素定位奠定知识基础；
至此，我们已通过探索、学习，基本掌握了 Appium Inspector 定位元素的知识，今天先到这里，再接再厉~
能力有限，欢迎指正、互相交流，感谢~
如果本文对您有帮助，麻烦点赞、关注！
感谢~