前言
来啦老铁!
如我在上期文章 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 定位元素的知识,今天先到这里,再接再厉~
能力有限,欢迎指正、互相交流,感谢~
如果本文对您有帮助,麻烦点赞、关注!
感谢~
网友评论