Ai Driven Test Automation With Playwright Cursor MCP Server

🚀 Playwright テストフレームワークプロジェクト

このプロジェクトは、Playwright を使用して Zeigo ウェブダッシュボードの UI および API のエンドツーエンド（E2E）テストを行います。

✨ 主な機能

Playwright は、現代のウェブアプリケーションに対して信頼性の高いエンドツーエンドテスト機能を提供します。その特徴は以下の通りです。

• 複数のブラウザでのテストをサポート
• クロスプラットフォームでのテストをサポート
• 複数の言語（TypeScript、JavaScript、Python、.NET、Java）をサポート
• モバイルウェブページのテストをサポート
• 並列テストの実行
• 組み込みのデバッグツール

📚 ドキュメント

• Playwright 公式ドキュメント
• テストの実行ガイド

🔧 プロジェクト構造

• .vscode/：ワークスペース固有の設定。
• ui-tests/specs/：UI テストの仕様ファイル。
• api-tests/specs/：API テストの仕様ファイル。
• pages/：ページオブジェクトモデル（POM）ファイル。
• utils/：ユーティリティ関数やヘルパー。
• .env：環境変数ファイル。
• .gitignore：バージョン管理から除外するファイル。

📦 インストール

前提条件

1. Node.js：Node.js v20 以上をインストール
2. 環境設定：.env ファイルを作成し、以下の設定を含めます。

# ベース URL
API_BASE_URL=https://your-api-url
UI_BASE_URL=https://your-ui-url

インストール手順

1. Playwright と依存関係をインストールします。

npm install
npx playwright install
npm install dotenv

2. VS Code Playwright 拡張機能をインストールします。

code --install-extension ms-playwright.playwright

🚀 クイックスタート

1. テストを実行します。

テスト実行オプション

• UI テスト：npm run test:ui で UI テストを実行します。
• API テスト：npm run test:api で API テストを実行します。
• デバッグ：Playwright のデバッグツールを使用してデバッグします。

💻 使用例

基本的な使用法

Playwright の高度な機能を使用する方法を紹介します。

カスタムアサーションの作成

// custom-assertions.ts
export async function customAssertion(page: Page, expectedText: string) {
  await page.waitForSelector('text=Hello World');
}

データ駆動テストの使用

import { defineScenario } from 'playwright-cucumber';

defineScenario('データ駆動テスト', ({ Given, When, Then }) => {
  Given('ユーザーが {string} と {string} を入力する', async function (username, password) {
    // テスト手順
  });
});

テストの並列実行

npm run test --parallel=4

高度な使用法

Playwright のデバッグコマンド

playwright codegen https://example.com

実行中の Playwright サービスを停止する

pkill -f "node playwright"

Playwright で API リクエストをインターセプトする

page.setRequestInterception(true);
page.on('request', request => {
  if (request.url().includes('api')) {
    request.respond({
      status: 200,
      body: JSON.stringify({ message: 'テストレスポンス' })
    });
  }
});

Playwright のネットワーク記録機能

playwright dev --trace-dir traces

2つの MCP サーバーの使用方法

1. 2つのターミナルウィンドウを開きます。
2. 最初のターミナルで、Context7 MCP サーバーを起動します。

npx -y @upstash/context7-mcp@latest

3. 2番目のターミナルで、Playwright MCP サーバーを起動します。

npx playwright-mcp

⚠️ 重要提示

同じターミナルで2つの MCP サーバーを同時に実行することはできません。各サーバーはターミナルの入出力を占有するためです。異なるターミナルでそれぞれのサーバーを実行することができます。