mcpField
E
e2e-tester

e2e-tester

github.com/redpanda-dataテスト・品質4.3k48 回インストール今日更新
リポジトリ

e2e-tester について

e2e-tester は、Playwright と Testcontainers で Redpanda Console のエンドツーエンドテストを書くためのスキルです。Docker コンテナ上の複数ステップのブラウザ操作を対象に、セレクター、後処理、失敗分析の手順を扱います。

主な機能

  1. 01Playwright によるブラウザ操作テスト
  2. 02Testcontainers によるアプリ構成管理
  3. 03アクセシブルなセレクターの指針
  4. 04テストデータとコンテナの後処理
  5. 05OSS と Enterprise のテストコマンド

活用シーン

  1. 01複数ステップのユーザーフローのテスト
  2. 02複数ページのブラウザ操作の自動化
  3. 03エンドツーエンドテストの失敗調査
  4. 04OSS または Enterprise のテスト実行

MCP 対応

テスト失敗の分析には、Task ツール経由で MCP Playwright エージェントを使うよう推奨しています。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/redpanda-data/console --skill e2e-tester

インストール後、Claude Code で/e2e-testerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
container-setup.md
failure-analysis.md
test-patterns.md

詳細

Playwright と Testcontainers を使った E2E テスト

testcontainers を介して Docker コンテナ上で稼働する Redpanda Console のフルスタック環境を対象に、Playwright でエンドツーエンドテストを作成します。

このスキルを使用する場面

  • 2 ステップ以上のユーザージャーニー（ログイン → 操作 → 検証）のテスト
  • 複数ページにまたがるワークフロー
  • Playwright によるブラウザーの自動化

対象外： コンポーネントの単体テスト → testing を使用してください

重要なルール

必ず行うこと：

  • E2E テストの実行前に bun run build を実行します（フロントエンドのアセットが必要です）
  • コンテナの管理には testcontainers API を使用します（テスト内で手動の docker コマンドを実行しないでください）
  • page.getByRole() と page.getByLabel() のセレクターを使用します（CSS セレクターは避けてください）
  • セマンティックセレクターを利用できない場合は、data-testid 属性を追加します
  • Task ツールと MCP Playwright エージェントを使って、失敗の原因を分析します
  • afterEach でクリーンアップ API エンドポイントを呼び出し、テストデータを削除します

絶対に行わないこと：

  • UI コンポーネントのレンダリングをテストする（単体テストまたは統合テストを使用してください）
  • .class-name や #id のような壊れやすい CSS セレクターを使用する
  • .click() で force:true を使用したり、waitForTimeout を使用したりする
  • 待機時間をハードコードする（条件を指定して waitFor を使用してください）
  • テスト失敗後もコンテナを起動したままにする
  • テストのスクリーンショットを git にコミットする

コマンド

bun run build                # Build frontend (REQUIRED first!)
bun run e2e-test             # Run OSS E2E tests
bun run e2e-test-enterprise  # Run Enterprise E2E tests
bun run e2e-test:ui          # Playwright UI mode (debugging)
bun run e2e-test tests/topics/create-topic.spec.ts  # Specific file

テストアーキテクチャ

OSS モード（bun run e2e-test）： Redpanda + Backend + OwlShop コンテナ Enterprise モード（bun run e2e-test-enterprise）： 同じ構成 + RBAC、SSO（console-enterprise リポジトリが必要）

ファイルの場所：tests/<feature>/*.spec.ts

セレクターの優先順位

  1. getByRole() - アクセシビリティに最適
  2. getByLabel() - フォーム入力に使用
  3. getByText() - コンテンツの検証に使用
  4. getByTestId() - セマンティックセレクターが明確でない場合に使用
  5. CSS セレクター - 可能であれば避けてください

Test ID の命名

  • kebab-case：data-testid="feature-action-element"
  • 具体的にする：機能名 + アクション + 要素タイプを含めます
  • 動的にする：data-testid={\item-delete-${id}`}`

参考資料

成果物

作業完了後：

  1. フロントエンドのビルドが成功したことを確認します
  2. すべての E2E テストが成功することを確認します
  3. コンポーネントに追加した新しい test ID を記載します
  4. テストコンテナのクリーンアップについて記載します

コメント

Markdown 対応