Playwright MCPでE2Eテストを自動化する方法｜導入手順と使いどころ

2026 8/11

2026年8月11日 2026年8月11日

「AIに画面を操作させてテストできないか」
その仕組みを提供するのが Playwright MCP です。

Microsoftが公開しているオープンソースで、無償で使えます。
設定ファイルを1つ書けば、AIがブラウザを操作できるようになります。

ただし、回帰テストの主軸には向きません。
毎回同じ結果になるとは限らないためです。

この記事では、導入手順と実際の使いどころを解説します。
向かない用途と、テストコードに落とし込む流れまで整理しました。

Playwright MCPとは

Playwright MCP は、AIにブラウザ操作の機能を渡すためのサーバーです。
MCPは Model Context Protocol の略で、AIと外部ツールをつなぐ共通の規格です。

これを使うと、AIが自分でページを開き、クリックし、入力できます。
人が操作手順を1つずつコードで書く必要がありません。

特徴は、画面の見た目ではなくアクセシビリティツリーを使う点です。
これはブラウザが内部で持っている、画面構造のデータです。

方式	仕組み	特徴
画像認識型	スクリーンショットをAIが見る	画像を扱えるモデルが必要。読み取りが曖昧になりやすい
Playwright MCP	画面構造のデータを読む	要素を確実に特定でき、処理も軽い

ボタンやリンクが「何であるか」を、AIが文字情報として受け取れます。
そのため、座標のずれや描画の違いに影響されません。

名前は同じですが、使い方も用途も異なります。
置き換えるものではなく、組み合わせて使います。

実務では「MCPで下書きを作り、Playwrightのコードとして固定する」流れが現実的です。
両者の長所を使い分けられます。

準備するものは Node.js と、MCPに対応したAIツールだけです。
Claude Desktop、VS Code、Cursor などが対応しています。

利用するAIツールのMCP設定に、次の内容を追加します。
これだけで、次回の起動時から使えるようになります。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

設定ファイルの場所は、AIツールごとに異なります。
多くのツールでは、設定画面からMCPサーバーを追加できます。

AIツールを再起動し、ブラウザ操作の機能が増えているか確認します。
初回はブラウザのダウンロードが走るため、少し時間がかかります。

「指定したページを開いて、見出しを教えて」と指示してみます。
ブラウザが立ち上がれば、接続は成功しています。

用途に応じて、起動時のオプションを加えます。
よく使うものを挙げます。

最初は画面を表示したまま使うことをすすめます。
AIが何をしているか、目で確認できるためです。

効果が出るのは、決まった手順を繰り返す場面ではありません。
むしろ「手順が決まっていない仕事」に向きます。

目的を伝えて、AIに画面を触らせます。
人が思いつかない操作順序を試すことがあります。

探索的テストの進め方そのものは、探索的テストの進め方｜規律ある4ステップ実践ガイドで解説しています。

実際に操作させたうえで、その手順をコードとして出力させます。
画面を見ながら書かせるため、要素の指定が実物と合います。

これが最も実用的な使い方です。
ゼロからコードを書く時間を大幅に減らせます。

仕様書がない画面の項目を洗い出させます。
入力欄の種類や必須項目を、一覧にしてもらえます。

資料が不足している状況での進め方は、資料なしのテスト代行は可能｜依頼前の準備と進め方にまとめています。

指示は具体的にします。
曖昧だと、AIが勝手に判断して別の操作をします。

目的	指示の例
画面項目の洗い出し	「このページの入力欄をすべて挙げて、必須かどうかを表にして」
異常系の確認	「メールアドレス欄に全角文字を入れて送信し、エラー文言を報告して」
コード生成	「今の操作をPlaywrightのテストコードにして。要素はロールと名前で指定して」
表示崩れの確認	「スマートフォンの幅で開いて、見切れている要素があれば教えて」

コード生成では、要素の指定方法まで指定します。
指定しないと、壊れやすいセレクタが使われることがあります。