MCP入門記事を書いた後、一番よく聞かれたのが「バージョンが合わない」
以前Playwright MCP入門の記事を書きました。AIにブラウザを触らせてテストを書かせる、という内容です。あの記事では@playwright/mcpというパッケージを別途インストールしてもらう手順を紹介したのですが、正直に言うと、その後一番よく聞かれたのがバージョンの話でした。
「MCPサーバー経由だとブラウザが起動しない」「エージェントが操作しているブラウザと、テストランナーが使っているブラウザが別物になっている気がする」。原因を辿ると大体、@playwright/mcpが内部で持っているPlaywright本体のバージョンと、プロジェクトの@playwright/testのバージョンがずれていました。手でpinしていたバージョンを上げ忘れる、というよくある話です。
その面倒が、Playwright 1.62でようやく解消されました。今回はその変更点を、公式リリースノートを確認したうえでまとめます。
これまでの構成のおさらい
これまでMCP経由でAIにブラウザを触らせるには、プロジェクトとは別に次のようなパッケージを用意する必要がありました。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
@playwright/mcpは独立したnpmパッケージで、中に自分専用のPlaywright本体を抱えています。プロジェクト側の@playwright/testとは別物なので、両者が同じバージョンのブラウザを使っている保証はどこにもありません。@latestを付けていれば毎回最新を取りには行きますが、それはそれで「昨日まで動いていたのに今日は挙動が変わった」という別の不安定さを招きます。かといってバージョンを固定すれば、今度はプロジェクト側のPlaywrightを上げるたびに手でMCP側も追随させる作業が発生します。どちらに転んでも面倒、という状態でした。
1.62で何が変わったか
公式のリリースノート（github.com/microsoft/playwright/releases/tag/v1.62.0）を確認したところ、次のように書かれていました。
Playwright now bundles the Playwright MCP server and playwright-cli, runnable via
npx playwright mcpandnpx playwright cli.
訳すと「PlaywrightはMCPサーバーとplaywright-cliを本体に同梱するようになり、npx playwright mcpとnpx playwright cliで実行できる」ということです。つまり@playwright/mcpという別パッケージを入れなくても、普段テストで使っているplaywright本体（1.62以降）さえ入っていれば、そのままMCPサーバーが起動します。バージョンを追いかける作業自体がなくなった、というのがこの変更の一番の価値だと感じました。
リリースは2026年7月24日、翌週の7月30日には1.62.1というパッチが出ています。細かい修正が入っているようなので、これから入れる方はパッチ版の1.62.1以降を使うのが無難です。
実際に動かしてみる
手元のPlaywrightプロジェクトを1.62以降に上げてから試してみましょう。まずはバージョンを確認します。
npx playwright --version
# Version 1.62.1 のように表示されればOKです
あとはこれだけです。
npx playwright mcp
MCPサーバーが起動して、標準入出力で待ち受け状態になります。これまでのように@playwright/mcpをnpm installする工程がまるごと消えているのが、実際にやってみると一番の実感でした。瞬殺ですね。
Claude Codeに登録する場合も、コマンドの部分を差し替えるだけです。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["playwright", "mcp"]
}
}
}
この設定を.mcp.jsonとしてプロジェクト直下に置いておけば、Claude Codeがプロジェクトを開いたタイミングで自動的にこのMCPサーバーを使ってくれます。もし既存プロジェクトに@playwright/mcpの設定を書いていた場合は、argsの中身を["@playwright/mcp@latest"]から["playwright", "mcp"]に書き換えるだけで済みます。
正直に書いておくと、まだ揺れがある
ここは正直に書いておきたいのですが、執筆時点で公式のMCP入門ページを見ると、案内されている設定はまだ従来の@playwright/mcp@latestのままでした。リリースノートには同梱の記載がはっきりあるのに、セットアップ手順のドキュメントがまだ追いついていない、という状態のようです（ドキュメントの更新が反映されるまでのタイムラグなのか、それとも何か意図があるのか、私には判断がつきません）。
実務で入れる場合は、まずnpx playwright mcpが手元のバージョンで動くかを確認したうえで、既存の@playwright/mcp設定を残すか消すかを決めるのが安全だと思います。少なくとも新規にMCPを導入するプロジェクトなら、これから追加インストールする理由はもうありません。
ついでに来たbrowser.bind()にも触れておく
同じ1.62ではbrowser.bind()というAPIも入っています。起動したブラウザを、playwright-cliやMCPサーバーなど複数のクライアントから同時に接続できる状態にする機能です。MCPサーバー自体が本体同梱になったことで、テストランナーが起動したブラウザとエージェントが操作するブラウザを、同じ土台の上で共有しやすくなった、という流れの一部だと理解しています。こちらはまだ試せていないので、別の機会に検証したいと思っています。
Claude Codeの周辺機能という意味では、以前Agent Teamsを扱った記事でも触れましたが、Claude Code側もエージェントが複数のツールを行き来する構成がどんどん増えています。MCPサーバー側のバージョン管理が楽になったのは、そういう構成を組む人にとってはありがたい話ではないでしょうか。
@playwright/mcpを使っている人は消していいのか
「じゃあ今入れている@playwright/mcpはもう消していいのか」というと、これも正直なところ、私は消していいと考えています。少なくとも新規に触るプロジェクトでは追加インストールする理由がありません。ただし社内の複数プロジェクトで同じpackage.jsonを使い回している場合、npx playwright mcpへの切り替えはPlaywright本体を1.62以上に上げることとセットになります。本体を上げるとブラウザバイナリの再インストールが走ったり、他の破壊的変更の影響を受けたりする可能性もあるので、テストスイート全体の動作確認をしてから切り替えるほうが安全です。MCPだけを先に新しくして、本体は古いまま、ということはできません。
まとめ
Playwright 1.62で、MCPサーバーとplaywright-cliが本体に同梱されました。npx playwright mcpを叩くだけで動くようになり、@playwright/mcpを別途入れてバージョンを手で合わせる手順は要らなくなっています。地味な変更に見えるかもしれませんが、MCP入門を書いたときに一番つまずきやすかった箇所がまるごと消えたので、個人的にはかなり嬉しいアップデートでした。
これからPlaywright MCP入門の記事を試す方は、あの記事の手順ではなくnpx playwright mcpから始めてください。すでに@playwright/mcpを入れている方も、本体を1.62.1以降に上げたタイミングで切り替えを検討してみてはいかがでしょうか。
コメント