環境

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

前提

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

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

MCPの概要を理解する

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

MCP Architecture

この中で:

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

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

CLI Chatのアップデート

  • まず、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 ChatにPlaywright MCPサーバーの設定を追加します。

    cd ~/.aws/amazonq
vim mcp.json

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

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

Playwrightのインストール

  • 最後に対象ディレクトリへ移動後、Playwrightをインストールします。 (パスは読み替えて下さい)

    cd /apps/playwright-test
# いくつか質問されますが、僕は全部デフォルトでインストールしました
npm init playwright@latest

動作確認

MCPサーバー接続

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

    root@[pc-name]:/apps/playwright-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からある人物の情報を取得してみます。 test_ready

  • これは後述のシーケンス図内の①～⑥に該当し、MCPサーバー経由でテストを実行したことになります。

  • 結果はOKでした。

    test_result

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

    root@[pc-name]:/apps/playwright-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 Chat曰く、環境の違いが原因との事ですが、後日調べてみたいと思います。

シーケンス図

  • 処理の流れを整理します。
    ポイントは(*a)でこれを成果物としてgit管理していくイメージ。

    q_cli_agent_playwright_mcp_seq_diagram

  • 本当はgistを埋め込みたかったのですが、うまくいかなかったので画像にしました。

おまけ

IDE版の追い上げ

PlaywrightとSelenium WebDriver

  • Playwrightを調べるうちに、今まで何度か利用したことがあるSelenium WebDriverと機能的にかぶっている事に気付きました。

  • Claudeによると「Playwrightの方が最新技術を活用できる」とのこと。 また、どちらもMCPサーバーを提供してますが、GitHubリポジトリのスター数を比較すると、2025年5月4日時点で:

    Playwright: 9.4k

    Selenium WebDriver: 121

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

環境の差異

  • テストスクリプトを他のOSに移動したらテストが通らなくなった場合は、下記をご確認下さい。
    Playwrightに必要なすべてのブラウザ依存パッケージをインストールできます：

    npx playwright install-deps

参考

この記事をツイート