Playwright Automation

概要

Playwright Automation は lackeyjb/playwright-skill で、コーディングエージェントが Playwright のコードをその場で書いて実行できる、MIT ライセンスの汎用 Agent Skill です。単一ページの確認から複数ステップのフローまで対応します。オープンな Agent Skills 仕様に準拠しているため Claude Code、Cursor、GitHub Copilot、Codex、Gemini CLI、OpenCode などで使え、Claude Code プラグインとしても配布されています。

README は位置づけを明確にしています。単純な対話的ブラウジングには Microsoft 公式の @playwright/cli、アクセシビリティスナップショット付きのツール型操作には playwright-mcp。このスキルはコードファーストの選択肢で、ループ、アサーション、複数コンテキスト、ネットワーク傍受、スクリーンショット、動画、再実行したいスクリプトなど、自動化スクリプト自体が成果物になる場面向けです。

主な機能

• 依頼ごとにカスタムコードを生成（固定のスクリプト集ではない）。
• 既定でブラウザを表示（headless: false）。必要ならヘッドレスを指定。
• ポータブルな実行器 run.js がファイル・インラインのスクリプトを安定したモジュール解決で実行。
• 段階的な読み込み：SKILL.md は簡潔で、完全な API_REFERENCE.md（セレクター、認証、ビジュアルリグレッション、モバイルエミュレーション、性能、デバッグ）は必要時のみ参照。
• 開発サーバーの検出と lib/helpers.js の補助関数（任意）。
• SLOW_MO、PW_ARTIFACT_DIR で設定可能（スクリーンショットの既定保存先は OS の一時ディレクトリ）。

クイックスタート

npx skills add lackeyjb/playwright-skill --skill playwright-skill --global --yes
# インストールしたスキルのディレクトリで
npm run setup   # Playwright と Chromium をインストール

Claude Code では /plugin marketplace add lackeyjb/playwright-skill と /plugin install playwright-skill@playwright-skill でも導入できます。その後「トップページをテストして」「問い合わせフォームが動くか確認して」「ダッシュボードをモバイルとデスクトップでスクショして」と依頼します。

使いどころ

• 開発中のローカルアプリの簡易 E2E チェック。
• 複数ビューポートでのレスポンシブ確認用スクリーンショット。
• リンク切れ・画像読み込み・フォーム検証の一括チェック。

制限事項

• Node.js とローカルのブラウザが必要です。npm run install-all-browsers で Firefox と WebKit も追加できます。
• 生成されたスクリプトは使い捨てなので、残すならテストスイートに取り込む必要があります。

よくある質問

Playwright MCP との違いは？

Playwright MCP はブラウザ操作をツールとして公開します。このスキルはエージェントに完全な Playwright プログラムを書かせて実行します。

スクリーンショットはどこに保存されますか？

既定では OS の一時ディレクトリ、PW_ARTIFACT_DIR を設定すればその場所です。

代替ツール

• Webapp Testing：Anthropic による Playwright ベースのローカル Web アプリ検証スキル。
• Chrome DevTools MCP：ツール型のブラウザ検査。
• Agent Browser と Browser Use：エージェント主導のブラウジング。

関連は Skills カテゴリ と ブラウザ自動化タグ へ。