create-e2e-tests

E2E テストの作成

実行フェーズでの Cypress 実装です。計画フェーズについては、e2e-test-generator を参照してください。

テストハーネスの確認

{harness}/rules/e2e-tests-rules.mdc がある場合は読み込みます。ディレクトリ構成とブートストラップの概要については、references/e2e-architecture.md を参照してください。

フェーズ 0 — Cypress ルートの特定またはブートストラップ

スペックやコマンドのコードを作成する前に、Cypress プロジェクトを特定するか、作成してください。

0.1 — 既存の E2E プロジェクトを検出する（ブラウンフィールド）

次の順序で {product_root} を検索します。

1. tests-e2e/cypress.config.ts
2. testes-cypress/cypress.config.ts（旧名称）
3. frontend/cypress.config.ts（旧名称、同居型）

cypress.config.ts を含むディレクトリを {e2e_root} として記録します。特記がない限り、以下のすべてのパスは {e2e_root} を基準とします。

0.2 — 何も見つからない場合にブートストラップする（グリーンフィールド）

0.1 で該当するものが見つからない場合は、独立した Node プロジェクトとして {product_root}/tests-e2e/ を作成します。

ルール	詳細
場所	{product_root}/tests-e2e/ のみ
package.json	ここに配置 — frontend/package.json に Cypress を追加しないでください
ツリー	references/e2e-architecture.md に従います（設定ファイル + 空の device/ フォルダー + サポートのインポート）
cypress.config.ts	CYPRESS_BASE_URL から baseUrl を設定し、specPattern は cypress/e2e/**/*.cy.ts
スクリプト	tests-e2e/package.json に cypress:open、cypress:run

その後、{e2e_root} = {product_root}/tests-e2e/ と設定します。

グリーンフィールドで禁止されること： frontend/cypress/ 配下へのスキャフォールディング、フロントエンドのロックファイルへの依存関係のコピー、アプリのパッケージに Cypress がすでにインストールされていると想定すること。

0.3 — ブートストラップ後のドキュメント更新

{product_root}/docs/context/stack-confirmed.md または architecture-rules.md がある場合は、E2E の行を追加または更新し、場所を tests-e2e/、実行コマンドを cd tests-e2e && npm run cypress:run（またはプロジェクトの Docker 相当コマンド）とします。

{e2e_root} が確定し、cypress.config.ts を読み取れる状態になるまで、フェーズ 1 に進まないでください。

フェーズ 1 — 調査（機能コードの作成前）

1. テスト対象のアプリ — ルート、フォーム、API の使用状況、既存の data-testid（Cypress のコードは書き込まず、frontend/ を読み取ります）
2. 既存のコマンド — {e2e_root}/cypress/support/commands/ 配下のすべてを読み取ります。重複して作成しないでください。
3. 設定 — {e2e_root}/cypress.config.ts の baseUrl、環境変数（CYPRESS_BASE_URL、CYPRESS_API_URL）

フェーズ 2 — まずコマンドのアーキテクチャを整える

{e2e_root}/cypress/support/commands/
  shared/[feature].commands.ts   # business actions — all devices
  pages/[feature].commands.ts    # page structure
  device/mobile|tablet|desktop.commands.ts

動作	場所
すべてのデバイスで共通	shared/
特定のデバイス専用	device/
ページの DOM 構造	pages/

新しいコマンドファイルを {e2e_root}/cypress/support/e2e.ts に登録します。

スペック：describe／it、cy.visit()、コマンド、アサーションを使用します — スペック内に DOM ロジックを記述しないでください。

フェーズ 3 — スペックの配置

{e2e_root}/cypress/e2e/device/
  desktop/[feature]/[feature]-successful-flows.cy.ts
  tablet/...
  mobile/...

beforeEach 内のビューポート：

• デスクトップ：1280×720
• タブレット：768×1024
• モバイル：375×812

禁止事項：device/ プレフィックスを付けずに、スペックを cypress/e2e/ 直下に配置すること。

フェーズ 4 — 実装

• フロントエンドのタスク契約にある data-testid を使用し、独自に作成しないでください
• 固定値の cy.wait(N) は使用しないでください — インターセプトまたはアサーションのタイムアウトを使用します
• RBAC：メニューを非表示にし、直接 URL へのアクセスを拒否します
• 認証：UI からログインするか、サポートセッションを使用します。テナント対応のフィクスチャを使用します

フェーズ 5 — 実行と報告

{e2e_root} から npm run cypress:run を実行します（または、製品についてドキュメントに記載された Docker 相当のコマンドを使用します）。必要に応じて、失敗の調査に code-investigator を使用してください。

参照資料

ファイル	用途
references/e2e-architecture.md	ルート構成、ブートストラップ用ツリー、ルール
e2e-test-generator	タスク契約の参照元

関連スキル

• e2e-test-generator — testid 契約を含む計画タスク
• code-investigator — 失敗した E2E のデバッグ
• gitlab-ci-generator — CI の cd tests-e2e と変更パス