# バッチ設計書 13-test:e2e

## 概要

本ドキュメントは、Decap CMSプロジェクトにおけるE2E（End-to-End）テスト実行バッチ `test:e2e` の設計仕様を定義する。本バッチはデモサイトをビルドし、ローカルHTTPサーバーを起動した上でCypress E2Eテストを実行する。

### 本バッチの処理概要

本バッチは、Decap CMSのE2Eテストをローカル環境で実行するためのスクリプトである。まずデモサイトをビルドし（build:demo）、次にHTTPサーバーでデモサイトを配信しながらCypressブラウザテストを実行する。start-server-and-testパッケージにより、サーバー起動完了を待ってからテストを開始する仕組みになっている。

**業務上の目的・背景**：ユニットテストでは検証できないブラウザ上での統合的な動作（UI操作、バックエンド連携、画面遷移など）を検証するために使用する。CMSのエディタ操作、コンテンツ管理、各種バックエンド（GitHub/GitLab/Bitbucket/Test Backend）との連携をブラウザレベルで自動検証し、リグレッションを防止する。

**バッチの実行タイミング**：開発者による手動実行（随時）。`npm run test:all` の一部としても実行される。CI環境では No.14 test:e2e:ci が使用される。

**主要な処理内容**：
1. `npm run build:demo` - 全パッケージをビルドし、decap-cmsのdistをdev-test/dist/にコピー
2. `npm run test:e2e:run` - HTTPサーバー（http-server）をポート8080で起動し、サーバー準備完了後にCypressテストを実行
   - `test:e2e:serve` - http-server -c-1 dev-test でデモサイトを配信
   - `test:e2e:exec` - cypress run --browser chrome --headless でE2Eテスト実行

**前後の処理との関連**：No.9 build:demo によるデモサイトビルドが前提処理として含まれる。`npm run test:all` ではNo.11 test の後に本バッチが実行される。CI環境向けにはNo.14 test:e2e:ci が同等の機能を並列実行対応で提供する。Cypressプラグイン（cypress/plugins/）が各バックエンドのモック設定を提供する。

**影響範囲**：dev-test/dist/ ディレクトリにビルド成果物が出力される。テスト自体はモックサーバーを使用するため外部サービスへの影響はない。ローカルのポート8080を使用する。

## バッチ種別

テスト実行（E2Eテスト - ブラウザ統合テスト）

## 実行スケジュール

| 項目 | 内容 |
|-----|------|
| 実行頻度 | 随時 |
| 実行時刻 | 任意 |
| 実行曜日 | なし |
| 実行日 | なし |
| トリガー | 手動（開発者によるローカル実行） |

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| Node.js | Node.js 22.x または 24.x がインストールされていること |
| 依存パッケージ | `npm ci` または `npm install` で依存関係がインストール済みであること |
| Cypress | Cypressバイナリがインストール済みであること |
| Chrome | Google Chromeブラウザがインストールされていること |
| ポート8080 | ポート8080が未使用であること |

### 実行可否判定

ポート8080が使用中の場合、HTTPサーバーの起動に失敗しテストは実行されない。Cypressバイナリが未インストールの場合もエラーとなる。

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| なし | - | - | - | 本バッチは入力パラメータを取らない |

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| packages/*/src/** | ソースコード | ビルド対象の全パッケージソースコード |
| cypress/e2e/*spec*.js | テストコード | CypressE2Eテストスペックファイル |
| cypress.config.ts | 設定ファイル | Cypress設定（baseUrl, retries, specPatternなど） |
| cypress/plugins/** | プラグイン | バックエンド別のCypressプラグイン設定 |
| dev-test/ | HTML/設定 | デモサイトのテンプレート |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| dev-test/dist/ | JavaScript/CSS | ビルド済みデモサイト成果物 |
| 標準出力 | テキスト | ビルドログ、テスト結果 |
| cypress/screenshots/ | PNG | テスト失敗時のスクリーンショット |
| プロセス終了コード | 数値 | 0: 成功、1以上: 失敗 |

### 出力ファイル仕様

| 項目 | 内容 |
|-----|------|
| ファイル名 | テスト失敗時のスクリーンショット（Cypress自動生成） |
| 出力先 | cypress/screenshots/ |
| 文字コード | N/A（画像ファイル） |
| 区切り文字 | N/A |

## 処理フロー

### 処理シーケンス

```
1. build:demo実行
   ├─ build:esm - 全パッケージのESMビルド実行
   ├─ build - 全パッケージのUMDビルド実行
   └─ ncp - packages/decap-cms/dist を dev-test/dist/ にコピー
2. test:e2e:run実行（start-server-and-test）
   ├─ test:e2e:serve - http-server -c-1 dev-test をポート8080で起動
   ├─ ポート8080の準備完了を待機
   └─ test:e2e:exec - cypress run --browser chrome --headless を実行
3. テスト完了後、HTTPサーバーを自動停止
```

### フローチャート

```mermaid
flowchart TD
    A[バッチ開始: npm run test:e2e] --> B[build:demo実行]
    B --> B1[build:esm - ESMビルド]
    B1 --> B2[build - UMDビルド]
    B2 --> B3[ncp - dist をdev-test/dist/にコピー]
    B3 --> C{ビルド成功?}
    C -->|失敗| Z[エラー終了]
    C -->|成功| D[http-server起動 - ポート8080]
    D --> E{ポート8080 Ready?}
    E -->|タイムアウト| Z
    E -->|Ready| F[cypress run --browser chrome --headless]
    F --> G{全テスト成功?}
    G -->|失敗| H[スクリーンショット保存]
    H --> Z
    G -->|成功| I[HTTPサーバー停止]
    I --> J[バッチ正常終了]
```

## データベース操作仕様

### 操作別データベース影響一覧

本バッチはデータベースへのアクセスを行わない。E2Eテストではモックサーバー（mockserver-node）を使用してバックエンドAPIをシミュレートする。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| 1 | ビルドエラー | パッケージのビルド失敗 | ビルドエラーを修正後に再実行 |
| 1 | サーバー起動失敗 | ポート8080が使用中 | 使用中のプロセスを停止後に再実行 |
| 1 | テスト失敗 | Cypressテストケースの失敗 | スクリーンショットを確認し修正後に再実行 |
| 1 | Cypress未インストール | Cypressバイナリが未インストール | npx cypress install を実行 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | runMode: 4回、openMode: 0回（cypress.config.ts設定） |
| リトライ間隔 | 即時 |
| リトライ対象エラー | テストケースの失敗（Cypressビルトインリトライ） |

### 障害時対応

テスト失敗時はcypress/screenshots/ に保存されるスクリーンショットで失敗箇所を確認する。ビルド失敗時はビルドエラーメッセージに従いソースコードを修正する。サーバー起動失敗時はポート8080を使用しているプロセスを確認・停止する。

## トランザクション仕様

| 項目 | 内容 |
|-----|------|
| トランザクション範囲 | なし |
| コミットタイミング | なし |
| ロールバック条件 | なし |

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | cypress/e2e/ 配下の全specファイル |
| 目標処理時間 | ビルド含め10〜30分程度（プロジェクト規模とテスト数に依存） |
| メモリ使用量上限 | Node.jsデフォルトヒープサイズ + Chromeブラウザのメモリ使用 |

## 排他制御

ポート8080を排他的に使用するため、同時に複数のE2Eテストを実行することはできない。

## ログ出力

| ログ種別 | 出力タイミング | 出力内容 |
|---------|--------------|---------|
| 開始ログ | バッチ開始時 | ビルド開始メッセージ |
| 進捗ログ | ビルド中 | 各パッケージのビルド進捗 |
| 進捗ログ | テスト中 | 各specファイルのテスト実行状況 |
| 終了ログ | テスト終了時 | テスト結果サマリー（成功数・失敗数） |
| エラーログ | エラー発生時 | テスト失敗の詳細、スクリーンショットパス |

## 監視・アラート

| 監視項目 | 閾値 | アラート先 |
|---------|-----|----------|
| 処理時間 | なし（ローカル実行のため） | なし |
| エラー件数 | なし（ローカル実行のため） | なし |

## 備考

- 本バッチは `npm run test:e2e` コマンドで実行される
- Cypressのリトライ設定: runMode 4回、openMode 0回（cypress.config.ts）
- Cypressのvideo録画は無効（video: false）
- baseURLは http://localhost:8080
- specPatternは `cypress/e2e/*spec*.js`
- 開発中のインタラクティブテストには `npm run test:e2e:dev`（Cypress open）を使用可能
- HTTPサーバーはキャッシュ無効（-c-1）で起動される
