mcpField
A
android_ui_verification

android_ui_verification

github.com/sickn33テスト・品質48.7k126 回インストール今日更新
リポジトリ

android_ui_verification について

React Native とネイティブ Android アプリを対象に、ADB で Android エミュレーター上の状態や操作を確認する UI 検証スキルです。開発者が画面変更の確認やレイアウト・操作上の問題の調査に使えます。

主な機能

  1. 01uiautomator による UI 要素の確認
  2. 02ADB によるタップ、スワイプ、入力
  3. 03変更確認用スクリーンショットの撮影
  4. 04ReactNativeJS ログの確認
  5. 05artifacts/ への検証ファイル保存

活用シーン

  1. 01React Native またはネイティブ Android の UI 変更確認
  2. 02レイアウトや操作上の問題の調査
  3. 03PR 文書用の自動スクリーンショット作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill android_ui_verification

インストール後、Claude Code で/android_ui_verificationを入力して読み込まれたか確認します。

同梱ファイルscripts/verify_ui.sh

詳細

Android UI 検証スキル

このスキルでは、ADB コマンドを使用して Android エミュレーター上で React Native アプリケーションをテストするための体系的な方法を説明します。自律的な操作、状態の検証、ビジュアルリグレッションチェックが可能です。

使用する場面

  • React Native アプリまたはネイティブ Android アプリの UI 変更を検証するとき。
  • レイアウトの問題や操作の不具合を自律的にデバッグするとき。
  • 手動テストに時間がかかりすぎる場合に、機能が動作することを確認するとき。
  • PR のドキュメント用にスクリーンショットを自動取得するとき。

🛠 前提条件

  • Android エミュレーターが起動していること。
  • adb がインストールされ、PATH に設定されていること。
  • logcat にアクセスできるよう、アプリケーションがデバッグモードになっていること。

🚀 ワークフロー

1. デバイスの調整

adb devices -l で認可済みのエミュレーターのシリアルを選択します。複数のデバイスがある場合は、すべてのコマンドに -s SERIAL を指定します。操作の前に、現在のディスプレイのジオメトリと UI の境界を確認し、正確なタップ座標を把握してください。

adb shell wm size

注：サイズの上書き、密度、回転、インセットは入力座標に影響します。物理サイズだけから座標を算出するのではなく、実際に選択したディスプレイの最新の UI 境界を使用してください。

2. UI の検査（状態の把握）

uiautomator のダンプを使用して、UI 要素（ボタン、入力欄）の正確な境界を特定します。

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. 操作コマンド
  • タップ：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>（例：Enter は 66）。
4. 検証とレポート
ビジュアル検証

操作後にスクリーンショットを撮影し、UI の変更を確認します。

adb shell screencap -p /sdcard/screen.png && adb pull /sdcard/screen.png ./artifacts/test_result.png
分析的検証

JS コンソールのログをリアルタイムで監視し、エラーの検出や成功の確認を行います。

adb logcat -d | grep "ReactNativeJS" | tail -n 20
クリーンアップ

プロジェクトの整理ルールに従い、生成したファイルは必ず artifacts/ フォルダーに保存してください。

💡 ベストプラクティス

  • 状態を待つ：上限時間を設けて、期待する UI の状態をポーリングします。固定時間待つだけでは検証になりません。
  • 中央をタップする：最も確実なタップ位置を求めるには、[x1,y1][x2,y2] の算術平均を計算します。
  • ログマーカー：コード内で識別しやすいログメッセージ（例：✅ Action Successful）を使用すると、grep による検証が簡単になります。
  • 早期に失敗を検知する：uiautomator dump が失敗した場合や、期待するテキストが見つからない場合は、見当をつけてタップし続けるのではなく、停止して問題を調査してください。

制限事項

  • このスキルは、タスクが上記の説明に明確に当てはまる場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、成功基準が不足している場合は、停止して確認を求めてください。

同梱ヘルパーの例

このスキルのディレクトリから、認可済みのエミュレーターを選択した後、ANDROID_SERIAL=emulator-5554 bash scripts/verify_ui.sh login-screen を実行します。例のシリアルは、確認済みのデバイスに置き換えてください。この不活性で実行不可能なヘルパーは、artifacts/view.xml、artifacts/login-screen.png、および直近の JS ログを取得しますが、ログインフローが成功したとは判定しません。取得した状態を期待される UI と照らし合わせて確認し、個人データが含まれる場合は成果物を非公開にしてください。

コメント

Markdown 対応