browser-automation

ブラウザーの自動化

判定を行う場合は、CDP を手動で操作しないでください。evals/core のジャーニーまたは evals/proofs のプルーフ（write-a-spec、run-tests）を作成または実行してください。このスキルは探索とデバッグ専用です。

できること

• ローカル開発中に、OpenCode のブラウザーツールを OpenWork Electron アプリに接続します。
• Electron の Chrome DevTools Protocol エンドポイントを通じて、アプリの UI を操作します。
• コンポーザーからタスク／セッションを送信し、UI で応答を確認します。

ローカル開発環境のセットアップ

pnpm dev はデフォルトで Electron CDP を有効にします。

OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=${OPENWORK_ELECTRON_REMOTE_DEBUG_PORT:-9823}

OpenCode のブラウザーツールのデフォルトのブラウザー URL は次のとおりです。

http://127.0.0.1:9823

アプリの UI は通常、次の場所に読み込まれます。

http://localhost:5173/

別の CDP ポートを使用するには、オーバーライドを指定して起動します。

OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=9830 pnpm dev

実行中に Electron CDP を無効にするには、次のようにします。

OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=0 pnpm dev

バックグラウンドでの起動

ユーザーがアプリをバックグラウンドで実行したい場合は、デタッチ起動を使用します。

nohup pnpm dev > /tmp/openwork-dev.log 2>&1 &

次に、CDP ポートが起動するまで待ちます。

lsof -nP -iTCP:9823 -sTCP:LISTEN

ブラウザーツールのフロー

1. browser_url: "http://127.0.0.1:9823" を指定して browser_list でターゲットを一覧表示します。
2. OpenWork のターゲット ID を選択します。
3. browser_eval または browser_snapshot で状態を読み取ります。
4. [contenteditable="true"][data-lexical-editor="true"] を対象にして、Lexical コンポーザーに入力します。
5. Run task ボタンをクリックします。
6. document.body.innerText または現在の URL を確認して、セッションの応答を確認します。

セッションを送信する

OpenWork のターゲットを選択した後、次の browser_eval パターンを使用します。

(() => {
  const editor = document.querySelector('[contenteditable="true"][data-lexical-editor="true"]');
  if (!editor) return { ok: false, reason: 'editor not found' };

  editor.focus();
  const data = new DataTransfer();
  data.setData('text/plain', 'Say hello from the Electron browser test.');
  editor.dispatchEvent(new ClipboardEvent('paste', {
    bubbles: true,
    cancelable: true,
    clipboardData: data,
  }));

  const run = Array.from(document.querySelectorAll('button'))
    .find((button) => button.innerText.trim() === 'Run task');
  if (!run) return { ok: false, reason: 'Run task not found', inserted };
  if (run.disabled) return { ok: false, reason: 'Run task disabled', inserted, text: editor.innerText };

  run.click();
  return { ok: true, inserted: true, text: editor.innerText };
})()

メモ

• Electron CDP は、開発用テストツールとして使用します。ユーザーのブラウザータスクには、組み込みの OpenWork Browser ターゲットを使用してください。
• ローカル接続に成功すると、http://127.0.0.1:9823 に OpenWork ターゲットが表示されます。
• 動作確認済みのスモークテスト用プロンプトは Say hello from the Electron browser test. で、期待される応答は Hello from the Electron browser test. です。