playwright-mcp
code:json
{
"mcpServers": {
"playwright": {
"command": "npx",
}
}
}
使ってみたmrsekut.icon
けっこう手探りでDOMを探索して、力技で解決してそう
やや時間はかかったが目的のことができててすごい、となった
ログインさせるには？
起動後に手動でログインするのが良さそうmrsekut.icon
これだとLLMに認証情報を渡さない
それ以降は、カスタムプロファイルディレクトリを指定して起動させるとかあるらしい
$ npx @playwright/mcp --user-data-dir /path/to/your/secure/profile
~/Library/Caches/ms-playwright/mcp-chrome-profileらへんにあるっぽい
どこかのファイルに認証情報書いてれば読ませるとかできる
--storage-stateで読ませる？
というかmcp.jsonにenvを指定できるのか
🛠 代表的なCLIオプション
table:_
オプション 内容
--headless ヘッドレスモードで起動（デフォルトはヘッデッド）
--isolated 一時的なブラウザプロファイルを使用（テスト向き）
--storage-state セッション開始時の状態を読み込み
--vision スクリーンショットベースの操作を有効化
--browser chrome firefox webkit 使用ブラウザの指定
--device "iPhone 15" デバイスエミュレーション
2つのモード
Snapshot Mode
アクセシビリティツリーをもとにした操作。デフォルト。
browser_snapshot：ページのスナップショットを取得
browser_click：指定要素をクリック
browser_type：テキスト入力（slowlyやsubmit付きも可）
browser_select_option：selectボックスの選択
browser_hover / drag / press_key など
browser_navigate / navigate_back / navigate_forward
browser_take_screenshot（画面確認のみ、操作対象にはしない）
Vision Mode
アクセシビリティ情報が不足しているサイトではこっちを使うといい
--vision オプションで有効化。XY座標で操作。
browser_screen_click：XY位置でクリック
browser_screen_drag：XY間をドラッグ
browser_screen_type：文字入力
browser_screen_capture：スクリーンショット取得
プロファイル管理
table:_
モード 概要
Persistent ログイン情報などが永続的に保存される。キャッシュディレクトリに保存。
Isolated 一時プロファイルでセッションごとに情報が破棄される。テスト用途に最適。
テスト支援
browser_generate_playwright_test
MCPで行った操作から Playwright テストコードを自動生成可能
ええやんmrsekut.icon
実用例
開発時のフォームの自動入力