playwright-cli skillの使い方｜試した結果
「自社サイトの問い合わせフォームが、ちゃんと動いているか。更新のたびに自分で押して確かめている」——この確認作業を、playwright-cli skillに任せられないかと考える人は多いはずです。
結論から言うと、playwright-cli（プレイライト・シーエルアイ）は、Claude Codeにブラウザの操作を任せるための道具と、その使い方を教えるスキルのセットです。ページを開く、入力する、ボタンを押す、画面を撮る、スマホの画面幅にする、といった作業を、画面に出ない別のブラウザで進めてくれます。私が試したフォームの動作確認は、1回の依頼で約32秒で終わりました。
株式会社Fyveは、Claude Codeのスキルを実際に入れ、架空の会社の仕事で試した結果だけを書いています。この記事も、入れ方と頼み方に加えて、スキルなしで同じ依頼を出した場合との違い、同じ種類の別スキル（agent-browser）との違い、安全面、試せなかったことまで正直に書きます。
playwright-cliとは｜Claude Codeにブラウザ操作を任せるスキル
playwright-cliは、Microsoftの「Playwright」のチームが公開している、ブラウザ操作のコマンドです。GitHubのmicrosoft/playwright-cliで公開されていて、ライセンスはApache-2.0です。2026年10月21日時点で、最新の版はv0.1.22（2026年9月28日公開）、GitHubのスター数は14,431でした。
READMEの見出しには「Playwright CLI with SKILLS」とあり、コマンド本体の中に、Claude Code向けのスキル（使い方の説明書）が同梱されています。スキルを入れると、「このページを開いて」「ここを押して」のような日本語の依頼を、Claude Codeがこのコマンドの組み合わせに直して実行します。
ページの内容は、画面の絵ではなく「ボタンや入力欄の一覧（スナップショット）」にして扱います。一覧の中の各部品には e21 のような番号が付き、「e21を押す」という形で操作します。READMEは、この作りのおかげで、AIに渡すページの情報が少なく済み、MCP（別の接続方式）よりも使用量が減ると説明しています。この点は説明書の記載で、私は測っていません。
どんな仕事に使えるか
- 自社サイトの問い合わせフォームに、空のまま・入力して、それぞれ送信して動きを確かめる
- 自社サイトをスマホの画面幅で開き、横にはみ出すページを見つける
- 競合のページを開いて、画面を撮り、価格などを表にまとめる
- ページのエラー表示（コンソール）や通信の記録を見て、不具合の手がかりを集める
playwright-cliの入れ方｜READMEにある手順
Node.js（18以上）が入っていることが前提です。APIキーは要らず、無料です。READMEの手順は次の2つです。
npm install -g @playwright/cli@latest
playwright-cli --helpこれでコマンド本体が入ります。続けて、Claude Codeで使うフォルダで、次のコマンドを実行します。
playwright-cli install --skills作業フォルダの .claude/skills/playwright-cli/ に、説明書（SKILL.md）と、用途別の参考資料10本が置かれます。私が確かめたところ、置かれた説明書は、本体に同梱されているものと中身が同じでした。ネットから別に取ってくる仕組みではありません。
なお、今回の試験では普段の環境を汚さないため、-g（パソコン全体に入れる）を使わず、作業フォルダの中だけに入れました。ブラウザは、手元にChromeが入っているMacでは、追加のダウンロードなしで開けました。Chromeが無い場合は playwright-cli install-browser でブラウザを取得できます（私の環境では、試験のために取得した分も含めて約570MBでした）。
READMEには、スキルを入れずに「playwright-cli --help を見て使って」と頼む方法も紹介されています。この方法は試していません。
Claude Codeにこう頼む
スキル名を言わなくても、ブラウザを使う依頼なら自動で起動しました。頼み方の例です。
- 「お問い合わせページのフォームが動くか確かめて。何も入れずに送ったときと、全部入れて送ったときの画面を保存して。お客さんが困りそうな点があればまとめて」
- 「トップと料金ページをスマホの画面幅で開いて、横にはみ出すページを教えて」
- 「ログインが必要な管理画面を開いて…」（※ログインが必要なサイトは今回試していません）
起動しない場合は「playwright-cliを使って」と名前を添えてください。今回は2回とも名前なしで起動したので、名前を添えた頼み方は試していません。
試した結果｜架空の会社のお問い合わせフォームを確かめた
試したのは、架空の会社（手作り家具を売る従業員12名の会社）の仕事です。会社のサイトをパソコン上に用意しました。このサイトには、私が不具合を3つ仕込んであります。そのうちフォームの不具合は「必須項目が空のまま送信しても、エラーが出ず何も起きない」というものです。次の依頼を出しました。
結果は次のとおりです。
- 発動：スキル名を言わずに自動で起動した
- 時間・使用量：32.4秒、10ターン、費用の概算は0.136ドル
- できたもの：画面のスクリーンショット3枚（空のまま送信、入力済み、送信後）と、問題点をまとめたレポート（form-report.md）
- 正確さ：仕込んだ不具合を見つけた。「何も入れずに送ると、エラー表示も警告もなく、お客さんには壊れているように見える」と指摘し、原因は
novalidate（ブラウザ標準の入力チェックを切る指定）だけがあって、代わりのエラー表示が無いことだと説明した
私が仕込んでいなかった指摘も、1つ出てきました。「全部入れて送信すると『送信しました』と出るが、通信が1回も発生していない。会社には何も届かない」というものです。これは、試験用に作った静的なサイトが、そもそも送信先を持たない作りだったためで、本物のサイトの不具合とは言えません。ただ、「見た目は成功しているのに実は送られていない」という種類の不具合を、通信の記録まで見て見つけられる点は、実務で役に立つと感じました。
気になった点もあります。メールアドレスの形式チェックが効かない、という指摘は、実際に不正なアドレスを入れて確かめたものではなく、novalidate があることからの推測でした。返答の書き方では、確かめた事実と推測が同じ文面に並んでいたため、レポートを受け取る側が区別して読む必要があります。
スマホ幅の確認も頼んでみた
2回目は「トップと料金ページをスマホの画面幅で開いて、横にはみ出すページを教えて」と頼みました。結果は21.6秒、7ターン、0.097ドルです。
playwright-cliは、iPhone 15相当（幅393px）で開き、料金ページだけが横にはみ出していることを見つけました。ページの幅は924pxで、原因は5列の料金表が画面幅に収まらないことです。直し方も2つ挙げてきました（表だけ横スクロールにする、スマホではカード表示にする）。これは、私がサイトに仕込んでおいた不具合と一致しています。さらに、ヘッダーのメニューが2行に折り返して「お問い合わせ」が途中で切れる点も、頼んでいないのに指摘してくれました。
スキルなしとの違い｜同じ依頼を、スキルを入れない状態で出した
読者がいちばん知りたいのは「入れると何が変わるか」だと思い、スキルを入れていない別のフォルダで、同じ2つの依頼を出して比べました。
1回目 フォーム確認 | 2回目 スマホ幅 | |
|---|---|---|
スキルあり | 32.4秒・10ターン・0.136ドル | 21.6秒・7ターン・0.097ドル |
スキルなし | 30.9秒・6ターン・0.101ドル | 20.4秒・5ターン・0.072ドル |
出来は、どちらもほぼ同じでした。フォームでは、スキルなしでも不具合を見つけ、原因まで説明しました。スマホ幅でも、924pxのはみ出しと原因を同じように見つけています。むしろフォームの確認では、スキルなしのほうが、不正なメールアドレスを実際に入れて試した画面まで撮っていて、確かめた範囲が少し広くなりました。
時間はほぼ同じで、費用はどちらの依頼でも、スキルありのほうが約3割多くなりました。スキルの説明書（約15KB）を最初に読み込む分だけ、使用量が増えたためと考えられます（これは推測で、読み込み量を細かく分けて測ってはいません）。
ここで注意してほしいのは、スキルなしで動いたのは、私のMacに、ブラウザ操作の道具（PlaywrightというPython用のライブラリ）とChromeがすでに入っていたからです。スキルなしのClaude Codeは、その道具を探して自分でプログラムを書き、1回の実行でフォームの試験を終わらせていました。何も入っていない環境で同じことができるかは、確かめていません。また、各条件1回ずつの試験なので、時間や費用の差は、ぶれの範囲かもしれません。
つまり、静的な1〜3ページを確かめるくらいの軽い仕事では、スキルを入れても差は出ない、というのが私の試した範囲の結論です。スキルを入れる価値があるのは、ブラウザ操作の道具がパソコンに無い場合や、ブラウザを開いたまま何度も指示を出して進める、もう少し長い作業のほうだと考えられます（これも推測で、今回は確かめていません）。
agent-browserとの違い
同じように「Claude Codeにブラウザ操作を任せる」スキルに、Vercel Labsのagent-browserがあります。同じ架空の会社のサイトで、同じ「スマホ幅の確認」を頼んだ記録があるので、並べてみます（agent-browserの試験はiPhone 12相当、playwright-cliはiPhone 15相当で、ほかの条件は同じです）。
- 出来：どちらも、料金ページだけが横にはみ出す点（924px）と原因を見つけ、直し方まで示した。時間もほぼ同じ（21.2秒と21.6秒）で、費用は0.100ドルと0.097ドル
- ターン数：agent-browserは12ターン、playwright-cliは7ターンだった。agent-browserは、スキルが短い案内役で、使い方を取り寄せたり説明書を検索したりする回り道があったため。playwright-cliのスキルは、主なコマンドを説明書に直接書いていて、スマホの機種を指定するコマンドもそこにあった、というのが違いと考えられる（推測）
- ブラウザの用意：agent-browserは、専用のChromeを186MBダウンロードして使った。playwright-cliは、手元にChromeがあれば、追加のダウンロードなしで開けた
- 必要なNode.js：agent-browserはpackage.jsonに24以上と書かれている。playwright-cliは18以上
- 説明書にある得意技：agent-browserは、画像どうしの差分と、ログインの保管庫。playwright-cliは、画面の録画、操作の記録（トレース）、通信の差し替え、Firefox・WebKitでの動作確認、実行中のブラウザの様子を見るダッシュボード。どちらも、私は主な機能しか試していません（下の「試していないこと」を参照）
- 作っている所：agent-browserはVercel Labs（スター44,351）、playwright-cliはMicrosoftのPlaywrightチーム（スター14,431）。どちらも2026年10月21日時点
私の見立ては、軽い確認作業ならどちらを選んでも結果は変わらない、というものです。ブラウザの録画や通信の記録まで使って不具合を調べたいなら、playwright-cliの説明書にその手順が書かれています。ただし、これは説明書の記載からの見立てで、同じ仕事を両方で測ったものではありません。
中身の安全確認｜何を外に送り、何を実行するか
入れる前に、リポジトリの中身と、実際に入れたパッケージを読んで確かめました。
- スキルの権限：SKILL.mdの
allowed-toolsはBash(playwright-cli:*)、Bash(npx playwright:*)、Bash(npx --no-install playwright:*)だけです。許可されるのはplaywrightのコマンドに限られます - インストール時の実行：パッケージの依存はplaywrightとplaywright-coreの2つで、インストール時に自動で走る処理（postinstallなど）は見つかりませんでした
- 外への通信：コマンドは、1日に1回、
openなどのときにnpm viewで最新版の有無をnpmのサーバーに問い合わせます（環境変数NO_UPDATE_NOTIFIERを設定すると止められます）。ブラウザを取得するときは、Playwrightの配布元から取得します。そのほかに、利用状況をどこかへ送る処理は、コード検索で（telemetry、posthog、sentryなどの語で）見つかりませんでした。ただし、全てのコードを1行ずつ読んだわけではありません - ログイン情報の扱い：
state-saveで保存するログイン状態のファイルには、Cookieなどの認証情報が入ります。参考資料にも「コミットしない」「.gitignoreに入れる」と書かれています。何も指定しないと、ブラウザの情報は保存されず、閉じると消えます（--persistentを付けると保存されます） - 任意のコードの実行：
run-codeとevalは、ページの中で好きなプログラムを動かせます。Claude Codeが書いたプログラムが動くことになるので、よく知らないサイトで使うときは注意してください。なお、ページ側が用意する「WebMCP」の道具（ページが勝手にAI向けに登録するもの）は、スキルの説明書が「ページから来る信用できない入力」として扱うよう書いています - 普段のブラウザにつなぐ設定：
attach --extensionやattach --cdpは、起動中の普段のブラウザを操作します。今回は試していません。初めての人は避けたほうがよい設定です
私の試験では、もう1つ気づいた点があります。作業フォルダの中に .playwright-cli/ というフォルダが作られ、開いたページの一覧（スナップショット）やコンソールの記録が溜まっていきます。ページの文字が入っているので、そのフォルダをGitなどに入れないようにしてください。また、Macでは、ブラウザの接続情報が ~/Library/Caches/ms-playwright/ の下にも残りました。作業が終わったら playwright-cli list で残っているブラウザを確認し、playwright-cli close-all で閉じてください（READMEによると、画面に出ないブラウザは、1時間操作がないと自動で終了します）。
playwright-cliが向かない場面
- ブラウザ操作の道具がすでに入っていて、1〜3ページを確かめるだけのとき（スキルなしでも同じ品質で終わりました）
- 普段のログイン状態をそのまま使いたいとき（今回、ログイン済みのサイトは試していません。READMEにある
attachを使う方法も試していません） - 確かめた事実と推測を、はっきり分けたレポートが欲しいとき（今回のレポートでは、メールの形式チェックが推測のまま書かれていました。「実際に試した項目と、試していない項目を分けて書いて」と頼むと安心です）
- Webサイトの利用規約でロボットによる取得を禁じているとき（道具の問題ではなく、使う側の責任です）
試していないこと
- ログインが必要なサイト、
state-save、--persistent、attach - 画面の録画（
video-start）、show --annotate（人が画面に書き込んで指示する機能）、Playwrightのテストの生成 - Firefox・WebKitでの動作確認、複数のブラウザを同時に使う使い方
- 動きの多いサイト、日本語以外のサイト、動作の遅いサイト
手で確かめたのは、find（ページ内の文字を探す）、console、requests、tracing-start／tracing-stop、resize です。いずれも動きました。最初のブラウザの起動だけ約10秒かかり、その後の各コマンドは1秒以内でした。
まとめ｜入れる前のチェックリスト
- □ Node.jsが入っている（18以上）
- □
npm install -g @playwright/cli@latestを実行した（公開元はMicrosoftのmicrosoft/playwright-cliと確認した） - □ Claude Codeで使うフォルダで
playwright-cli install --skillsを実行した - □ 最初は、ログインが不要な公開ページで試した
- □
.playwright-cli/フォルダを、Gitなどに入れない設定にした - □
state-saveやattachは、意味が分かるまで使わない - □ 作業が終わったら
playwright-cli listで確認し、close-allで閉じた - □ レポートを頼むときは、試した項目と試していない項目を分けて書くよう頼んだ
playwright-cliは、Webサイトの確認作業を言葉で頼める無料の道具です。ただ、軽い確認ではスキルなしと差が出ませんでした。まずは、自社サイトのお問い合わせフォームとスマホ表示の確認のような、ログイン不要の定例作業で試し、確認の手間が減るかを見るのがよいと思います。
ブラウザ自動化の道具どうしの違いは、次の記事でも扱っています。
Claude Code Skillsの使い方｜業務をSkill化する実践手順
「ブラウザ作業を任せる」のスキルは、ほかに2本を同じ架空の会社の材料で試しています。
仕事でAIを使う人が「絶対に」知っておくべき Claude Codeスキル TOP10
31本を実際に入れて、スキルなしと比べた結果つき（全28ページ）
スキルを入れても、Claude が急に賢くなるわけではありませんでした。31本を架空の会社の仕事で試し、同じ依頼をスキルなしでも検証して比べたうえで、導入する価値があった10本を仕事別にまとめています。
- 文章・スライド・図・数字・調べもの・契約書など、仕事別の10本
- 1本ごとに、スキルなしと比べた時間・費用・出来
- 実物の画面と、Claude Code にそのまま貼れる頼み方
- 外した5本の理由と、入れる前に確かめる4つのこと
メールアドレス登録で他にも様々な資料を閲覧できます
＋9PDF 18点・合計468ページ ＋ すぐ使えるzip素材 3点
どれも登録後の受け取りページから、まとめてダウンロードできます。
毎週配信の無料ニュースレター「AIネイティブ超研究」の購読特典です。メール登録後すぐ、受け取りページのご案内が届きます。そこにはこの資料に加えて、過去の特典もすべてまとめて置いてあります。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。