使用uiautomator2与Weditor可视化分析App组件树-育师

1. 为什么需要可视化查看App组件树？

在移动应用测试和逆向分析中，能够直观地查看App的UI组件结构是一项基础但至关重要的能力。传统的uiautomator虽然提供了dump命令获取界面层级，但纯文本的XML输出对于复杂界面来说简直就是一场噩梦——想象一下面对嵌套了十几层的LinearLayout和RelativeLayout，连找个按钮都要在几千行代码里大海捞针。

这就是uiautomator2+Weditor组合的价值所在。通过将界面元素以树形结构可视化呈现，我们可以：

快速定位目标控件的层级路径
直观分析组件间的包含关系
实时验证选择器表达式的准确性
发现冗余嵌套导致的性能问题

2. 环境搭建与工具配置

2.1 安装uiautomator2核心库

建议使用Python虚拟环境避免依赖冲突：

python -m venv u2env source u2env/bin/activate # Linux/Mac u2env\Scripts\activate # Windows pip install --upgrade uiautomator2 weditor

2.2 设备端服务部署

在电脑上安装完成后，需要初始化设备环境：

python -m uiautomator2 init

这个命令会自动：

推送atx-agent到设备（需adb连接）
安装minicap用于屏幕流传输
部署com.github.uiautomator APK

注意：部分国产ROM需要手动开启USB调试安全设置，遇到初始化失败时可尝试：adb shell settings put global hidden_api_policy_pre_p_apps 1

3. Weditor可视化分析实战

3.1 启动Weditor服务

执行以下命令启动Web版编辑器：

python -m weditor

浏览器会自动打开http://localhost:17310（端口可能变化）

3.2 连接目标设备

在Weditor界面：

顶部输入设备序列号（adb devices可查）
点击"Connect"按钮
成功连接后会自动刷新当前界面

连接成功后你会看到类似这样的控制台输出：

[I 210101 10:00] Device serial: emulator-5554 [I 210101 10:00] ATX agent version: 0.8.0 [I 210101 10:00] Screen size: 1080x1920

3.3 解析组件树结构

点击"Refresh"按钮获取当前界面层级，Weditor会呈现：

左侧：完整的VM树形结构
右侧：实时设备屏幕截图
底部：选中节点的详细属性

关键操作技巧：

鼠标悬停截图区域会高亮对应组件
右键节点可复制XPath或生成uiautomator定位代码
双击节点展开/折叠子树

4. 深度解析组件属性

4.1 关键属性说明

通过Weditor可以获取到每个UI元素的完整属性集，其中最重要的包括：

属性名	说明	示例值
resource-id	组件唯一标识符	com.demo:id/btn_login
text	显示文本内容	"立即登录"
class	组件类型	android.widget.Button
bounds	屏幕坐标范围	[42,100][138,156]
clickable	是否可点击	true
package	所属应用包名	com.example.app

4.2 动态属性监控

Weditor的高级功能在于可以实时监控属性变化：

选中目标节点
点击"Watch"按钮
操作APP触发界面更新
属性变化会以红色高亮显示

这个功能特别适合分析：

动态加载的列表项
状态切换时的属性变化
动画过程中的布局调整

5. 实战案例：微信登录页分析

让我们以微信登录界面为例演示完整流程：

确保微信处于登录页
在Weditor点击"Refresh"
在树形结构中定位到"登录"按钮

观察其关键属性：

{ "resource-id": "com.tencent.mm:id/c2f", "text": "登录", "class": "android.widget.Button", "bounds": "[540,1460][900,1580]" }

右键选择"Copy UIAUTOMATOR Code"得到：

new UiSelector().resourceId("com.tencent.mm:id/c2f")

6. 常见问题排查指南

6.1 元素无法定位

现象：组件树中找不到目标元素解决方案：

检查是否启用了无障碍服务

adb shell settings put secure enabled_accessibility_services com.github.uiautomator/com.github.uiautomator.Service

尝试关闭手机上的省电模式

对于WebView内容需要额外启用：

adb shell am broadcast -a com.github.uiautomator.ENABLE_DEBUG -n com.github.uiautomator/.Receiver

6.2 截图与界面不同步

现象：Weditor显示的截图滞后解决方法：

更换minicap版本：
```
python -m uiautomator2 init --reinstall
```

调整截图质量参数：

import uiautomator2 as u2 d = u2.connect() d.set_new_command_timeout(300)

7. 性能优化技巧

对于复杂界面（如电商首页），组件树可能包含上千个节点，这时可以：

使用过滤功能精简显示：

# 只显示TextView和Button d.xpath('//*[@class="android.widget.TextView" or @class="android.widget.Button"]')

启用快速刷新模式（会降低截图质量）：
```
d.implicitly_wait(2.0) # 设置隐式等待时间
```

对于动态加载内容，建议结合：

d.wait_until(lambda: d(text="加载更多").exists())

8. 进阶应用场景

8.1 自动化测试脚本生成

Weditor可以直接导出操作代码：

在界面执行手动操作
点击"Record"按钮开始录制
停止录制后导出Python脚本

生成的代码示例：

d(text="设置").click() d(className="android.widget.ListView").child(text="关于手机").click()

8.2 跨应用组件分析

通过指定包名可以分析后台应用：

d = u2.connect() d.app_start("com.tencent.mm") # 启动微信 d.app_wait("com.tencent.mm") # 等待启动完成

8.3 结合Poco框架使用

对于游戏类应用可以混合使用：

from poco.drivers.android.uiautomation import AndroidUiautomationPoco poco = AndroidUiautomationPoco() poco("com.demo:id/btn_start").click()

9. 安全注意事项

生产环境慎用：Weditor会持续截图可能涉及隐私
及时断开连接：分析完成后执行
```
d.service("uiautomator").stop()
```
权限最小化原则：仅授予必要的无障碍权限
测试数据清理：
```
adb uninstall com.github.uiautomator
```

10. 工具链扩展建议

完整的移动端测试方案可以集成：

Appium：跨平台测试框架
STF：设备农场管理
Allure：测试报告生成
Jenkins：持续集成

配置示例：

# 在Jenkins pipeline中加入 stage('UI Test') { steps { sh 'python -m weditor --port 17310' sh 'pytest tests/android/' } }

在实际项目中，我通常会建立组件快照库，将关键页面的组件树保存为JSON基准，后续测试时进行差异化对比，这样可以快速发现UI改版导致的用例失效问题。对于深度定制ROM的设备，建议自行编译atx-agent以确保兼容性。

使用uiautomator2与Weditor可视化分析App组件树