Open2

WailsアプリをAI Agentで開発する時に、Web画面を確認させる方法

Cursor
Wails
yunayuna

Wailsは、バックエンドをGo, フロントエンドをwebスタックで開発できる、
デスクトップアプリケーション（webview利用）のフレームワークです。
最近ではRustで書けるので有名なTauriや、昔からあるelectronのようなツールですが、
かなり軽量・シンプルで扱いやすいです。
https://wails.io/

cursorなどのAI agentで開発するにあたって、
agent自身がUIの動作確認をする手段に困ったので、解決法をメモしておきます。

1. WailsのWebView内部のHTML・コンソールを外部ツールから確認する

Wails アプリを wails dev で起動すると、デフォルトでは http://localhost:34115 などのポートでフロントエンドを提供しています。この開発サーバーに通常のウェブブラウザでアクセスすると、ブラウザのデベロッパーツールを利用してHTMLやコンソールログが確認できます。

また、Wailsは開発モード（もしくは -debug フラグ付きビルド）の場合、アプリ内のWebViewに対しても「右クリック → Inspect」や Ctrl+Shift+I（Windowsの場合）でChromiumのDevToolsを開けるようになっています。macOSのWKWebViewの場合も、右クリックメニューやSafariの開発メニューからWebインスペクタに接続できます。

ポイント

  • 開発モード/デバッグモードでは、ビルトインの開発者ツールが使える。
  • Webブラウザで http://localhost:ポート番号 にアクセスする方法もある。

2. WailsでWebViewをデバッグ・自動テストする方法

  1. デバッグ方法

    • wails dev でアプリを起動すると、自動的に再ビルドやライブリロードが有効になり、ブラウザもしくはWebView上のコンソールが利用できます。
    • Wailsアプリのウィンドウ上で右クリックメニューから「Inspect Element」または Ctrl+Shift+I でDevToolsを呼び出す。
    • wails build -debug でデバッグ用ビルドを作り、配布後もDevToolsを使用できるようにする（フラグやショートカットキーで有効化）。

  2. 自動テスト方法

    • フロントエンドをWebアプリケーションとみなし、ブラウザ自動化ツール (Selenium, Playwright, Puppeteerなど) で http://localhost:ポート にアクセスし、UIテストを行う。
    • WindowsでWebView2を利用している場合は、WebView2にリモートデバッグポートを指定する（例：WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS="--remote-debugging-port=9222"）ことでPlaywrightやChrome DevTools Protocolから直接操作することも可能。

3. CursorのYOLO/AgentモードでWebView内部を直接確認するのが難しい理由

CursorのYOLO（Agent）モードは、シェルコマンドの実行やファイル操作などの自動化はできますが、「ユーザーが実行中のGUIアプリ（WebView）の内容を自動で読み取り・操作する」機能は標準では備わっていません。

つまり、wails dev で起動したアプリを実際に画面上で操作し、HTML要素やコンソールログをリアルタイムに見に行くのは、現時点でCursor単体では難しいです。もしCursorからUIの状態を取得したい場合には、

  1. HTTPクライアントを用いて http://localhost:ポート のHTMLを取得する
  2. Headless Chrome (Puppeteer / Playwright) などをスクリプト内で起動し、DOMやコンソールログを取得する
  3. 取得結果をCursorに返す

といった工夫が必要になります。これは事実上、Cursorにテストスクリプトを実行させて結果をパースさせる手順を自分で設定する形になります。

4. VSCodeなど他のツールでの対処方法

Cursor以外のエディタやツールを使用している場合、以下のアプローチがよく使われます。

  1. ブラウザのDevTools
    wails dev で起動したサーバーに普通にブラウザでアクセスし、Chrome/Safari/Firefoxなどの開発者ツールでUIを確認。

  2. Wails内蔵のDevTools
    アプリウィンドウ上で「右クリック → Inspect」や Ctrl+Shift+I などで開発ツールを起動。

  3. VSCode 拡張 / MS Edge DevTools for VSCode

    • WindowsのWebView2の場合、リモートデバッグポートを開ける設定を行い、VSCodeからアタッチしてデバッグ。
    • VSCode内でHTML要素の検証やコンソール確認などが可能に。

  4. 自動テスト

    • Selenium/Playwright/Puppeteer などで http://localhost:ポート にアクセスし、E2Eテストを記述。
    • Windows版でWebView2のCDP (Chrome DevTools Protocol) ポートを開放して直接操作する。

結論

  • WailsのWebViewでの動作確認は、開発モード/デバッグモードであればビルトインのDevToolsやブラウザのDevToolsが使えます。
  • CursorのYOLO/AgentモードのみでWebView内部を自動検証するには、Headlessブラウザなどを介してDOMやコンソールログを取得するスクリプトを用意し、それをCursorに実行させるようにする必要があります。
  • 最も簡単な方法は、手動またはブラウザ自動化ツールの利用です。Cursorが画面上のWebViewを自動的に「目視」する機能は現状ありません。

もし単にUIをチェックしたいだけであれば、WailsのデバッグモードでWebView上のコンソールやデベロッパーツールを開くのが手っ取り早いでしょう。自動テストをしたい場合は、Headlessブラウザを用いたE2Eテストを導入し、それをCursorにコマンドとして実行させるなどのやり方が現時点のベストプラクティスかと思います。

yunayuna

実際にエージェントがUIにアクセスしている様子

playlightでブラウザ操作して、表示をキャプチャして画像で保存して、AIが自分で確認してます。。
（base64 encode? 理解できてるの？笑）