2026 OpenClaw 前端実戦：
リモート Mac で Docker 導入と Playwright 自動テスト連携

ローカルだけでは Safari や環境差の再現が難しく、CI だけではデバッグや OpenClaw との連携が取りづらい場合があります。リモート Mac で Docker 化した OpenClaw と Playwright を連携させると、再現性の高い E2E と運用自動化が実現できます。

リモート Mac に Docker が入っていることを前提にします。OpenClaw 用の公式イメージがあれば docker pull で取得し、必要な環境変数（API キー・Webhook URL など）を設定してコンテナを起動します。例：docker run -d --name openclaw -e OPENCLAW_API_KEY=xxx -p 8080:8080 openclaw/openclaw:latest。起動後、ブラウザや curl で http://localhost:8080 にアクセスし、動作確認をしてください。

同一のリモート Mac（または同じネットワーク内）に Node を入れ、プロジェクトで npm init -y のあと npm i -D @playwright/test で Playwright を導入します。npx playwright install でブラウザを取得し、playwright.config.ts でタイムアウト・リトライ・Safari 等の設定をします。フロントのビルド成果物を webServer で起動してからテストする構成にすると、CI と同様の流れをリモート Mac で再現できます。

OpenClaw と Playwright の連携は主に次の2通りです。

再現手順の例です。（1）リモート Mac に SSH で入る。（2）OpenClaw コンテナが起動していることを確認する。（3）フロントのリポジトリで npm run build && npx playwright test を実行する。（4）OpenClaw のトリガー設定で、上記コマンドを実行するジョブを登録する。（5）スケジュールまたは手動でジョブを実行し、ログとアーティファクトで結果を確認する。

タイムアウト：Playwright の timeout を増やす、webServer の起動待ち時間を十分に取る。ブラウザ未インストール：npx playwright install を実行し、Safari を使う場合は macOS 上で実行する。権限・パス：OpenClaw から呼ぶシェルでは PATH や nvm を読み込むようにする。Docker からホストの Playwright を叩く：コンテナとホストのネットワークを揃え、localhost ではなくホストの IP や host.docker.internal を使う必要がある場合があります。