Amazon Q Developer(CLI Agent)からPlaywright MCPを使用してブラウザ自動テスト

2025-05-04

環境

[OS] Windows 11 Home (VirtualBox: Ubuntu 22.04)
[Amazon Q Developer(CLI Agent)] 1.7.3 → 1.9.1
[Node.js] 20.14.0
[Playwright] 1.52.0

前提

Amazon Q Developerには「CLI Agent」と「IDE版」がありますが、本記事では前者を扱っています。

(CLI Agent) ターミナルソフトなどから利用。オープンソースプロジェクト
(IDE版) VSCodeなどのExtensionとして利用。非オープンソース

MCPの概要を理解する

始めにMCP(Model Context Protocol)の概要を押さえておくと作業を進めやすいです。
構成は下記の図が参考になります。

MCP Architecture

この中で:

「Host with MCP client」が「CLI Agent」
「MCP Server A」が「Playwright MCPサーバー」
「Local Data Source A」が「Playwrightとそれを通じて操作するブラウザ」

に該当します。
MCPの「Server」はいわゆるインターネット上のサーバーではなく、「サービスを提供する役割」として捉えておいた方が良さそうです。

CLI Agentのアップデート

まず、MCPに対応しているのは1.9.0以上なので、アップデートを試みましたが、うまくいきませんでした。
```
> q update
A new version of q is available: 1.9.1
> q --version
q 1.7.3
```

そのため、一度アンインストールしてから再インストールしました。

# アンインストール
sudo apt-get remove amazon-q

# 最新版をダウンロードして再インストール
wget https://desktop-release.q.us-east-1.amazonaws.com/latest/amazon-q.deb
sudo apt-get install -f
sudo dpkg -i amazon-q.deb

これでバージョン1.9.1にアップデートできました。

Playwright MCPサーバーを設定する

CLI AgentにPlaywright MCPサーバーの設定を追加します。
```
cd ~/.aws/amazonq
vim mcp.json
```

以下の内容を記述します:

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

Playwrightのインストール

対象ディレクトリに移動 (パスは読み替えて下さい)
```
cd /apps/playwrite-test
npm init playwright@latest
```

動作確認

MCPサーバー接続

CLI Agentを起動して、MCPサーバーが認識されるか確認します。

root@[pc-name]:/apps/playwrite-test# q chat
To learn more about MCP safety, see https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-mcp-security.html
✓ playwright loaded in 2.11 s
✓ 1 of 1 mcp servers initialized
　(以下省略)

利用可能ツール

チャット内で /tools コマンドを実行して、MCPサーバーが提供しているツールを確認します。

> /tools

Tool                                               Permission
- playwright___browser_handle_dialog               * not trusted
- playwright___browser_console_messages            * not trusted
- playwright___browser_generate_playwright_test    * not trusted
　(以下省略)

テスト実行

テストに見立ててまずは自然言語で、Wikipediaからある人物の情報を取得してみます。
これは後述のシーケンス図の①～⑥に当たりますが、MCPサーバー経由でテストを実行したことになります。
結果はOKでした。

シーケンス図⑥で作成したPlaywrightのテストスクリプトを直接実行したら、何回かエラーになり、CLI Agentに直してもらって最終的に下記の通り正常終了しました。

root@[pc-name]:/apps/playwrite-test# npx playwright test tests/wikipedia-horikawa-test.spec.js

Running 1 test using 1 worker
[chromium] › tests/wikipedia-horikawa-test.spec.js:4:1 › 堀川安市の情報検索テスト
テスト結果:
- 堀川安市の名前が付けられたコウモリ: ホリカワコウモリを確認しました
- キタクビワコウモリ（別名ヒメホリカワコウモリ）の情報を確認しました
- 堀川安市が在住していた海外の国: 台湾の情報を確認しました
- 台湾での在住期間（1917年から1947年までの約30年間）を確認しました
  1 passed (12.9s)

To open last HTML report run:

npx playwright show-report

このテストスクリプトは、理論上はシーケンス図の②で実行したものと同じはずなので、1回で成功すると思ったのですが。
CLI Agent曰く、環境の違いが原因との事ですが、後日調べてみたいと思います。

シーケンス図

処理の流れを整理します。
ポイントは(*a)で、これを成果物としてgit管理していくイメージ。
本当はgistを埋め込みたかったのですが、うまくいかなかったので画像にしました。

おまけ

IDE版の追い上げ

IDE版にも最近Agent機能が追加されたそうです。(Amazon Q Developer IDE でエージェントコーディングエクスペリエンスがリリースされました)
ただ下記の制限があるため、個人的には、まだしばらくCLI Agentがメインになるかな。
- MCP未対応
- コンテキストファイルの読み込みが1階層まで

PlaywrightとSelenium WebDriver

Playwrightを調べるうちに、今まで何度か利用したことがあるSelenium WebDriverと機能的にかぶっている事に気付きました。
Claudeによると「Playwrightの方が最新技術を活用できる」とのこと。また、どちらもMCPサーバーを提供してますが、GitHubリポジトリのスター数を比較すると、2025年5月4日時点で:

Playwright: 9.4k

Selenium WebDriver: 121

と、Playwrightのほうが大幅に多く、コミュニティのサポートが手厚いことが伺えます。