MCP: 自動化Webテストの実装

現代のWeb開発において、自動化テストはアプリケーションの品質を保証し、反復サイクルを加速するための重要なステップとなっています。Playwrightは、クロスブラウザサポート、強力な自動化機能、および様々なAPIにより、エンドツーエンドの自動化Webテストの理想的な選択肢となっています。

このチュートリアルでは、Trae IDEでPlaywright MCP Serverを効率的に統合し、自動化テストソリューションを構築する方法を詳しく説明します。これにより、Webページのインタラクションロジックをより効率的に検証し、手動テストの労力を削減し、全体的な開発生産性を向上させることができます。

デモンストレーション

以下のGIFは、Trae IDEを使用した自動化Webページテストの実践例を示しています：

Webページを開く: この例では、Trae IDEが自動的にhttps://docs.trae.ai/ide/model-context-protocolページを開きます。
Webページを開いてページ上のハイパーリンクをクリック: この例では、Trae IDEが自動的にhttps://docs.trae.ai/ide/model-context-protocolページを開き、「MCP's official documentation」というハイパーリンクテキストをクリックします。

システム環境

このチュートリアルで使用するシステム環境は以下の通りです：

Trae IDEバージョン: 1.3.5
macOSバージョン: 14.7
Node.jsバージョン: 20.19.1
npxバージョン: 10.9.2
Pythonバージョン: 3.13.3
uvxバージョン: 0.6.16

手順

以下の手順に従って、MCP server - Playwrightをプロジェクトに統合し、エージェントを作成し、Trae IDEで自動化Webテストを実行します。

ステップ1: Trae IDEのインストール

Trae IDEはAIと深く統合されており、AI Q&A、コード自動補完、およびエージェントによって駆動されるAI支援プログラミング機能を提供します。Trae IDEでプロジェクトを開発する際、AIと柔軟に協力して開発効率を向上させることができます。

Traeの公式ウェブサイトにアクセスしてTrae IDEのインストールパッケージをダウンロードし、コンピューターにインストールしてください。

ステップ2: MCPサーバーのランタイム環境の設定

MCPサーバーが正常に起動できるように、以下の依存関係をインストールする必要があります：

npx: Node.jsに含まれるツール（バージョン18以降が必要）
uvx: Pythonスクリプトを迅速に実行するためのコマンドラインツール

まず、後でコマンドラインを介して依存関係をインストールしやすくするため、Trae IDEでターミナルを開きましょう。手順は以下の通りです：

Trae IDEを起動します。
トップメニューバーで、Terminal > New Terminalをクリックします。
インターフェースの下部にTerminalパネルが表示されます。

uvxのインストール

ターミナルを開いた後、以下の手順でuvxをインストールします：

Pythonの公式ウェブサイトにアクセスし、Python 3.8以降をダウンロードしてインストールします。
インストールが完了したら、ターミナルで以下のコマンドを実行してインストールが成功したかを確認します：
bash
```
python3 --version
```
インストールが成功した場合、ターミナルにインストールされたPythonのバージョン番号が出力されます。
以下のコマンドを実行してuv（uvxを含む）をインストールします：
macOS / Linux用インストールコマンド:
bash
```
curl -LsSf https://astral.sh/uv/install.sh | sh
```
Windows用インストールコマンド (PowerShell):
powershell
```
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
```
source $HOME/.local/bin/envコマンドを実行して、uvxに必要なランタイム環境変数と初期化設定を読み込みます。
以下のコマンドを実行してインストールが成功したかを確認します：
bash
```
uvx --version
```
インストールが成功した場合、ターミナルにインストールされたuvxのバージョン番号が出力されます。

Node.jsのインストール

uvxのインストールが完了したら、以下の手順でNode.jsをインストールします：

Node.jsの公式ウェブサイトにアクセスし、Node.jsバージョン18以降をダウンロードしてインストールします。
インストールが完了したら、ターミナルで以下のコマンドを実行してインストールが成功したかを確認します：
bash
```
node -v
npx -v
```
インストールが成功した場合、ターミナルにインストールされたNode.jsのバージョン番号が出力されます。例：
```
v18.19.0
10.2.0
```
Trae IDEを再起動してNode.jsを有効化します。

ステップ3: Playwrightのインストール

Trae IDEでPlaywrightを使用して自動化Webテストを行うには、まずローカルコンピューターにPlaywrightをインストールする必要があります。手順は以下の通りです：

pip3 install playwrightコマンドを実行してPlaywrightのPythonクライアントライブラリをインストールし、Pythonコードでplaywrightモジュールを使用できるようにします。インストールが開始されると、ターミナルに以下の内容が表示されます：

bash

xxxxxxxxxxx ~ % pip3 install playwright
Collecting playwright
  Obtaining dependency information for playwright from https://files.pythonhosted.org/packages/32/4a/5f2ff6866bdf88e86147930b0be86b227f3691f4eb01daad5198302a8cbe/playwright-1.51.0-py3-none-macosx_11_0_arm64.whl.metadata
  Downloading playwright-1.51.0-py3-none-macosx_11_0_arm64.whl.metadata (3.5 kB)
Collecting pyee<13,>=12 (from playwright)
  Obtaining dependency information for pyee<13,>=12 from https://files.pythonhosted.org/packages/25/68/7e150cba9eeffdeb3c5cecdb6896d70c8edd46ce41c0491e12fb2b2256ff/pyee-12.1.1-py3-none-any.whl.metadata
  Downloading pyee-12.1.1-py3-none-any.whl.metadata (2.9 kB)
  ...

python3 -m playwright installコマンドを実行して、Playwrightに必要なブラウザバイナリをインストールします。

MCP: 自動化Webテストの実装 ​

デモンストレーション ​

システム環境 ​

手順 ​

ステップ1: Trae IDEのインストール ​

ステップ2: MCPサーバーのランタイム環境の設定 ​

uvxのインストール ​

Node.jsのインストール ​

ステップ3: Playwrightのインストール ​

関連記事 ​