Claudeを使用してCapacitor WebViewsでモバイルアプリのQAを自動化する

ある開発者が、Capacitorで構築されたモバイルアプリの自動品質保証をClaudeに実行させる方法を記録しました。このアプリはReactをネイティブシェル（AndroidではWebView、iOSではWKWebView）でラップし、サーバードリブンUIアーキテクチャを採用しており、1つのコードベースでWeb、iOS、Androidプラットフォーム上で動作します。

テストの課題と解決策

Capacitorアプリはテストのギャップに直面しています：Playwrightはネイティブシェルにアクセスできず、XCTestとEspressoはWebView内のHTMLと対話できません。開発者は、Claudeを使用して両方のモバイルプラットフォームを操作し、スクリーンショットを撮影、問題を分析し、バグレポートを自動的に提出するPythonスクリプトを作成しました。

Android実装の詳細

Androidのセットアップには90分かかりました。主な手順：

• 接続性の修正：adb reverse tcp:3000 tcp:3000およびadb reverse tcp:8080 tcp:8080（エミュレーター再起動後に再実行が必要）
• WebView DevToolsへのアクセス：adb shell "cat /proc/net/unix" | grep webview_devtools_remoteでソケットを検索
• ローカルポートへの転送：adb forward tcp:9223 localabstract:$WV_SOCKET
• curl http://localhost:9223/jsonによる完全なChrome DevTools Protocolアクセス

スクリプトは、CDPを使用したナビゲーションと認証（localStorageへのJWT注入）およびadb shell screencapによるスクリーンショットで、約90秒でアプリの全25画面を巡回します。

分析とバグ報告

スクリーンショットは視覚的な問題について分析されます：レイアウトの崩れ、エラーメッセージ、画像の欠落、空白画面、ステータスバーの重なり。問題が発見されると、システムは以下を実行します：

• zabriskie_botとして認証
• スクリーンショットをS3にアップロード
• 本番フォーラムにバグレポートを提出（形式：[Android QA] Shows Hub: RSVPボタンが会場テキストと重なる）

システムは期待される状態を認識しています：クルーページでの非メンバーに対する「Forbidden」レスポンスはバグではなく、空のアバターサークルはバグではなく、プロフィール設定の「Preview」テキストは既知の見た目の問題です。

iOS実装

iOSのセットアップには6時間以上かかり、モバイル自動化ツールの違いが浮き彫りになりました。この記事はこの対比を指摘していますが、Androidと比較してiOS実装に関する具体的な技術的詳細は少なめです。

デプロイメント

このQAシステム全体は、毎朝8時47分にスケジュールされたタスクとして実行されます。