ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

Uniswap 移动端 UI 流程自动化测试指南:基于 argent MCP 工具的截图-交互-验证闭环

Uniswap 移动端 UI 流程自动化测试指南:基于 argent MCP 工具的截图-交互-验证闭环 区块链DeFi前端移动开发【免费下载链接】interface Open source interfaces for the Uniswap protocol项目地址https://gitcode.com/gh_mirrors/in/interface点击查看免费下载本文面向在本仓库Uniswap interface含 apps/mobile 移动端 React Native 应用中从事 iOS/Android 端到端 UI 测试的开发者与 AI Agent系统讲解如何利用 argent MCP 工具通过“截图 → 交互 → 验证”的循环自动完成 UI 流程测试。读完本文你将掌握如何获取模拟器/仿真器设备标识udid、如何在不同类型的界面上正确选择元素发现工具、如何用统一的手势工具执行点击/滑动/输入、如何依据自动截图做结果验证以及当测试失败时如何按恢复模式自愈并将重复流程录制成可重放的.yaml脚本。一、技能定位平台无关的 UI 测试循环argent-test-ui-flow的核心工作模式是一条交互-截图-验证interact-screenshot-verify循环所有交互都经由 argent MCP 工具完成每一步动作后工具会自动附带一张截图作为即时验证的依据。它适用于验证登录、测试导航、执行端到端 UI 测试场景等任务是 argent-react-native-app-workflow 中“交互式 UI 测试”环节的专用技能。该技能的关键设计是平台无关Platform-agnostic交互工具名称在 iOS 与 Android 上完全一致——gesture-tap、gesture-swipe、describe、screenshot、launch-app等。工具服务器会根据你传入的udid形状自动分派目标平台UUID 形状如A1B2C3D4-E5F6-7890-ABCD-EF1234567890→ 视为 iOS 模拟器adb serial 形状如emulator-5554→ 视为 Android 设备。因此同一套测试脚本无需为平台写两套调用唯一需要区分的只是“如何拿到udid”。具体获取方式可参考下表平台配套 Setup 技能设备发现流程iOSargent-ios-simulator-setuplist-devices→ 若无已启动设备用udid调用boot-deviceAndroidargent-android-emulator-setuplist-devices→ 若无就绪设备用avdName调用boot-device从源码级看argent-android-emulator-setup 还明确了 Android 侧的两条硬性前置一是adb version与emulator -list-avds需可执行Android SDK Platform Tools 与 Emulator 在 PATH 上AVD 已通过 Android Studio 或avdmanager create avd创建二是 React Native 场景下必须先执行adb -s serial reverse tcp:8081 tcp:8081否则设备无法访问宿主机上的 Metro 开发服务器。iOS 侧则只需list-devices过滤platform: ios的条目未启动时用boot-device配合 UUID 形状的udid启动即可。二、五步工作流一次测试的完整循环在开始任何交互前必须确保模拟器/仿真器已就绪参见上文设备获取。随后按以下五步执行基线截图Baseline screenshot调用screenshot查看当前 UI 状态作为后续验证的对照基准。定位目标Find target在点击之前必须先用发现工具拿到元素坐标而不是凭猜测点击React Native 应用使用debugger-component-tree——它返回带(tap: x,y)坐标的组件名是 RN 应用无论 iOS 还是 Android的首选工具。使用前需按 argent-react-native-app-workflow 解决环境在 Android 上还必须执行adb -s serial reverse tcp:8081 tcp:8081让 Metro 从设备可达。标准应用界面与应用内弹窗使用describe。在 iOS 上它返回 AX 无障碍树AX 为空时回退到 native-devtools在 Android 上返回相同 DescribeNode 形状的 uiautomator 树。权限弹窗 / 系统级模态覆盖层优先尝试describe仅当覆盖层无法被可靠暴露时才回退到screenshot。兜底方案用screenshot估算目标组件的大致位置并在动作完成后立即验证。执行交互Interact执行动作gesture-tap、gesture-swipe、keyboard、button等——工具会自动返回一张截图。验证Verify检查返回的截图是否符合预期结果若截图显示加载中/过渡态用screenshot重拍一张。重复Repeat对流程中的每一步依次重复上述循环。关于第 2 步“定位目标”argent-device-interact 给出了更细的选型矩阵值得在此补充普通目标发现用describe任意 App、系统对话框、主屏幕均可用无需重启应用或提供 bundleIdRN 应用用debugger-component-tree返回组件名、文本、testID 与点击坐标App 作用域内的原生层用native-describe-screen需 bundleId权限/系统模态覆盖层用describescreenshot仅作为最终视觉兜底。此外若已有一个候选坐标点想确认“谁会真正收到这次触摸”还可以用native-user-interactable-view-at-point/native-view-at-point做原生级诊断均需 bundleId。三、流程模板与坐标约定技能提供了一份可直接套用的流程模板方便把任意测试目标固化成结构化步骤Goal: Test [feature name] Steps: 1. screenshot → see current state (baseline) 2. [Navigate / tap / type to reach starting point] → verify auto-screenshot 3. [Perform the action to test] → verify auto-screenshot 4. Report: pass / fail with details模板隐含了两条重要约定每一步交互后都要验证自动截图这是“截图-交互-验证”闭环的强制性环节最终必须给出明确的 pass / fail 结论并附细节即“报告要写清楚你预期什么、实际看到什么、结论是什么”。坐标系统方面argent-device-interact 明确所有手势坐标都是归一化的 0.0–1.0屏幕宽高的比例而非像素。0.0代表左/上1.0代表右/下。本技能给出三个常用估算锚点便于在没有发现工具时快速估计位置屏幕中心 ≈(0.5, 0.5)顶部三分之一 ≈y: 0.2底部三分之一 ≈y: 0.8四、实战示例4.1 登录流程Login flow登录是验证“界面交互可用性”最典型的场景。示例用坐标估算完成输入与提交1. screenshot → see login screen 2. gesture-tap { x: 0.5, y: 0.4 } → tap email field 3. paste { text: userexample.com } 4. gesture-tap { x: 0.5, y: 0.55 } → tap password field 5. paste { text: password123 } 6. gesture-tap { x: 0.5, y: 0.7 } → tap Login button 7. screenshot → verify home screen appeared这里的paste是 iOS 专属的快速文本输入工具走剪贴板比逐键敲入的keyboard更快更可靠在 Android 上paste会被能力门禁拒绝返回 “Tool paste is not supported on android”应直接改用keyboard。二者均要求先gesture-tap聚焦输入框。4.2 滚动与导航Scroll and navigation列表滚动与返回导航的组合验证gesture-swipe与button的典型用法1. screenshot → see list at top 2. gesture-swipe { fromY: 0.7, toY: 0.3 } → scroll down 3. gesture-tap item at visible position → verify auto-screenshot 4. screenshot → verify detail view opened 5. button { button: back } 6. screenshot → verify returned to list注意gesture-swipe的方向语义向上滑动fromY toY内容向下滚动与真实触控方向相反。默认时长 300ms可用可选参数durationMs如 500ms放慢滑动。button工具的取值包括home、back、power、volumeUp、volumeDown、appSwitch、actionButton完整参数见 argent-device-interact §6。五、恢复模式Recovery Pattern自动化测试必然会遇到截图与预期不符的情况。技能规定了明确的恢复策略按严重程度递进截图显示加载/过渡状态等待 500ms用screenshot重拍。点击未命中目标重新运行发现工具describe/debugger-component-tree用新坐标重试一次。出现权限对话框或模态框先重新运行describe只有当覆盖层无法被可靠暴露时才停留在纯截图驱动的导航中一旦对话框被关闭就立刻切回describe/debugger-component-tree。同一坐标连续两次点击失败停止重新发现元素若元素确实不存在如实报告。已保存的 flow 在flow-execute重放时失败区别于上述实时测试步骤按 argent-create-flow §10 的结构化诊断与修正流程处理——先分类结果Success / Hard error / Silent misfire / Partial divergence再诊断根因坐标漂移、元素缺失、错误界面、时序、状态不匹配随后按“最轻策略优先”的原则选择编辑 YAML策略 1、手动恢复并继续策略 2、从失败点重新录制策略 3、全量重录策略 4并遵守最多 2 轮修正循环的硬性上限。从 argent-create-flow 的实现看重放失败最常见的原因是 UI 布局变化导致的坐标漂移为此该技能在录制阶段就强调“echo 描述预期状态而非仅记录动作”“关键导航后插入 screenshot 步骤”“编写具体的 executionPrerequisite”“优先用launch-app/open-url深链而非点击链导航”“为坐标点击补充无障碍标签 echo”这些措施本质上是在降低本技能恢复模式被触发的频率。六、最佳实践 Tips 汇总技能末尾给出的一组实战提示是整个测试循环的“软技能”逐条展开如下iOS 文本输入优先用paste比逐键keyboard更快更可靠paste仅限 iOSAndroid 直接用keyboardkeyboard支持enter、escape、backspace、tab、space、方向键、f1–f12等特殊键可选delayMs控制击键间隔默认 50ms。长按上下文菜单用gesture-custom800ms 按住即可参考事件序列[Down, delayMs: 800, Up]的写法完整的手势事件示例见 gesture-examples.md。报告要清晰明确写出预期、所见与结论expected / saw / verdict这是 pass/fail 结论成立的依据。坐标估算锚点中心 0.5, 0.5顶部三分之一 ≈0.2底部三分之一 ≈0.8见第三节。权限弹窗处理先describe仅回退screenshot一次只点一个可见按钮并用返回的截图验证后再继续。为可重复流程录制 flow若某个测试流程很可能被反复执行用argent-create-flow技能把它录制成.yaml脚本之后只需一次flow-execute调用即可重放整个序列而无需手动重跑每一步。录制时每一步都会实时执行一次成功才写入最终 YAML 顶层包含executionPrerequisite与steps数组echo标签与tool调用args为 JSON 字符串例如executionPrerequisite: Simulator booted with app installed steps: - echo: Launch Settings app - tool: launch-app args: udid: ABC bundleId: com.apple.Preferences - echo: Tap General - tool: gesture-tap args: udid: ABC x: 0.5 y: 0.356.1 进一步提升可靠性的建议结合 argent-device-interact 的补充说明还有几条与本技能强相关的进阶建议先加载手势工具 schema 再调用gesture-tap、gesture-swipe、gesture-pinch、gesture-rotate、gesture-custom可能是延迟加载的未加载前参数会被强制转成字符串导致校验错误因此首次使用前务必用 ToolSearch 加载计划用到的全部手势工具 schema。批量步骤用run-sequence当一段交互无需观察中间结果如“滚动到底”“连续填表并提交”时可把多个交互步骤合并为一次工具调用仅在所有步骤完成后返回一张截图udid在顶层共享、无需重复传入每个步骤可设可选delayMs默认 100ms。依赖前一步结果的步骤不可用run-sequence。截图参数scalescreenshot默认将截图缩放到原始分辨率的 30% 以减小上下文体积需要看清细节时传{ udid: UDID, scale: 1.0 }获取全分辨率。若截图超时可用stop-simulator-server重启模拟器服务详见 argent-device-interact §7。只通过launch-app/open-url打开应用永远不要点击主屏图标来导航到应用——launch-app按 bundleId与open-url按 URL scheme如messages://、maps://?qquery、https://...瞬时且可靠。截屏证据升级若需要把“验证”升级为可留档的像素级证据例如 Tamagui 迁移批次的 before/after 对比可参考 argent-screenshot-diff 的screenshot-diff流程——它自动从像素与 OCR 两种比较中排除固定的状态栏区域时钟、电量、信号并强制要求scale: 1.0捕获、同型号同 OS 的设备、静止后再拍摄等确定性约束。七、相关技能地图argent-test-ui-flow是 argent 技能体系中的“测试执行层”与之协同的上下游技能如下技能使用时机argent-device-interact点击、滑动、输入等工具用法iOS Android含全部手势/按钮/键盘参数与run-sequenceargent-ios-simulator-setup启动并连接 iOS 模拟器获取 UUID 形状的udidargent-android-emulator-setup启动并连接 Android 仿真器获取 adb serial配置adb reverseargent-react-native-app-workflow启动应用、Metro、构建问题的处理含本仓库bun mobile start等自定义脚本与 Android 发布变体的陈旧缓存陷阱argent-metro-debugger断点、控制台日志、JS 求值debugger-component-tree、debugger-evaluate等均属此技能argent-create-flow把测试序列录制成可重放的 flowflow-start-recording→flow-add-step→flow-finish-recording→flow-execute以及重放失败的结构化诊断与修正八、在 Uniswap 移动端仓库中的落地本技能面向的应用即为仓库中的 apps/mobileuniswap/mobile基于 Expo 56 / React Native 0.85.3 / React 19.2.3。在该仓库中使用本技能时有两个与本技能直接相关的工程细节值得注意启动 Metro 的脚本不是默认命令argent-react-native-app-workflow 强制要求先阅读项目配置再跑命令——本仓库的移动端启动脚本是bun mobile start对应 apps/mobile/package.json 中的start: nx start mobile而非默认的npx react-native startAndroid 上构建/运行走nx android mobile -c flavor系列脚本。测试前应先确认debugger-status显示 Metro 已就绪。RN 目标发现依赖 Metro 可达debugger-component-tree在 Android 上工作的前提是adb -s serial reverse tcp:8081 tcp:8081已生效设备重启或 adb 断开后需重跑这也是本技能第二步“Find target”在 Android 侧最容易踩的坑。总体而言argent-test-ui-flow提供了一条低成本、可自愈、可重放的移动端 UI 测试路径先取基线截图再按界面类型选择正确的发现工具拿到坐标交互后即时验证自动截图失败时按恢复模式逐级自救并把高频流程固化为.yaml重放脚本。配合本文梳理的工具参数与工程细节即可在 Uniswap 移动端以及任意 React Native 应用上稳定地执行登录、导航等端到端 UI 测试。赞分享区块链DeFi前端移动开发【免费下载链接】interface Open source interfaces for the Uniswap protocol项目地址https://gitcode.com/gh_mirrors/in/interface点击查看免费下载相关推荐Uniswap interface 移动端视觉回归指南基于 argent screenshot-diff 的前后截图对比实战Uniswap interface 移动端视觉回归指南基于 argent screenshot diff 的前后截图对比实战 本指南围绕 interface区块链DeFi前端移动开发Uniswap 移动端 React NativeHermes性能剖析实战基于 argent-react-native-profiler 的全程测量工作流Uniswap 移动端 React NativeHermes性能剖析实战基于 argent react native profiler 的全程测量工作流区块链DeFi前端移动开发interface 项目 Android 模拟器接入指南基于 argent MCP 工具的设备启动、连接与自动化交互interface 项目 Android 模拟器接入指南基于 argent MCP 工具的设备启动、连接与自动化交互 本文面向在 Uniswap interf区块链DeFi前端移动开发上一篇从零构建RISC-V操作系统OS Kernel Lab完整指南下一篇Spowlo新手入门5分钟快速掌握Spotify音乐下载技巧创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进