Playwright (Automation + MCP + Scraper)

• JSレンダリングページ — 必要なコンテンツがJavaScript実行後にのみ存在する場合（SPA、動的テーブル、遅延読み込みデータなど）。
• マルチステップブラウザワークフロー — フォーム、ログインフロー、ファイルのアップロード/ダウンロード、または実際のブラウザイベントとDOM状態に依存するナビゲーションシーケンス。
• スクリーンショット、PDF、およびビジュアルエビデンスのキャプチャ — 生のHTMLではなく、レンダリングされたページからピクセル精度の出力が必要な場合。
• Playwrightテストの作成とデバッグ — @playwright/test スイートの作成、実行、または修正、CIフレークのトレース、またはヘッドモードでのUIバグの再現。
• MCPドリブンのブラウザ制御 — エージェントがすでにループ内に browser_* ツールを持っており、新しい自動化コードを書かずにナビゲート・クリック・入力・スクリーンショットのワークフローを実行したい場合。

• 静的HTMLまたは単純なHTTPレスポンスで十分な場合 — ページがJavaScriptのレンダリングを必要としないなら、シンプルなfetchまたはHTTPスキルの方が高速で、コストが低く、壊れにくいです。
• 純粋なAPIタスク — 対象サービスにドキュメント化されたAPIがある場合、ブラウザを操作するよりも直接呼び出す方が信頼性が高いです。
• 抽出のみが目的で、ブラウザを使わない方法が有効な場合 — スクレイピングのためだけにフルブラウザを起動する前に、ドキュメント化されたAPIやシンプルなHTTPを優先してください。

npx @playwright/mcp --headless を実行することで、browser_navigate、browser_click、browser_type、browser_snapshot などをファーストクラスのツールアクションとして公開できます。このアプローチでは新たな自動化コードは不要で、エージェントが MCP ツールコールを通じてブラウザを直接操作します。

直接的なPlaywrightスクリプト（chromium.launch、page.goto、page.screenshot）や、npx playwright testを使用したフルの@playwright/testスイートを記述・実行できます。ヘッドありの実行、トレースキャプチャ、リトライ、並列ワーカーをすぐに利用可能です。

npx playwright codegen <url> を使用して操作を記録し、安定したロケーターを生成します。ソースからセレクターを推測する手間をなくし、軽微なDOM変更にも耐えられるロール・ラベル・テキストベースのロケーターを生成します。

フルページのスクリーンショットのキャプチャ、PDFの生成、実行トレースの記録、ファイルのダウンロードが可能です — MCPツールアクションまたは直接のPlaywright APIコールのいずれかを通じて実行できます。成果物はワークスペース内またはシステムの一時ディレクトリにローカル保存されます。

このスキルは、脆弱なCSS/XPathの代わりにロール、ラベル、テキスト、テストIDセレクターを使用し、生のコマンドチェックの代わりにウェブファーストのアサーションを強制します。アクショナビリティの待機に関する組み込みガイダンスにより、不安定なsleepベースのタイミングハックを防止します。

隠しファイル、永続セッション、または未申告のネットワーク呼び出しは一切ありません。認証状態は、明示的に再利用されない限り一時的なものです。重要な本番環境のフローは、続行前にユーザーによる明示的な確認が必要です。

ローカルまたはステージング環境のアプリに対して、既存の@playwright/testスイートを実行・拡張します。npx playwright test --trace onを使用してCIの失敗時にアーティファクトをキャプチャし、トレースビューアーとヘッドありの再実行でフレーキーなテストを診断します。

エージェントにサイトのナビゲート、複数ステップのフォーム入力、スクリーンショットの取得を任せましょう — すべて browser_navigate、browser_type、browser_click、browser_snapshot のMCPアクションを使用して — Playwright (Automation + MCP + Scraper) のスクリプトを一行も書かずに実現できます。

JavaScriptでレンダリングされるページに移動し、DOMが安定するまで待機した後、browser_evaluateまたは直接Playwrightスクリプトを使用して構造化データを抽出します。対象サイトにAPIがなく、JavaScriptの実行後にのみコンテンツが表示される場合に最適です。このワークフローはPlaywright (Automation + MCP + Scraper)によって実現されます。

npx playwright test --headed を使用してヘッドモードで報告されたUIリグレッションを再現し、--trace on でトレースをキャプチャし、ネットワーク、コンソール、およびDOMスナップショットを検査して、修正を記述する前に根本原因を特定します。