【第1弾】【初心者向け】Claude CodeにPlaywrightプラグインを入れる方法

この記事は、Claude Code × Playwright を段階的に理解していくシリーズの第1弾です。
第1弾では、導入編として Playwright プラグインのインストール手順と基本的な使い方を整理します。

Claude Code では、プラグインを追加して機能を広げることができます。
その中でも Playwright プラグイン は、ブラウザを操作して、画面確認や簡単なテストを行いたいときに便利です。

この記事では、Claude Code の公式 Marketplace から Playwright プラグインをインストールする手順 を、初心者向けにわかりやすくまとめます。

この記事でわかること

• Playwright プラグインで何ができるのか
• Claude Code でのインストール手順
• インストール後の確認方法
• 最初に試す簡単な使い方

Playwright プラグインとは？

Playwright プラグインを使うと、Claude Code からブラウザ操作を頼めるようになります。

例えば、次のようなことができます。

• Webページを開く
• ボタンをクリックする
• フォームに入力する
• スクリーンショットを撮る
• コンソールエラーを確認する
• ネットワークエラーを確認する
• 簡単なE2Eテストのような確認をする

つまり、「ブラウザで手動でやっていた確認作業の一部を、Claude Code に手伝ってもらえる」 イメージです。

まず結論

インストール手順は、とてもシンプルです。

1. /plugin を実行する
2. Playwright を検索する
3. インストールする
4. /reload-plugins を実行する
5. connected になっていることを確認する

ここから順番に見ていきます。

手順1：/plugin を実行する

まず、Claude Code で次のコマンドを実行します。

/plugin

すると、プラグイン管理画面が開きます。

スクショ1：Discover plugins 画面

• Playwright と検索している画面

手順2：Playwright を検索する

検索欄に Playwright と入力します。

すると、一覧に playwright が表示されます。
今回の画面では、公式 Marketplace のプラグインとして表示されていました。

ここで Playwright を選択します。

手順3：Playwright をインストールする

Playwright を選んでインストールします。

インストールできると、次のようなメッセージが表示されます。

Installed playwright. Run /reload-plugins to apply.

ここで大事なのは、この時点ではまだ有効化が終わっていないという点です。
続けて、プラグインの再読み込みが必要です。

スクショ2：インストール完了メッセージ

• Installed playwright. Run /reload-plugins to apply. と表示されている画面

手順4：/reload-plugins を実行する

続けて、次のコマンドを実行します。

/reload-plugins

これで、インストールしたプラグインが読み込まれます。

スクショ3：/reload-plugins 実行後の画面

• /reload-plugins 実行後の結果が表示されている画面

手順5：Playwright が接続できているか確認する

もう一度 /plugin を開いて、Installed タブを確認します。

ここで、次のように表示されていれば OK です。

• playwright Plugin
• playwright MCP
• connected

特に大事なのは、playwright MCP が connected になっていることです。

これが確認できれば、Playwright プラグインは使える状態です。

スクショ4：接続確認画面

• playwright MCP connected が表示されている画面

ここまでできたらインストール完了

今回の流れで確認できたことをまとめると、次のとおりです。

• Playwright の検索ができた
• インストールできた
• /reload-plugins で反映できた
• playwright MCP connected まで確認できた

つまり、Playwright プラグインの導入は完了です。

最初に試すおすすめのプロンプト

インストールが終わったら、まずは簡単な操作から試すのがおすすめです。

1. ページを開いて確認する

example.com にアクセスして、スクリーンショットを撮って

2. エラーを確認する

トップページを開いて、コンソールエラーと失敗しているネットワークリクエストがあるか確認して

3. 画面遷移を確認する

トップページから検索して、詳細ページまで進んで、表示崩れがないか確認して

このように、自然な日本語で頼めるのがかなり使いやすいところです。

初心者がハマりやすいポイント

1. インストールしただけでは終わりではない

Installed playwright と出ても、そのままではまだ使えません。

必ず次のコマンドを実行します。

/reload-plugins

2. connected になっているか確認する

インストールできていても、実際に使える状態かどうかは別です。

そのため、最後に Installed タブで playwright MCP connected を確認するのが重要です。

3. Auto-update failed が出ても、まずは接続状態を見る

画面下に Auto-update failed のような表示が出ることがあります。
ただし、今回のスクショではその表示があっても、Playwright 自体は connected になっていました。

なので、まず優先して確認すべきなのは、次の点です。

• Playwright が installed になっているか
• playwright MCP が connected になっているか

Playwright プラグインはどんな人に向いている？

こんな人に向いています。

• Webページの動作確認を効率化したい人
• 表示崩れやエラーをすばやく確認したい人
• ブラウザ操作を Claude Code に手伝ってほしい人
• E2E テストの入口として触ってみたい人

特に、「まずは簡単な確認から始めたい」初心者には入りやすいプラグインだと思います。

まとめ

Claude Code への Playwright プラグイン導入は、そこまで難しくありません。

手順をもう一度まとめると、次のとおりです。

1. /plugin
2. Playwright を検索
3. インストール
4. /reload-plugins
5. playwright MCP connected を確認

最初は難しく考えず、
「ページを開く」「スクリーンショットを撮る」「エラーを確認する」
あたりから試すと使い方がつかみやすいです。

Playwright を使えるようになると、Claude Code でできることがかなり広がります。
まずは簡単なプロンプトから試してみるのがおすすめです。

おわりに

今回は、Claude Code に Playwright プラグインを入れる手順を、初心者向けにまとめました。

関連記事

本記事は、Claude Code × Playwright を段階的に理解していくシリーズの一部です。

• 【第1弾】【初心者向け】Claude CodeにPlaywrightプラグインを入れる方法
• 【第2弾】【初心者向け】Claude Code × PlaywrightでWebサイトを点検・改善する方法