Playwright MCP Serverの最新版（v0.0.58）でPlaywright CLIが追加されたようです！
トークン効率が良くなるよとのことで、早速やってみました！
インストール
Playwright MCP Serverをグローバルインストールすると、playwright-cliコマンドが使えるようになります。
npm install -g @playwright/mcp@latest
ヘルプを確認
playwright-cli --help
playwright-cli - run playwright mcp commands from terminal
Usage: playwright-cli <command> [args] [options]
Core:
open <url> open url
close close the page
type <text> type text into editable element
click <ref> [button] perform click on a web page
dblclick <ref> [button] perform double click on a web page
fill <ref> <text> fill text into editable element
drag <startRef> <endRef> perform drag and drop between two elements
hover <ref> hover over element on page
select <ref> <val> select an option in a dropdown
upload <file> upload one or multiple files
check <ref> check a checkbox or radio button
uncheck <ref> uncheck a checkbox or radio button
snapshot capture page snapshot to obtain element ref
eval <func> [ref] evaluate javascript expression on page or element
dialog-accept [prompt] accept a dialog
dialog-dismiss dismiss a dialog
resize <w> <h> resize the browser window
Navigation:
go-back go back to the previous page
go-forward go forward to the next page
reload reload the current page
Keyboard:
press <key> press a key on the keyboard, `a`, `arrowleft`
keydown <key> press a key down on the keyboard
keyup <key> press a key up on the keyboard
Mouse:
mousemove <x> <y> move mouse to a given position
mousedown [button] press mouse down
mouseup [button] press mouse up
mousewheel <dx> <dy> scroll mouse wheel
Save as:
screenshot [ref] screenshot of the current page or element
pdf save page as pdf
Tabs:
tab-list list all tabs
tab-new [url] create a new tab
tab-close [index] close a browser tab
tab-select <index> select a browser tab
DevTools:
console [min-level] list console messages
network list all network requests since loading the page
run-code <code> run playwright code snippet
tracing-start start trace recording
tracing-stop stop trace recording
Sessions:
session-list list all sessions
session-stop [name] stop session
session-stop-all stop all sessions
session-delete [name] delete session data
比較
Kiro CLIを使って簡単に比較してみました。
比較①：プロンプトで直接指示する
Kiro CLIに--trust-all-toolsオプションをつけて起動します。
kiro-cli chat --trust-all-tools
この時点のコンテキスト消費量を確認します。
!> /context
Context window: 3.5% used (estimated)
Context files 0.2% (estimated)
Tools 3.3% (estimated)
Kiro responses 0.0% (estimated)
Your prompts 0.0% (estimated)
プロンプトで直接指定して、Playwright CLIを使用します。
プロンプト
playwright-cliを使って、https://demo.playwright.dev/todomvcの「add todo」フローをテストして。
playwright-cliの使い方は`playwright-cli --help`で確認して。
実行ログ出力
> まず playwright-cli のヘルプを確認します。
I will run the following command: playwright-cli --help (using tool: shell)
Purpose: Check playwright-cli help
playwright-cli - run playwright mcp commands from terminal
Usage: playwright-cli <command> [args] [options]
Core:
open <url> open url
close close the page
type <text> type text into editable element
click <ref> [button] perform click on a web page
dblclick <ref> [button] perform double click on a web page
fill <ref> <text> fill text into editable element
drag <startRef> <endRef> perform drag and drop between two elements
hover <ref> hover over element on page
select <ref> <val> select an option in a dropdown
upload <file> upload one or multiple files
check <ref> check a checkbox or radio button
uncheck <ref> uncheck a checkbox or radio button
snapshot capture page snapshot to obtain element ref
eval <func> [ref] evaluate javascript expression on page or element
dialog-accept [prompt] accept a dialog
dialog-dismiss dismiss a dialog
resize <w> <h> resize the browser window
Navigation:
go-back go back to the previous page
go-forward go forward to the next page
reload reload the current page
Keyboard:
press <key> press a key on the keyboard, `a`, `arrowleft`
keydown <key> press a key down on the keyboard
keyup <key> press a key up on the keyboard
Mouse:
mousemove <x> <y> move mouse to a given position
mousedown [button] press mouse down
mouseup [button] press mouse up
mousewheel <dx> <dy> scroll mouse wheel
Save as:
screenshot [ref] screenshot of the current page or element
pdf save page as pdf
Tabs:
tab-list list all tabs
tab-new [url] create a new tab
tab-close [index] close a browser tab
tab-select <index> select a browser tab
DevTools:
console [min-level] list console messages
network list all network requests since loading the page
run-code <code> run playwright code snippet
tracing-start start trace recording
tracing-stop stop trace recording
Sessions:
session-list list all sessions
session-stop [name] stop session
session-stop-all stop all sessions
session-delete [name] delete session data
- Completed in 0.116s
> では、https://demo.playwright.dev/todomvc の「add todo」フローをテストします。
I will run the following command: playwright-cli open https://demo.playwright.dev/todomvc (using tool: shell)
Purpose: Open the TodoMVC demo page
### Page
- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React • TodoMVC
### Snapshot
- [snapshot](.playwright-cli/page-2026-01-24T01-45-12-261Z.yml)
### Events
- [INFO] %cDownload the React DevTools for a better ...ttps://demo.playwright.dev/todomvc/js/bundle.js:20881
- [ERROR] Failed to load resource: the server respon...of 404 () @ https://demo.playwright.dev/favicon.ico:0
- Completed in 1.860s
I will run the following command: playwright-cli snapshot (using tool: shell)
Purpose: Capture page snapshot to see elements
### Page
- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React • TodoMVC
### Snapshot
- [snapshot](.playwright-cli/page-2026-01-24T01-45-15-488Z.yml)
- Completed in 0.141s
Reading file: .playwright-cli/page-2026-01-24T01-45-15-488Z.yml, all lines (using tool: read)
✓ Successfully read 2453 bytes from .playwright-cli/page-2026-01-24T01-45-15-488Z.yml
- Completed in 0.0s
> 入力フィールド (ref=e8) に新しいTodoを入力してテストします。
I will run the following command: playwright-cli fill e8 "Test add todo from Kiro" (using tool: shell)
Purpose: Fill the todo input field
- Completed in 1.175s
I will run the following command: playwright-cli press Enter (using tool: shell)
Purpose: Press Enter to add the todo
### Page
- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React • TodoMVC
### Snapshot
- [snapshot](.playwright-cli/page-2026-01-24T01-45-30-369Z.yml)
- Completed in 1.141s
I will run the following command: playwright-cli snapshot (using tool: shell)
Purpose: Verify the todo was added
### Page
- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React • TodoMVC
### Snapshot
- [snapshot](.playwright-cli/page-2026-01-24T01-45-34-785Z.yml)
- Completed in 0.114s
Reading file: .playwright-cli/page-2026-01-24T01-45-34-785Z.yml, all lines (using tool: read)
✓ Successfully read 2641 bytes from .playwright-cli/page-2026-01-24T01-45-34-785Z.yml
- Completed in 0.0s
I will run the following command: playwright-cli close (using tool: shell)
Purpose: Close the browser
### Result
No open tabs. Navigate to a URL to create one.
- Completed in 0.215s
> テスト完了しました。
実行内容:
1. playwright-cli open でTodoMVCページを開く
2. playwright-cli snapshot で要素を確認
3. playwright-cli fill e8 "Test add todo from Kiro" で入力フィールドにテキストを入力
4. playwright-cli press Enter でTodoを追加
5. playwright-cli snapshot で結果を確認
結果:
- 新しいTodo「Test add todo from Kiro」が正常に追加されました
- Todoリストの最後に表示されています (ref=e53-e56)
- アイテム数が6から7に増加しました
▸ Credits: 0.36 • Time: 45s
実行過程でファイルが生成され、必要に応じてスクリーンショットも取ってくれます。
実行後のコンテキスト消費量を確認します。
Context window: 4.8% used (estimated)
Context files 0.2% (estimated)
Tools 3.3% (estimated)
Kiro responses 0.2% (estimated)
Your prompts 1.1% (estimated)
比較②：Skillを使う
Playwright CLIはSkillとして利用することも想定されており、SKILL.mdも公開されています。
ちょうどKiro CLIもSkillsに対応したので、Skill版をやってみましょう。
まず、Kiro CLIのカスタムエージェントを作成します。
kiro-cli agent create --name playwright-cli --directory .
viが開くと思うので、:wqでファイルを保存します。
.kiro/agents/playwright-cli.jsonが作成されますので、このファイルを開き、resourcesとしてSKILL.mdファイルを参照するように設定します。
.kiro/agents/playwright-cli.json
{
"name": "playwright-cli",
"description": "",
"prompt": null,
"mcpServers": {},
"tools": [
"*"
],
"toolAliases": {},
"allowedTools": [],
- "resources": [],
+ "resources": [
+ "skill://.kiro/skills/**/SKILL.md"
+ ],
"hooks": {},
"toolsSettings": {},
"useLegacyMcpJson": true,
"model": null
}
SkILL.mdを.kiro/skills/playwright-cli/SKILL.mdに格納します。
作成したカスタムエージェントを起動します。
kiro-cli chat --agent playwright-cli --trust-all-tools
この時点のコンテキスト消費量を確認します。
[playwright-cli] !> /context
Context window: 3.4% used (estimated)
Context files 0.1% (estimated)
Tools 3.3% (estimated)
Kiro responses 0.0% (estimated)
Your prompts 0.0% (estimated)
比較①のときと少し違いがありますが、誤差でしょうか。
Skillを使って実行させます。playwright-cliの使い方は伝えません。
プロンプト
playwright-cliを使って、https://demo.playwright.dev/todomvcの「add todo」フローをテストして。
実行ログ出力
> playwright-cliスキルを確認して、TodoMVCの「add todo」フローをテストします。
Reading file: *****/.kiro/skills/playwright-cli/SKILL.md, all lines (using tool: read)
✓ Successfully read 3394 bytes from *****/.kiro/skills/playwright-cli/SKILL.md
- Completed in 0.0s
> TodoMVCの「add todo」フローをテストします。
I will run the following command: playwright-cli open https://demo.playwright.dev/todomvc (using tool: shell)
Purpose: TodoMVCページを開く
### Page
- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React • TodoMVC
### Snapshot
- [snapshot](.playwright-cli/page-2026-01-24T01-57-39-371Z.yml)
### Events
- [INFO] %cDownload the React DevTools for a better ...ttps://demo.playwright.dev/todomvc/js/bundle.js:20881
- [ERROR] Failed to load resource: the server respon...of 404 () @ https://demo.playwright.dev/favicon.ico:0
- Completed in 2.73s
Reading file: *****/.playwright-cli/page-2026-01-24T01-57-39-371Z.yml, all lines (using tool: read)
✓ Successfully read 2641 bytes from *****/.playwright-cli/page-2026-01-24T01-57-39-371Z.yml
- Completed in 0.0s
> 入力フィールド（e8）にTodoを入力してEnterキーを押します。
I will run the following command: playwright-cli fill e8 "Kiroからのテスト項目" (using tool: shell)
Purpose: Todoテキストを入力
- Completed in 1.194s
I will run the following command: playwright-cli press Enter (using tool: shell)
Purpose: Enterキーを押してTodoを追加
### Page
- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React • TodoMVC
### Snapshot
- [snapshot](.playwright-cli/page-2026-01-24T01-57-50-780Z.yml)
- Completed in 1.124s
Reading file: *****/.playwright-cli/page-2026-01-24T01-57-50-780Z.yml, all lines (using tool: read)
✓ Successfully read 2834 bytes from *****/.playwright-cli/page-2026-01-24T01-57-50-780Z.yml
- Completed in 0.0s
I will run the following command: playwright-cli screenshot (using tool: shell)
Purpose: 結果のスクリーンショットを撮影
### Result
- [Screenshot of viewport](.playwright-cli/page-2026-01-24T01-57-57-785Z.png)
- Completed in 0.168s
Reading images: *****/.playwright-cli/page-2026-01-24T01-57-57-785Z.png
(using tool: read)
✓ Successfully read image
- Completed in 0.0s
> ✅ TodoMVCの「add todo」フローのテストが成功しました！
実行内容:
1. https://demo.playwright.dev/todomvc を開く
2. 入力フィールドに「Kiroからのテスト項目」を入力
3. Enterキーを押してTodoを追加
結果:
- 新しいTodo項目「Kiroからのテスト項目」がリストに追加されました（e60）
- アイテム数が7個から8個に増加
- 入力フィールドは自動的にクリアされ、次の入力が可能な状態
スクリーンショットで追加されたTodo項目を確認できます。
▸ Credits: 0.36 • Time: 43s
いい感じにSkillを読み取り処理できました。
実行後のコンテキスト消費量を確認します。
Context window: 4.8% used (estimated)
Context files 0.1% (estimated)
Tools 3.3% (estimated)
Kiro responses 0.2% (estimated)
Your prompts 1.2% (estimated)
「比較①：プロンプトで直接指示する」とほぼ同じ結果でした。
比較③：Playwright MCPサーバーを使う場合
Playwright MCP Serverを使った場合はこうでした。
Kiro CLIのカスタムエージェントを作成します。
kiro-cli agent create --name playwright-mcp --directory .
viが開くと思うので、:wqでファイルを保存します。
MCPサーバーの設定を追記します。
.kiro/agents/playwright-mcp.json
{
"name": "playwright-mcp",
"description": "",
"prompt": null,
- "mcpServers": {},
+ "mcpServers": {
+ "playwright": {
+ "command": "npx",
+ "args": [
+ "@playwright/mcp@latest"
+ ]
+ }
+ },
"tools": [
"*"
],
"toolAliases": {},
"allowedTools": [],
"resources": [],
"hooks": {},
"toolsSettings": {},
"useLegacyMcpJson": true,
"model": null
}
作成したカスタムエージェントを起動します。
kiro-cli chat --agent playwright-mcp --trust-all-tools
この時点のコンテキスト消費量を確認します。
[playwright-mcp] !> /context
Context window: 4.9% used (estimated)
Context files 0.0% (estimated)
Tools 4.9% (estimated)
Kiro responses 0.0% (estimated)
Your prompts 0.0% (estimated)
これまでの２つに比べ、Toolsの消費量が増えてますね。そういうことですね。
プロンプト
playwright-mcpを使って、https://demo.playwright.dev/todomvcの「add todo」フローをテストして。
実行ログ出力
> playwright-mcpツールを使って、TodoMVCのadd todoフローをテストします。
まず、ページにアクセスしてスナップショットを確認します。
Running tool browser_navigate with the param (from mcp server: playwright)
⋮ {
⋮ "url": "https://demo.playwright.dev/todomvc"
⋮ }
- Completed in 1.576s
> ページが読み込まれました。既に2つのTodoアイテム（"Buy groceries"と"Write tests"）があります。新しいTodoを追加してテストします。
Running tool browser_type with the param (from mcp server: playwright)
⋮ {
⋮ "ref": "e8",
⋮ "element": "What needs to be done? textbox",
⋮ "text": "Test Playwright MCP",
⋮ "submit": true
⋮ }
- Completed in 1.84s
> 完璧です！Todoの追加が成功しました。スクリーンショットで確認します。
Running tool browser_take_screenshot with the param (from mcp server: playwright)
⋮ {
⋮ "type": "png",
⋮ "filename": "todomvc-test-result.png"
⋮ }
- Completed in 0.161s
> テストが完了しました！結果をまとめます：
テスト結果:
- ✅ ページへのアクセス成功
- ✅ 新しいTodo「Test Playwright MCP」の追加成功
- ✅ Todoリストに正しく表示されている
- ✅ カウンターが2から3に更新された
スクリーンショットを見ると、3つのTodoアイテムが表示されています：
1. Buy groceries
2. Write tests
3. Test Playwright MCP（新規追加）
左下のカウンターも「3 items left」と正しく更新されており、add todoフローが正常に動作していることが確認できました。
▸ Credits: 0.37 • Time: 20s
MCPサーバーを使って同様の動作ができました。
実行後のコンテキスト消費量を確認します。
Context window: 13.0% used (estimated)
Context files 0.0% (estimated)
Tools 4.9% (estimated)
Kiro responses 0.2% (estimated)
Your prompts 8.0% (estimated)
実行後の消費も多めに見えますね。。
まとめ
表にしました。
| 項目 | プロンプトで直接指示 | Skill | MCPサーバー |
|---|---|---|---|
| Context window | 3.5% -> 4.8% (1.3%↑） |
3.4% -> 4.8% (1.4%↑） |
4.9% -> 13.0% (8.1%↑） |
| Context files | 0.2% -> 0.2% (0.0%↑） |
0.1% -> 0.1% (0.0%↑） |
0.0% -> 0.0% (0.0%↑） |
| Tools | 3.3% -> 3.3% (0.0%↑） |
3.3% -> 3.3% (0.0%↑） |
4.9% -> 4.9% (0.0%↑） |
| Kiro responses | 0.0% -> 0.2% (0.2%↑） |
0.0% -> 0.2% (0.2%↑） |
0.0% -> 0.2% (0.2%↑） |
| Your prompts | 0.0% -> 1.1% (1.1%↑） |
0.0% -> 1.2% (1.2%↑） |
0.0% -> 8.0% (8.0%↑） |
なかなかのインパクトがありそう？
いいねとストックよろしくお願いします！