# Playwright E2Eテスト (e2e-testing)

> Playwright のE2Eテストパターン集で、Page Object Model、設定、CI/CD連携、成果物管理、不安定なテストへの対処を扱います。

- カテゴリ: [テスト・デバッグ](https://www.myskills.tools/ja/categories/testing-debugging/)
- 提供元: コミュニティ · Affaan Mustafa
- リポジトリ: https://github.com/affaan-m/ECC/tree/main/skills/e2e-testing (commit d29cf65)
- SKILL.md: https://github.com/affaan-m/ECC/blob/main/skills/e2e-testing/SKILL.md
- インストールコマンド: `npx skills add affaan-m/ECC --skill e2e-testing`
- ライセンス: MIT
- 対応ツール: Claude Code, Codex, Cursor, Copilot, OpenCode
- 権限: read-repo ✓, write-files ✓, shell ✓, network ✗
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。

## 基本ルール

固定時間のタイムアウトではなく、自動待機するロケーターや特定のレスポンスなど具体的な条件を待つこと。

## 実行フェーズ

1. **テスト構成を整理** — tests/e2e 以下に機能別にテストを分け、fixturesを用意し、data-testid ロケーターでPage Objectクラスを作ります。
2. **テストを書く** — test.describe と beforeEach でケースをまとめ、Page Object経由でページを操作して結果を検証します。
3. **Playwrightを設定** — playwright.config.ts でCI時のリトライ、レポーター、失敗時のトレース・スクリーンショット・動画、複数ブラウザ、webServerを設定します。
4. **不安定テスト対策** — test.fixme や test.skip で隔離し、--repeat-each で不安定なケースを見つけ、競合・通信・アニメーションのタイミング問題を直します。
5. **成果物とCI** — スクリーンショット・トレース・動画を保存し、GitHub Actionsでテストを実行してレポートをアップロードし、テンプレートで報告書を書きます。

## 権限の説明（SKILL.md より）

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | テストファイル、Page Object、playwright.config.ts、CIワークフローを作成します。 |
| コマンド実行 | テスト時のみ必要 | npx playwright test を --repeat-each や --retries を含めて実行します。 |
| 外部通信 | 不要 | テストの既定の接続先はローカルのbaseURLで、それ以外のネットワーク手順はありません。 |

## SKILL.md のフロントマター（YAML）

```yaml
---
name: e2e-testing
description: Playwright E2E testing patterns, Page Object Model, configuration, CI/CD integration, artifact management, and flaky test strategies. Use when writing Playwright tests, structuring page objects, or fixing flaky E2E runs in CI.
metadata:
  origin: ECC
---
```

ホーム: https://www.myskills.tools/ja/ · URL: https://www.myskills.tools/ja/skills/e2e-testing/