WEditor:高效的移动端UI自动化脚本可视化编辑器
- 前言
- 一、核心特性与优势
- 1. 可视化操作,降低门槛
- 2. 跨平台支持
- 3. 丰富的控件层级展示
- 4. 快捷键高效操作
- 5. 开源可扩展
- 二、安装与环境配置
- 1. 环境准备
- Android 设备用户需额外准备
- ADB 安装与配置步骤
- 2. 安装依赖
- 3. 启动服务
- Windows 用户
- Mac/Linux 用户
- 4. 连接设备
- 三、功能详解与典型场景
- 1. 屏幕实时预览与操作
- 2. 控件层级树与属性查看
- 3. 脚本编辑与运行
- 4. 代码片段与模板复用
- 5. 多设备管理
- 四、常见问题与解决方案
- 1. 启动后无法连接设备
- 2. 控件树无法获取或显示异常
- 3. 脚本运行报错
- 4. 端口冲突
- 五、与同类工具对比
- 结语
前言
App自动化脚本传统的编写方式门槛较高,涉及到控件定位、层级遍历、事件模拟等复杂操作。为降低自动化测试的门槛,提高测试效率,阿里巴巴开源了 WEditor ,一款可视化UI脚本编辑器。
WEditor 作为 OpenATX 生态的重要子项目,致力于为测试工程师、开发者提供一个所见即所得的 UI 自动化脚本编辑环境。它通过 Web 浏览器实现跨平台操作,支持主流的 Android/iOS 设备,极大地提升了 UI 自动化脚本的开发效率和可维护性。
一、核心特性与优势
1. 可视化操作,降低门槛
WEditor 提供了类似“录制回放”的可视化界面,用户可以通过鼠标点击、拖拽等方式,直接在页面上操作手机屏幕,自动生成对应的自动化脚本。无需手写繁琐的定位代码,极大降低了自动化测试的入门门槛。
2. 跨平台支持
WEditor 基于 Web 技术开发,支持 Windows、Mac、Linux 等主流操作系统。只需安装 Python3 环境及相关依赖,即可在本地启动服务,通过浏览器访问,无需额外配置。
3. 丰富的控件层级展示
通过 Dump Hierarchy 功能,WEditor 能够实时展示当前设备屏幕的控件树结构,支持节点展开、属性查看、XPath 路径自动生成等,方便用户精准定位控件。
4. 快捷键高效操作
WEditor 针对 Windows 和 Mac 平台分别设计了高效的快捷键组合,如 Ctrl+Enter/Command+Enter 一键运行脚本,Ctrl+Shift+Enter/Command+Shift+Enter 运行选中代码等,大幅提升开发效率。
5. 开源可扩展
WEditor 采用 MIT 协议开源,支持二次开发和定制。开发者可根据自身业务需求,扩展功能或集成到现有测试平台中。
二、安装与环境配置
1. 环境准备
- 操作系统:Windows 10/11、macOS、Linux
- Python 版本:3.6 及以上
- 浏览器:推荐 Google Chrome
Android 设备用户需额外准备
- ADB 工具(Android Debug Bridge),用于与 Android 设备通信。
ADB 安装与配置步骤
-
下载 ADB 工具包
访问 https://adbdownload.com/,根据操作系统下载对应版本。 -
解压并配置环境变量
-
将下载的压缩包解压到任意目录(如
D:\platform-tools
)。
-
将该目录添加到系统环境变量
PATH
中。
Windows 下可在“系统属性”→“高级”→“环境变量”中设置。
-
-
验证 adb 是否安装成功
打开命令行(Windows 可用 PowerShell),输入:adb version
若能正确显示 adb 版本号,说明安装成功。
-
连接手机并开启 USB 调试
- 手机通过 USB 连接电脑。
- 手机端开启“开发者选项”及“USB 调试”。
- 在命令行输入:
若能看到设备序列号,说明连接成功。adb devices
2. 安装依赖
WEditor 依赖于 uiautomator2(Android自动化)和 facebook-wda(iOS自动化),请根据目标设备类型提前安装好相关依赖。
pip install weditor
如需开发调试,可克隆源码后本地安装:
git clone https://github.com/openatx/weditor
pip install -e weditor
3. 启动服务
Windows 用户
可通过命令行或桌面快捷方式启动:
weditor --shortcut
# 或
weditor
Mac/Linux 用户
直接在终端输入:
weditor
启动后,WEditor 会自动打开浏览器并访问本地服务(默认端口 17310)。
4. 连接设备
确保手机已通过 USB 连接到电脑,并开启了开发者模式及 USB 调试。对于 iOS 设备,需配置 WebDriverAgent 并信任证书。
注意:
- Android 设备需确保 adb 工具已正确安装并可在命令行中使用。可通过
adb devices
命令检查设备连接状态。- 若未安装 adb,WEditor 将无法识别 Android 设备。
三、功能详解与典型场景
1. 屏幕实时预览与操作
WEditor 启动后,主界面会实时显示当前连接设备的屏幕截图。用户可直接在界面上点击、滑动、长按等,模拟真实用户操作。每一次操作都会被记录,并可自动生成对应的自动化脚本。
2. 控件层级树与属性查看
点击“Dump Hierarchy”或右键屏幕,可获取当前页面的控件树。支持节点展开、收起,点击任意节点可查看其详细属性(如 resource-id、class、text、bounds 等),并可一键复制 XPath 路径。
3. 脚本编辑与运行
WEditor 内置代码编辑器,支持 Python 语法高亮、自动补全。用户可在编辑器中编写、修改自动化脚本,并通过快捷键或按钮一键运行。运行结果会在下方输出区域实时展示,便于调试。
4. 代码片段与模板复用
支持常用操作的代码片段插入,如点击、输入、滑动、等待等。用户可自定义模板,提高脚本复用率,减少重复劳动。
5. 多设备管理
支持同时连接多台设备,用户可在界面上切换目标设备,进行并行测试或多端对比。
四、常见问题与解决方案
1. 启动后无法连接设备
- 检查手机是否正确连接,USB 调试是否开启。
- Android 需安装 uiautomator2,并确保 adb 工具已安装且设备已被识别。
- iOS 需配置 WebDriverAgent。
- 尝试重启 WEditor 或更换 USB 端口。
2. 控件树无法获取或显示异常
- 某些 App 存在防抓取机制,可尝试切换页面或重启 App。
- 检查 uiautomator2 服务是否正常运行。
3. 脚本运行报错
- 检查 Python 依赖是否完整,建议使用虚拟环境隔离。
- 查看输出日志,定位具体报错信息。
4. 端口冲突
- 默认端口为 17310,如被占用可通过
weditor --port 端口号
指定新端口。
五、与同类工具对比
工具 | 可视化编辑 | 多平台支持 | 脚本导出 | 社区活跃度 | 易用性 |
---|---|---|---|---|---|
WEditor | ✅ | ✅ | ✅ | 高 | 高 |
Appium Inspector | ✅ | ✅ | ✅ | 高 | 中 |
UIAutomator Viewer | 部分 | Android | ❌ | 中 | 低 |
AirtestIDE | ✅ | ✅ | ✅ | 高 | 高 |
WEditor 在可视化编辑、易用性、脚本导出等方面表现突出,适合快速上手和大规模用例维护。
结语
WEditor 作为一款开源的移动端 UI 自动化脚本可视化编辑器,极大降低了自动化测试的门槛,提高了测试效率和脚本可维护性。
参考资料:
- alibaba/web-editor GitHub 仓库
- uiautomator2 官方文档
- facebook-wda 官方文档
- uiauto.dev 新一代自动化平台