ClineでPlaywright MCP を使ってみた（初心者向け備忘録）

# Playwright MCP を使ってみた（初心者向け備忘録）

初学者です。  
今回は、最近話題の **Playwright MCP** を試してみました。  
備忘録も兼ねて、導入時の手順や注意点などをまとめます。

---
## 変更履歴
1. 2025/04/15 初版
1. 2025/04/16 画像を貼付
---

## 環境

- OS：Windows 11  
- エディタ：Visual Studio Code + cline 拡張機能  
- デフォルトターミナル：Command Prompt  

---

## モデル設定（Claude 3.7 Sonnet）

### 利用モデル

`cline` の `Settings` タブから `bedrock` の `claude-3.7-sonnet` を利用しました。  
私の場合はリージョンが `us-west-2` だったため、**クロスリージョン設定**が必要でした。

![cross region.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469547/33a34833-6abf-474f-8ba8-680081afa68e.jpeg)

### 利用できなかったモデルの例

他のモデル（例：`nova-lite`）は利用できませんでした。

```
[ERROR] Failed to process Nova response: Invocation of model ID amazon.nova-lite-v1:0 with on-demand throughput isn’t supported. Retry your request with the ID or ARN of an inference profile that contains this model.
```
![nova response.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469547/1e513dcd-e316-46d3-a7b8-230fcde349c7.jpeg)


このような理由から、`claude-3.7-sonnet` を選択しました。

### Claude 3.7 Sonnet の申請メモ（個人利用）

- 会社名：なし  
- 会社のURL：自分の GitHub のリンクを指定  
- 従業形態：自社の従業員  

> 何を入力すべきか迷ったので、上記をメモしておきます。

---

## MCP サーバーの事前準備

ここでは、コミュニティ版の [`@executeautomation/playwright-mcp-server`](https://www.npmjs.com/package/@executeautomation/playwright-mcp-server) を利用します。

多くの記事では以下のようにグローバルインストールしていますが：

```bash
npm install -g @executeautomation/playwright-mcp-server
```

私は **グローバルには入れたくなかった**ので、ローカルインストールを選びました。

```bash
npm install @executeautomation/playwright-mcp-server
```

> ※コミュニティ版である理由は、`cline` の Marketplace に掲載されているのがコミュニティ版だからです。

---

## MCP 設定

### MCP のインストール

まず、`cline` の **MCP Servers** タブから `playwright` をインストールします。  

![mcp install.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469547/6de25f11-470f-43b5-94a1-1e9157085f8f.jpeg)

次に、以下のように `cline_cmp_settings.json` に設定を記載します。

```json
{
  "mcpServers": {
    "playwright": {
      "disabled": false,
      "timeout": 60,
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@executeautomation/playwright-mcp-server"
      ],
      "transportType": "stdio"
    }
  }
}
```

![json edit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469547/e8ca8191-407d-445d-af3b-c2d3fa8d4a1a.jpeg)


---

### ハマったこと

下記の設定で試したところ、以下のエラーが出ました：

▼cline_mcp_setting.json
```json
{
  "mcpServers": {
    "playwright": {
      "disabled": false,
      "timeout": 60,
      "command": "npx",
      "args": [
        "-y",
        "@executeautomation/playwright-mcp-server"
      ],
      "transportType": "stdio"
    }
  }
}
```
▼エラー
```
spawn npx ENOENT spawn npx ENOENT
```

![invalid json.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469547/faef4945-6327-4b21-9584-1093e2eb0244.jpeg)


原因は `npx` のエントリーポイントが見つからないことのようでした。  
VSCode のターミナルでは `npx` が使えるのに、`cline` 側では動作しない…。

---

### 試行錯誤と解決策

いろいろ調べていくと、GitHub の [issue](https://github.com/cline/cline/issues/1948) に次のような案がありました：

- `node` コマンドで `index.js` をフルパス指定して起動する方法

ですが……

> そんなことしたくない！くどいから！

というわけで、試行錯誤の末、ようやく動作する設定が以下の通りとわかりました。  
帰納的に考えると、`cline` が使っているターミナルは、自分の VSCode のものと異なる気がします。  
そのため、明示的に `cmd` 経由で `npx` を叩くことで、ようやく動きました。

---

## 所感とまとめ

- 動き出すまでに結構手間がかかった  
- `cline` の Marketplace で MCP Server をインストールしたときに、設定も自動反映されてほしい  
- 今回はとりあえず動かすところまで確認できた

---

> 間違っているところやより良い方法があれば、ぜひ教えてください！