android_ui_verification

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Android UI Verification Skill

Android UI验证技能

This skill provides a systematic approach to testing React Native applications on an Android emulator using ADB commands. It allows for autonomous interaction, state verification, and visual regression checking.

本技能提供了一套系统性方法，可通过ADB命令在Android模拟器上测试React Native应用，支持自主交互、状态验证和视觉回归检查。

When to Use

适用场景

Verifying UI changes in React Native or Native Android apps.
Autonomous debugging of layout issues or interaction bugs.
Ensuring feature functionality when manual testing is too slow.
Capturing automated screenshots for PR documentation.

验证React Native或原生Android应用中的UI变更。
自主调试布局问题或交互Bug。
当手动测试效率过低时，确保功能可用性。
自动捕获截图用于PR文档。

🛠 Prerequisites

🛠 前置条件

Android Emulator running.
```
adb
```
installed and in PATH.
Application in debug mode for logcat access.

Android模拟器正在运行。
```
adb
```
已安装且已添加至系统PATH。
应用处于调试模式，可访问logcat。

🚀 Workflow

🚀 工作流程

1. Device Calibration

1. 设备校准

Before interacting, always verify the screen resolution to ensure tap coordinates are accurate.

bash

adb shell wm size

Note: Layouts are often scaled. Use the physical size returned as the base for coordinate calculations.

交互前请务必验证屏幕分辨率，确保点击坐标准确。

bash

adb shell wm size

注意：布局通常会被缩放。请使用返回的物理尺寸作为坐标计算的基准。

2. UI Inspection (State Discovery)

2. UI检查（状态发现）

Use the

uiautomator

dump to find the exact bounds of UI elements (buttons, inputs).

bash

adb shell uiautomator dump /sdcard/view.xml && adb pull /sdcard/view.xml ./artifacts/view.xml

Search the

view.xml

for

text

content-desc

, or

resource-id

. The

bounds

attribute

[x1,y1][x2,y2]

defines the clickable area.

使用

uiautomator

dump查找UI元素（按钮、输入框）的精确边界。

bash

adb shell uiautomator dump /sdcard/view.xml && adb pull /sdcard/view.xml ./artifacts/view.xml

在

view.xml

中搜索

text

、

content-desc

或

resource-id

，

bounds

属性

[x1,y1][x2,y2]

定义了可点击区域。

3. Interaction Commands

3. 交互命令

Tap:
```
adb shell input tap <x> <y>
```
(Use the center of the element bounds).

Swipe:

adb shell input swipe <x1> <y1> <x2> <y2> <duration_ms>

(Used for scrolling).

Text Input:
```
adb shell input text "<message>"
```
(Note: Limited support for special characters).
Key Events:
```
adb shell input keyevent <code_id>
```
(e.g., 66 for Enter).

点击：
```
adb shell input tap <x> <y>
```
（使用元素边界的中心坐标）。

滑动：

adb shell input swipe <x1> <y1> <x2> <y2> <duration_ms>

（用于滚动操作）。

文本输入：
```
adb shell input text "<message>"
```
（注意：对特殊字符的支持有限）。
按键事件：
```
adb shell input keyevent <code_id>
```
（例如，66对应回车键）。

4. Verification & Reporting

4. 验证与报告

Visual Verification

视觉验证

Capture a screenshot after interaction to confirm UI changes.

bash

adb shell screencap -p /sdcard/screen.png && adb pull /sdcard/screen.png ./artifacts/test_result.png

交互后截取屏幕截图，确认UI变更正确。

bash

adb shell screencap -p /sdcard/screen.png && adb pull /sdcard/screen.png ./artifacts/test_result.png

Analytical Verification

分析验证

Monitor the JS console logs in real-time to detect errors or log successes.

bash

adb logcat -d | grep "ReactNativeJS" | tail -n 20

实时监控JS控制台日志，检测错误或记录成功状态。

bash

adb logcat -d | grep "ReactNativeJS" | tail -n 20

Cleanup

清理

Always store generated files in the

artifacts/

folder to satisfy project organization rules.

请始终将生成的文件存储在

artifacts/

文件夹中，符合项目组织规范。

💡 Best Practices

💡 最佳实践

Wait for Animations: Always add a short sleep (e.g., 1-2s) between interaction and verification.
Center Taps: Calculate the arithmetic mean of
```
[x1,y1][x2,y2]
```
for the most reliable tap target.
Log Markers: Use distinct log messages in the code (e.g.,
```
✅ Action Successful
```
) to make
```
grep
```
verification easy.
Fail Fast: If a
```
uiautomator dump
```
fails or doesn't find the expected text, stop and troubleshoot rather than blind-tapping.

等待动画结束：在交互和验证之间请添加短暂的等待时间（例如1-2秒）。
点击中心位置：计算
```
[x1,y1][x2,y2]
```
的算术平均值作为最可靠的点击目标。
日志标记：在代码中使用独特的日志消息（例如
```
✅ Action Successful
```
），便于通过
```
grep
```
快速验证。
快速失败：如果
```
uiautomator dump
```
失败或未找到预期文本，请停止操作并排查问题，不要盲目点击。