Android UI Verification

Android UI Verification Skill

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.

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.

🛠 Prerequisites

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

🚀 Workflow

1. Device Calibration

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

adb shell wm size

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

2. UI Inspection (State Discovery)

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

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.

3. Interaction Commands

• 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).

4. Verification & Reporting

Visual Verification

Capture a screenshot after interaction to confirm UI changes.

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.

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

Cleanup

Always store generated files in the artifacts/ folder to satisfy project organization rules.

💡 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.

AGI Framework Integration

Adapted for @techwavedev/agi-agent-kit Original source: antigravity-awesome-skills

Memory-First Protocol

Retrieve prior design decisions (color palettes, typography, spacing scales) to maintain visual consistency across sessions. Cache generated design tokens.

# Check for prior frontend/design context before starting
python3 execution/memory_manager.py auto --query "design system decisions and component patterns for Android Ui Verification"

Storing Results

After completing work, store frontend/design decisions for future sessions:

python3 execution/memory_manager.py store \
  --content "Design system: adopted 8px grid, Inter font family, HSL color tokens with dark mode support" \
  --type decision --project <project> \
  --tags android_ui_verification frontend

Multi-Agent Collaboration

Share design decisions with backend agents (API contract changes) and QA agents (visual regression baselines).

python3 execution/cross_agent_context.py store \
  --agent "<your-agent>" \
  --action "Implemented UI components — new design system with accessibility compliance (WCAG 2.1 AA)" \
  --project <project>

Design Memory Persistence

Store design system tokens and component decisions in Qdrant so any agent on any platform (Claude, Gemini, Cursor) can retrieve and apply consistent styling.