Yapodu Tech Blog

株式会社ヤポドゥの技術ブログです。

【導入編】Playwright MCP を WSL2 Cline 経由で実行する

Microsoft から Playwright MCP がリリースされましたので、2回に分けて導入と Playwright MCP ならではの使い方を解説していきます。

Playwright とは？

Playwright は Web アプリケーションのテストを自動化するためのツールです。Microsoft が開発したオープンソースのプロジェクトで、TypeScript、Python等で利用できます。Playwright を使用すると、ブラウザの操作を自動化し、Web アプリケーションのテストを効率的に行うことができます。特に、複数のブラウザ（Chromium、Firefox、WebKit）をサポートしているため、クロスブラウザテストが容易になります。 ヤポドゥではユーザー体験シナリオでの監視を行うために利用しています。
例: ユーザーログイン -> 検索 - > 商品確認 - > ログアウト
類似の ツールに Selenium があります。

MCP とは？

MCP (Model Context Protocol)は生成AIにとってのUSBポートのようなものと言われています。乱暴にまとめると、生成AI（LLM）とツール（この場合はPlaywright）の接続インターフェースです。
通常のLLMの応答プロセスでは、ユーザーが質問すると、LLMは質問に沿った一般的な回答をします。
一方、MCP経由の場合は、同じ質問に対して「Playwright MCPでブラウザ操作ですね、はい、MCPに沿って実施できます」と応答し、より詳細なコンテキストを理解した上で処理します。さらに付加価値のある応答が可能になります。

以下の資料が大変参考になります。 https://speakerdeck.com/minorun365/yasasiimcpru-men

Playwright MCP とは？

Playwright MCP では、コードアシスタントのようにテキストベースの指示で生成AIがブラウザを操作することが出来るようになります。

VSCode + Cline を用いた Playwright MCP の構築

本記事の環境

  • Windows 11 Pro
  • WSL2 (Ubuntu 24.04)
    • Docker Compose
    • Docker (Playwright MCP Server)
  • VSCode + Cline
  • Playwright MCP Server は Cline からのインストールではなく公式を使用する

前提条件

以下は完了済みのものとします。

  • WSL2 WSL2 (Ubuntu 24.04) のインストール
    • Docker のインストール
    • Docker Compose のインストール
  • VSCode + Cline
    • Cline の API Provider と Key の設定

WSL2 上の Docker へ Playwright MCP Server の構築

WSL2 の Docker から Windows 上でブラウザ操作を行うためには、Volume や X11 関連の指定を行う必要がありますが、今回はヤポドゥの用意した Docker 環境で MCP を含めて操作を行います。
WSL2 の Docker からのブラウザ起動についてレポジトリ内の関連設定をご確認ください。
github.com

github から Docker compose を clone

Docker から Playwright MCP Server を起動します。 Playwright を実行する際に WSL2 Ubuntu 上でブラウザを起動し、Windows 上でブラウザ確認できるようにします。

$ git clone https://github.com/yapodu-inc/ypd-docker-playwright
$ cd ypd-docker-playwright

.env のコピー

$ cp .env.example .env

Docker Compose の ビルドと起動

$ docker compose build
$ docker compose up -d

初回起動時は以下が出力されれば成功です。

$ docker compose up -d 
[+] Running 1/1
 ✔ Container ypd-docker-playwright-ypd-playwright-mcp-1  St...                                                        0.3s

MCP Server のポートがリッスンしていることを確認します。

$ ss -nat | grep ':9876'
ESTAB  0      0           127.0.0.1:39610    127.0.0.1:9876        
ESTAB  0      0           127.0.0.1:9876     127.0.0.1:39610

VSCode Cline の設定

VSCode 起動

code .

拡張機能 Cline のインストール と API Key の登録

LLM の API 設定を実施しておいてください。 本記事環境では Claude 3.7 Sonnet の設定で、作業を進めますが、特に API に指定はないので利用中の LLM を登録してください。

Cline MCP Server 設定

Cline のメニューから [ MCP Servers ] をクリックし MCP 設定を表示

[ Installed ] -> [Cofigure MCP Servers ]をクリックし VS Code で cline_mcp_settings.json を開いてください。

Cline 内 MCP 用の設定

MCP Server 名として playwright を登録してください。 その他の MCP Server がない際は、以下の記載で保存してください。

cline_mcp_settings.json

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:9876/sse"
    }
  }
}

保存後に Cline 設定メニューの [ Done ]で設定反映してください。

VS Code の再読み込み

コマンドパレットより以下を実行してください。

Developer: Reload Window

Playwright MCP の実行

実際に Playwright MCP を実行してみます。 竹ノ塚の名店タカノのチキンライスを調べてみます。

Cline の Chat 欄に MCP Server で Playwright を用いた指示を行います。

指示:

- 日本語で回答してください。
- mcpServers の playwright を使ってください。
- 足立区竹ノ塚のタカノにはチキンライスはありますか？

WSL2 経由で chrome ブラウザが起動し、操作が行われます。

継続質問が来るので [Approve]を実行し、処理を数回進めると回答をまとめて報告します。

回答報告:

竹ノ塚のタカノには「チキンライス」という名前のメニューはありますが、実際には鶏肉ではなく豚肉を使ったケチャップライスです。
検索結果から見つかった口コミによると、「メニューのチキンライスの前に豚肉の文字がある」「チキンじゃなく豚肉のオムライス」
「ご飯はチキンライスではなく豚肉のケチャップライス」などの記述があります。
つまり、名前は「チキンライス」ですが、実際の具材は豚肉が使われているという特徴があるようです。

チキンライスのメニューはあるが、鶏肉ではなく豚肉のケチャップライスということがわかりました。

このように MCP サーバを経由することで TypeScript や Python を使用せずに Playwright を用いた操作が行えることがわかりました。

また、タカノはチキンライス以外も低料金で美味しいメニューが盛り沢山なので竹ノ塚にお越しの際は是非お立ち寄りください。

次回

次回 は Playwright MCP で監視やテストを行います。

参考