E2Eテスト生成（E2E）

エンドツーエンドテストを生成・保守・実行するためのガイド。

対応言語

このスキルは以下の言語に対応しています。プロジェクトの言語を自動検出し、適切なテストフレームワークとコマンドを使用します。

言語自動検出

プロジェクトの言語は以下のファイルの存在で判別します：

{{language}} 変数が指定された場合は、その言語の設定を優先します。

このスキルの目的

1. テストジャーニーの生成 - ユーザーフローのPlaywrightテストを作成
2. E2Eテストの実行 - 複数ブラウザでテストを実行
3. アーティファクトの取得 - 失敗時のスクリーンショット、動画、トレースを保存
4. 結果のアップロード - HTMLレポートとJUnit XMLを生成
5. 不安定なテストの検出 - 不安定なテストを特定・隔離

使用するタイミング

以下の場合に使用：

• 重要なユーザージャーニーのテスト（ログイン、決済、購入フロー等）
• 複数ステップのフローがエンドツーエンドで動作することの検証
• UIインタラクションとナビゲーションのテスト
• フロントエンドとバックエンドの統合検証
• 本番デプロイ前の品質確認

ワークフロー

ステップ1: ユーザーフローの分析

リクエストを分析し、テストシナリオを特定する。

• ユーザージャーニーの流れ
• テストで検証すべき項目
• 必要なテストケース数

ステップ2: E2Eテストの生成

Page Object Modelパターンを使用してテストコードを生成する。

テストには以下を含める：

• ナビゲーション
• ユーザーアクション
• アサーション（検証）
• スクリーンショット取得

ステップ3: テストの実行

複数ブラウザでテストを実行する。

対象ブラウザ：

• Chromium（デスクトップChrome）
• Firefox（デスクトップ）
• WebKit（デスクトップSafari）
• Mobile Chrome（オプション）

ステップ4: 結果の報告

テスト結果とアーティファクトを報告する。

• 成功/失敗の状態
• 実行時間
• 生成されたアーティファクト
• 推奨事項（必要に応じて）

言語別テストコード例

以下に各言語でのE2Eテスト例を示します。詳細な情報は各言語のリファレンスを参照してください。

TypeScript/JavaScript (Playwright)

typescript
1// tests/e2e/market-search.spec.ts
2import { test, expect } from '@playwright/test'
3import { MarketsPage } from '../pages/MarketsPage'
4
5test.describe('市場検索', () => {
6  test('ユーザーは市場を検索してフィルタリングできる', async ({ page }) => {
7    // 1. ページへ移動
8    const marketsPage = new MarketsPage(page)
9    await marketsPage.goto()
10
11    // 2. 検索を実行
12    await marketsPage.search('election')
13
14    // 3. 結果を検証
15    await expect(marketsPage.marketCards).toHaveCount(5)
16  })
17})

テスト実行:

bash
1npx playwright test
2npx playwright test --headed  # ブラウザ表示
3npx playwright show-report    # レポート表示

Python (Playwright for Python)

python
1# tests/e2e/test_market_search.py
2from playwright.sync_api import Page, expect
3from pages.markets_page import MarketsPage
4
5class TestMarketSearch:
6    def test_user_can_search_and_filter_markets(self, page: Page):
7        # 1. ページへ移動
8        markets_page = MarketsPage(page)
9        markets_page.goto()
10
11        # 2. 検索を実行
12        markets_page.search('election')
13
14        # 3. 結果を検証
15        expect(markets_page.market_cards).to_have_count(5)

テスト実行:

bash
1pytest tests/e2e/
2pytest tests/e2e/ --headed  # ブラウザ表示

C# (Playwright for .NET)

csharp
1// Tests/E2E/MarketSearchTests.cs
2using Microsoft.Playwright;
3using Xunit;
4
5public class MarketSearchTests : PlaywrightTest
6{
7    [Fact]
8    public async Task UserCanSearchAndFilterMarkets()
9    {
10        // 1. ページへ移動
11        var marketsPage = new MarketsPage(Page);
12        await marketsPage.GotoAsync();
13
14        // 2. 検索を実行
15        await marketsPage.SearchAsync("election");
16
17        // 3. 結果を検証
18        await Expect(marketsPage.MarketCards).ToHaveCountAsync(5);
19    }
20}

テスト実行:

bash
1dotnet test
2dotnet test --filter "Category=E2E"

テストコードテンプレート（TypeScript）

typescript
1// tests/e2e/{機能名}/{テスト名}.spec.ts
2import { test, expect } from '@playwright/test'
3import { {ページ名}Page } from '../../pages/{ページ名}Page'
4
5test.describe('{テストスイート名}', () => {
6  test('{テストケース名}', async ({ page }) => {
7    // 1. ページへ移動
8    const targetPage = new {ページ名}Page(page)
9    await targetPage.goto()
10
11    // 2. ページ読み込みを検証
12    await expect(page).toHaveTitle(/{期待するタイトル}/)
13    await expect(page.locator('h1')).toContainText('{期待するテキスト}')
14
15    // 3. ユーザーアクションを実行
16    await targetPage.{アクションメソッド}('{入力値}')
17
18    // 4. APIレスポンスを待機
19    await page.waitForResponse(resp =>
20      resp.url().includes('{APIエンドポイント}') && resp.status() === 200
21    )
22
23    // 5. 結果を検証
24    await expect(page.locator('{セレクタ}')).toBeVisible()
25
26    // 6. スクリーンショットを取得
27    await page.screenshot({ path: 'artifacts/{スクリーンショット名}.png' })
28  })
29})

Page Objectテンプレート

typescript
1// tests/pages/{ページ名}Page.ts
2import { Page, Locator } from '@playwright/test'
3
4export class {ページ名}Page {
5  readonly page: Page
6  readonly {要素名}: Locator
7
8  constructor(page: Page) {
9    this.page = page
10    this.{要素名} = page.locator('[data-testid="{テストID}"]')
11  }
12
13  async goto() {
14    await this.page.goto('{URL}')
15  }
16
17  async {アクションメソッド}(input: string) {
18    await this.{要素名}.fill(input)
19    await this.{要素名}.press('Enter')
20  }
21}

テストアーティファクト

テスト実行時に以下のアーティファクトを取得：

全テストで取得：

• HTMLレポート（タイムラインと結果）
• JUnit XML（CI統合用）

失敗時のみ取得：

• 失敗状態のスクリーンショット
• テストの動画記録
• デバッグ用トレースファイル（ステップバイステップ再生）
• ネットワークログ
• コンソールログ

クイックコマンド

TypeScript/JavaScript (Playwright)

bash
1# 全E2Eテストを実行
2npx playwright test
3
4# 特定のテストファイルを実行
5npx playwright test tests/e2e/market-search.spec.ts
6
7# ヘッドモードで実行（ブラウザを表示）
8npx playwright test --headed
9
10# デバッグモードで実行
11npx playwright test --debug
12
13# テストコードを生成
14npx playwright codegen http://localhost:3000
15
16# レポートを表示
17npx playwright show-report
18
19# トレースファイルを表示
20npx playwright show-trace artifacts/trace.zip

Python (Playwright for Python)

bash
1# 全E2Eテストを実行
2pytest tests/e2e/
3
4# ヘッドモードで実行
5pytest tests/e2e/ --headed
6
7# 特定のブラウザで実行
8pytest tests/e2e/ --browser chromium
9
10# トレース記録
11pytest tests/e2e/ --tracing on

C# (Playwright for .NET)

bash
1# 全E2Eテストを実行
2dotnet test --filter "Category=E2E"
3
4# 詳細出力
5dotnet test -v detailed
6
7# Playwrightブラウザインストール
8pwsh bin/Debug/net8.0/playwright.ps1 install

不安定なテストの検出

テストが断続的に失敗する場合：

1. 原因の特定

   • タイムアウト問題
   • レース条件
   • アニメーションによる要素の非表示

2. 推奨される修正

   • 明示的な待機を追加: await page.waitForSelector('{セレクタ}')
   • タイムアウトを増加: { timeout: 10000 }
   • コンポーネント内のレース条件を確認
   • アニメーションによる要素非表示を検証

3. 隔離の推奨

   • 修正まで test.fixme() でマーク

ベストプラクティス

推奨事項：

• Page Object Modelを使用して保守性を向上
• セレクタには data-testid 属性を使用
• 任意の待ち時間ではなくAPIレスポンスを待機
• 重要なユーザージャーニーをエンドツーエンドでテスト
• mainへのマージ前にテストを実行
• 失敗時はアーティファクトを確認

避けるべきこと：

• 脆いセレクタの使用（CSSクラスは変更される可能性がある）
• 実装の詳細をテスト
• 本番環境でテストを実行
• 不安定なテストを無視
• 失敗時のアーティファクト確認をスキップ
• 全てのエッジケースをE2Eでテスト（ユニットテストを使用）

CI/CD統合

yaml
1# .github/workflows/e2e.yml
2- name: Install Playwright
3  run: npx playwright install --with-deps
4
5- name: Run E2E tests
6  run: npx playwright test
7
8- name: Upload artifacts
9  if: always()
10  uses: actions/upload-artifact@v3
11  with:
12    name: playwright-report
13    path: playwright-report/

重要な注意事項

本番環境での注意点：

• 金銭が関わるE2Eテストはテストネット/ステージング環境のみで実行
• 本番環境で決済・取引テストを実行しない
• 金融関連テストには test.skip(process.env.NODE_ENV === 'production') を設定
• テスト用のウォレット/アカウントのみを使用

他のスキルとの連携

• plan: テストすべき重要なジャーニーを特定
• tdd: ユニットテスト用（より高速で詳細）
• e2e: 統合テストとユーザージャーニーテスト用
• code-review: テスト品質の検証