mcpField
P
Playwright Test Framework Example for AI & Playwright MCP Course by jaktestowac.pl

Playwright Test Framework Example for AI & Playwright MCP Course by jaktestowac.pl

ローカル
github.com/jaktestowac開発ツール278 週間前に更新
リポジトリ

Playwright Test Framework Example for AI & Playwright MCP Course by jaktestowac.pl について

UI・APIテストを学び、実践するためのPlaywrightテストフレームワークのサンプルです。AIとPlaywright MCPを扱うコース向けに、フィクスチャやレポート設定も含みます。

主な機能

  1. 01Page Object ModelによるUIテスト
  2. 02エンドツーエンドAPIテスト
  3. 03カスタムPlaywrightフィクスチャ
  4. 04複数形式のレポート設定

活用シーン

  1. 01登録・ログインのテスト練習
  2. 02ゲストとログインユーザーの記事閲覧テスト
  3. 03HTML、JUnit、JSONのレポート設定の参照
#test-automation#test-framework#playwright

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "playwright-test-framework-mcp-example": {
      "command": "npx",
      "args": [
        "-y",
        "playwright"
      ]
    }
  }
}
起動コマンドnpx -y playwright

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmplaywright

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

jaktestowac.pl の AI & Playwright MCP コース向け Playwright テストフレームワークの例

このリポジトリは、コースで AI と Playwright MCP（Model Context Protocol）をテストするために設計された、空の Playwright テストフレームワークを提供します。

（ポーランド語："Playwright z AI – czyli jak usprawnić swoją pracę" - 「AI を使った Playwright ― 作業を改善する方法」）

jaktestowac.pl チームによるものです。

概要

このリポジトリには、次のトピックに関するテストが含まれています。

  • Page Object Model を使った UI テスト： 保守性を高めるため、Playwright と Page Object Model パターンを使用して、ユーザー登録、ログイン、記事の閲覧を行うブラウザーテストを自動化します。

  • API テスト： ヘルスチェック、概要、ユーザーを対象とするエンドツーエンドの API テストで、ユーザー登録、ログイン、記事の閲覧も含まれます。

  • フィクスチャとヘルパー： コードの再利用と明瞭性を高めるための、ページオブジェクト用カスタム Playwright フィクスチャです。

  • テストレポートと設定： 複数のレポーター（HTML、JUnit、JSON）、テストディレクトリ構造、デバイスエミュレーションに対応した Playwright 設定の例です。

テストと対象範囲

このリポジトリには、次のテストファイルとその対象範囲が含まれています。

  • tests/register.spec.ts：一意の認証情報を使用した、ユーザー登録とログインの UI テストです。
  • tests/login.spec.ts：有効な認証情報を使用したログインの UI テストです。
  • tests/articles.spec.ts：ゲストユーザーとして記事を閲覧する UI テストです。
  • tests/logged-articles.spec.ts：ログイン済みユーザーとして記事を閲覧する UI テストです。

これらのテストでは、次の内容を対象としています。

  • ユーザー登録と認証のフロー
  • 記事の閲覧（ゲストとログイン済みユーザーの両方）

私たちについて

私たちは、テストに情熱を注ぐテストアーキテクトおよびシニアリードテック品質エンジニアです。 スキルを向上させ、知識を共有する新しい方法を常に探しています。

Playwright コミュニティに積極的に参加し、プロジェクトに貢献するとともに、知識を共有しています。2021 年以降、さまざまな企業やプロジェクトで Playwright を使用しています。

オープンソースの力と、コミュニティに還元することの大切さを信じています。

**Playwright とコミュニティへの貢献**について、詳しくはこちらをご覧ください。

前提条件

始める前に、次のものがインストールされていることを確認してください。

プロジェクト構成

テストファイルは tests ディレクトリにあります。各テストファイルには、アプリケーションの特定の機能を対象とするテスト一式が含まれています。

playwright.config.ts ファイルの設定には、プロジェクトのすべてのグローバル設定が含まれています。

セットアップ

  1. リポジトリをクローンします。

    git clone https://github.com/jaktestowac/playwright-test-framework-mcp-example.git
cd playwright-test-framework-mcp-example

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

    npm install

  3. 必要に応じて Playwright ブラウザーをインストールします。

    npx playwright install

  4. 必要に応じて VSCode 用の拡張機能をインストールします。

VSCode の「Extensions」タブに移動し、「@recommended」フィルターを使って拡張機能を絞り込みます。

テストの実行

すべてのテストを実行します。

npm run test

特定のテストファイルを実行します。

npx playwright test tests/login.spec.ts

UI モードでテストを実行します。

npx playwright test --ui

テストレポートを生成します。

npx playwright show-report

トラブルシューティング

よくある問題と解決方法：

  1. 初回実行時にテストが失敗する

    • 🦎 GAD アプリケーションが実行中であることを確認します（デフォルトでは http://localhost:3000 で実行されます）。
    • 正しいバージョンの Node.js がインストールされているか確認します。

  2. ブラウザーの起動に失敗する

    npx playwright install

リソース

お問い合わせ

お気軽にお問い合わせください。

テストとテスト自動化を楽しみましょう！🚀

jaktestowac.pl チーム 💚❤️

追伸：最新情報やその他のリソースについては、ウェブサイトとGitHubをフォローしてください。

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。