playwright-skill — インストール & ライブデモ

なぜ使うのか

主な機能

モデル駆動型 — Claudeがリクエストに合わせたカスタム Playwright コードを作成
デフォルトでヘッド付きブラウザを使用し、自動化の実行を目視確認可能
組み込みの run.js がモジュール解決を処理するため、スクリプトがそのまま動作
オンデマンドの Playwright APIリファレンス読み込みでコンテキストを軽量に維持
テスト、フォーム入力、クリック操作、リンク切れチェック、レスポンシブチェックに対応

ライブデモ

実際の動作

playwright-skill.replay ▶ 準備完了

0/0

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： playwright-skill

サインアップフローのスモークテストをオンデマンドで作成する

👤 Playwright を手書きせずにテストを作りたい開発者 ⏱ ~10 min beginner

使うタイミング： 新しいサインアップフローをプッシュした後、エンドツーエンドで動作するか確認したいとき。

前提条件

Node + Playwright がインストール可能であること — ブラウザが未インストールの場合、スキルが npx playwright install で自動インストールします

フロー

フローを説明する

Use the playwright skill. Open localhost:3000, sign up with [email protected] / Pass123!, verify we land on /dashboard.✓ コピーしました

→ Claudeが Playwright スクリプトを作成し、ヘッド付きで実行して、合否を報告する
失敗をインタラクティブにデバッグする

It failed at the email input — add a screenshot right before the error.✓ コピーしました

→ 次回の実行でスクリーンショットをキャプチャして返す

結果： オプションで永続的なスペックとして保存できる、ワンオフのスモークテスト。

注意点

選択されたセレクタが脆弱（例: nth-child） — Claudeにロール/ラベルセレクタを優先するよう指示する

組み合わせ： filesystem

ドキュメントサイトのリンク切れをすべて検出する

👤 ドキュメント管理者 ⏱ ~15 min intermediate

使うタイミング： サイト構成の変更後にリンク切れが発生していないか確認したいとき。

フロー

クロール内容を説明する

Use playwright to crawl https://docs.example.com up to depth 2, log every link, and return the 404s.✓ コピーしました

→ ClaudeがBFSクローラーを作成し、実行して、結果リストを出力する

結果： 修正すべきリンク切れのトリアージ済みリスト。

注意点

クローラーがサイトに高負荷をかける — 同時接続数を2〜3に制限し、短いディレイを追加する

3つのビューポートでレスポンシブ表示をスポットチェックする

👤 レイアウト変更を検証したいフロントエンド開発者 ⏱ ~5 min beginner

使うタイミング： ヘッダーを変更した後、デスクトップ・タブレット・モバイルでの表示を確認したいとき。

フロー

スクリーンショットをリクエストする

Use playwright to screenshot localhost:3000 at 1440, 768, and 390 width. Save them.✓ コピーしました

→ 3枚のPNGが保存され、パスが返される

結果： 素早いビジュアルレビュー用の3枚のスクリーンショット。

注意点

フォントや画像の読み込み完了前にスクリーンショットが撮られる — スクリーンショット取得前に networkidle の待機を追加する

組み合わせ： filesystem

組み合わせ

他のMCPと組み合わせて10倍の力を

playwright-skill + filesystem

テストスペックとスクリーンショットをテスト対象のコードと一緒に保存する

Write the smoke test and save it under tests/e2e/signup.spec.js.✓ コピーしました

playwright-skill + github

テストを実行し、ワークフローを失敗させ、結果をPRにコメントとして投稿する

Run the playwright spec against the deploy preview, then post results as a comment on PR #42.✓ コピーしました

playwright-skill + ios-simulator-skill

Webには Playwright、ネイティブには ios-simulator-skill を使い、クロスプラットフォームテストセッションで両方を活用する

Run the playwright web flow and the ios-simulator native flow in sequence, report both.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング
Custom Playwright script generation	task description	ブラウザ自動化に関するあらゆるリクエスト
run.js executor	script path	スクリプト生成後
Headed/headless toggle	flag	CI環境とローカルデバッグの切り替え時

コストと制限

運用コスト

APIクォータ: なし
呼び出しあたりのトークン: テスト実行ごとに1〜5kトークン（Claudeが参照する Playwright リファレンスの量に依存）
金額: 無料 — Node + Playwright のブラウザがディスク上にあれば利用可能
ヒント: プロンプトは焦点を絞ること。一度に「すべてテストして」と依頼しないでください。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： スキル内に認証情報は保存されません。テストが認証済みページにアクセスする場合、認証情報は環境変数に保管し、生成されたスクリプトには絶対に含めないでください。

データ送信先： テストがアクセスするサイトへの通信のみ

生成されたスクリプトはローカルプロセスのフル権限で実行されます。本番URLに対して実行する前に必ずレビューしてください。

トラブルシューティング

よくあるエラーと対処法

'browserType.launch: Executable doesn't exist'

npx playwright install chromium を実行してください

確認： npx playwright --version

セレクタが断続的に失敗する

ロール/ラベルセレクタに切り替え、await expect(...).toBeVisible() による待機を追加してください。

スクリプトがハングする

Claudeがブラウザのクローズを忘れている可能性があります。常に try/finally で await browser.close() をラップするよう指示してください。

代替案

playwright-skill 他との比較

代替案	代わりに使う場面	トレードオフ
playwright MCP	コード生成ではなく、構造化されたMCPツール（click、fill、snapshot）を使いたい場合	MCPはコードを抽象化する。このスキルは再利用可能な実際のスクリプトを生成する
Puppeteer skills / chrome-devtools MCP	Chrome限定のワークフローやDevToolsプロトコル機能が必要な場合	クロスブラウザ対応が限定的

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る