Playwright Testing Framework

Playwright テストフレームワーク

このプロジェクトには、Playwright を使用したエンドツーエンド（E2E）テスト向けの Zeigo Network Dashboard の UI テストと API テストが含まれています。

使用しているもの

Playwright は、次のような機能により、最新の Web アプリ向けに信頼性の高いエンドツーエンドテストを実現します。

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

ドキュメント

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

構成

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

前提条件

1. Node.js：Node.js v20 以降をインストールします

2. 環境設定：次の設定を含む .env ファイルを作成します。

   # Base URLs
   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
   

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

テスト実行のオプション

VS Code のテストエクスプローラーを使用する

• VS Code を開きます
• アクティビティバーのテストアイコン（フラスコアイコン）をクリックします
• 再生ボタンをクリックして、すべてのテストを実行します
• または、各テストの横にある再生ボタンをクリックして、個別のテストを実行します

コマンドラインを使用する

基本的なテストコマンド

# Run all tests
npx playwright test

# Run tests in headed mode
npx playwright test --headed

# Run tests in specific browser
npx playwright test --project=chromium

# Debug mode
npx playwright test --debug

# Generate tests with Codegen
npx playwright codegen

環境別のテスト実行

Windows PowerShell

# Test environment
$env:CI="true"; $env:target_env="test"; npx playwright test --reporter=list

# PreProd environment
$env:CI="true"; $env:target_env="preprod"; npx playwright test --reporter=list

macOS/Linux

# Test environment
CI=1 target_env="test" npx playwright test --reporter=list

# PreProd environment
CI=1 target_env="preprod" npx playwright test --reporter=list

特定のテストの実行

# Run by test name
npx playwright test -g "name of my test" --project=chromium

# Run specific test file
npx playwright test tests/specific-test.spec.js

# Run tests with specific tag
npx playwright test --grep @tag_name

ブラウザー別のテスト実行

# Chrome
npm run regression:chromium

# Safari
npm run regression:safari

# All browsers in headless mode
npm run regression

# All browsers in headed mode
npm run regression:headed

テストスケジューラー

遅延を挟みながらテストをバッチ実行するには、次のようにします。

.\run_tests_scheduler.bat

テストエクスプローラーの機能

• 🔍 ツリービューでテストを参照
• ▶️ 個別のテストまたはテストファイルを実行／デバッグ
• 🔄 失敗したテストを再実行
• 📊 テスト結果をインラインで表示
• 🎯 テスト定義に移動
• 📋 ステータスまたはタグでテストを絞り込み
• 🎯 ブレークポイントを使用してテストをデバッグ

異なる目的で両方の MCP サーバー（context7 と playwright）を使用できますが、同じターミナルセッションで同時に実行することはできません。使用方法は次のとおりです。

---

各 MCP サーバーの使用方法

1. Context7 MCP サーバー：

   • 目的：最新かつバージョン固有のドキュメントとコード例を提供します。
   • 使用方法：
     • サーバーを起動します。

       npx -y @upstash/context7-mcp@latest
       

     • プロンプトに use context7 を追加して使用すると、正確でコンテキストを踏まえた応答を取得できます。

2. Playwright MCP サーバー：

   • 目的：UI テスト向けに Playwright の機能を拡張します。
   • 使用方法：
     • サーバーを起動します。

       npx playwright-mcp
       

     • 高度なテストシナリオで Playwright を操作するために使用します。

---

同時に実行できますか？

• 同じターミナル：できません。各サーバーがターミナルの入力／出力を制御するため、1 つのターミナルセッションで実行できる MCP サーバーは 1 つだけです。
• 異なるターミナル：できます。別々のターミナルセッションで両方のサーバーを同時に実行できます。

---

両方のサーバーを同時に実行する方法

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

   npx -y @upstash/context7-mcp@latest
   

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

   npx playwright-mcp
   

---

両方を組み合わせて使用する方法

• Context7：

  • ライブラリやツールのドキュメントまたはコード例を取得するために使用します。
  • 例：プロンプトに use context7 を追加すると、正確な応答を取得できます。

• Playwright：

  • 高度な UI テストを実行したり、Playwright の MCP 機能を操作したりするために使用します。
  • 例：MCP サーバーが稼働している間に、Playwright のテストを実行します。