E2E 测试运行器¶

# agent-browserをグローバルにインストール
npm install -g agent-browser

# Chromiumをインストール（必須）
agent-browser install

# ページを開き、インタラクティブ要素を含むスナップショットを取得
agent-browser open https://example.com
agent-browser snapshot -i  # [ref=e1]のような参照を持つ要素を返す

# スナップショットからの要素参照を使用してインタラクト
agent-browser click @e1                      # 参照で要素をクリック
agent-browser fill @e2 "user@example.com"   # 参照で入力を埋める
agent-browser fill @e3 "password123"        # パスワードフィールドを埋める
agent-browser click @e4                      # 送信ボタンをクリック

# 条件を待つ
agent-browser wait visible @e5               # 要素を待つ
agent-browser wait navigation                # ページロードを待つ

# スクリーンショットを撮る
agent-browser screenshot after-login.png

# テキストコンテンツを取得
agent-browser get text @e1

import { execSync } from 'child_process'

// agent-browserコマンドを実行
const snapshot = execSync('agent-browser snapshot -i --json').toString()
const elements = JSON.parse(snapshot)

// 要素参照を見つけてインタラクト
execSync('agent-browser click @e1')
execSync('agent-browser fill @e2 "test@example.com"')

import { BrowserManager } from 'agent-browser'

const browser = new BrowserManager()
await browser.launch({ headless: true })
await browser.navigate('https://example.com')

// 低レベルイベント注入
await browser.injectMouseEvent({ type: 'mousePressed', x: 100, y: 200, button: 'left' })
await browser.injectKeyboardEvent({ type: 'keyDown', key: 'Enter', code: 'Enter' })

// AIビジョンのためのスクリーンキャスト
await browser.startScreencast()  // ビューポートフレームをストリーム

# すべてのE2Eテストを実行
npx playwright test

# 特定のテストファイルを実行
npx playwright test tests/markets.spec.ts

# ヘッドモードで実行（ブラウザを表示）
npx playwright test --headed

# インスペクタでテストをデバッグ
npx playwright test --debug

# アクションからテストコードを生成
npx playwright codegen http://localhost:3000

# トレース付きでテストを実行
npx playwright test --trace on

# HTMLレポートを表示
npx playwright show-report

# スナップショットを更新
npx playwright test --update-snapshots

# 特定のブラウザでテストを実行
npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

a) 重要なユーザージャーニーを特定
   - 認証フロー（ログイン、ログアウト、登録）
   - コア機能（マーケット作成、取引、検索）
   - 支払いフロー（入金、出金）
   - データ整合性（CRUD操作）

b) テストシナリオを定義
   - ハッピーパス（すべてが機能）
   - エッジケース（空の状態、制限）
   - エラーケース（ネットワーク障害、検証）

c) リスク別に優先順位付け
   - 高: 金融取引、認証
   - 中: 検索、フィルタリング、ナビゲーション
   - 低: UIの洗練、アニメーション、スタイリング

各ユーザージャーニーに対して:

1. Playwrightでテストを作成
   - ページオブジェクトモデル（POM）パターンを使用
   - 意味のあるテスト説明を追加
   - 主要なステップでアサーションを含める
   - 重要なポイントでスクリーンショットを追加

2. テストを弾力的にする
   - 適切なロケーターを使用（data-testidを優先）
   - 動的コンテンツの待機を追加
   - 競合状態を処理
   - リトライロジックを実装

3. アーティファクトキャプチャを追加
   - 失敗時のスクリーンショット
   - ビデオ録画
   - デバッグのためのトレース
   - 必要に応じてネットワークログ

a) ローカルでテストを実行
   - すべてのテストが合格することを確認
   - 不安定さをチェック（3〜5回実行）
   - 生成されたアーティファクトを確認

b) 不安定なテストを隔離
   - 不安定なテストを@flakyとしてマーク
   - 修正のための課題を作成
   - 一時的にCIから削除

c) CI/CDで実行
   - プルリクエストで実行
   - アーティファクトをCIにアップロード
   - PRコメントで結果を報告

tests/
├── e2e/                       # エンドツーエンドユーザージャーニー
│   ├── auth/                  # 認証フロー
│   │   ├── login.spec.ts
│   │   ├── logout.spec.ts
│   │   └── register.spec.ts
│   ├── markets/               # マーケット機能
│   │   ├── browse.spec.ts
│   │   ├── search.spec.ts
│   │   ├── create.spec.ts
│   │   └── trade.spec.ts
│   ├── wallet/                # ウォレット操作
│   │   ├── connect.spec.ts
│   │   └── transactions.spec.ts
│   └── api/                   # APIエンドポイントテスト
│       ├── markets-api.spec.ts
│       └── search-api.spec.ts
├── fixtures/                  # テストデータとヘルパー
│   ├── auth.ts                # 認証フィクスチャ
│   ├── markets.ts             # マーケットテストデータ
│   └── wallets.ts             # ウォレットフィクスチャ
└── playwright.config.ts       # Playwright設定

// pages/MarketsPage.ts
import { Page, Locator } from '@playwright/test'

export class MarketsPage {
  readonly page: Page
  readonly searchInput: Locator
  readonly marketCards: Locator
  readonly createMarketButton: Locator
  readonly filterDropdown: Locator

  constructor(page: Page) {
    this.page = page
    this.searchInput = page.locator('[data-testid="search-input"]')
    this.marketCards = page.locator('[data-testid="market-card"]')
    this.createMarketButton = page.locator('[data-testid="create-market-btn"]')
    this.filterDropdown = page.locator('[data-testid="filter-dropdown"]')
  }

  async goto() {
    await this.page.goto('/markets')
    await this.page.waitForLoadState('networkidle')
  }

  async searchMarkets(query: string) {
    await this.searchInput.fill(query)
    await this.page.waitForResponse(resp => resp.url().includes('/api/markets/search'))
    await this.page.waitForLoadState('networkidle')
  }

  async getMarketCount() {
    return await this.marketCards.count()
  }

  async clickMarket(index: number) {
    await this.marketCards.nth(index).click()
  }

  async filterByStatus(status: string) {
    await this.filterDropdown.selectOption(status)
    await this.page.waitForLoadState('networkidle')
  }
}

// tests/e2e/markets/search.spec.ts
import { test, expect } from '@playwright/test'
import { MarketsPage } from '../../pages/MarketsPage'

test.describe('Market Search', () => {
  let marketsPage: MarketsPage

  test.beforeEach(async ({ page }) => {
    marketsPage = new MarketsPage(page)
    await marketsPage.goto()
  })

  test('should search markets by keyword', async ({ page }) => {
    // 準備
    await expect(page).toHaveTitle(/Markets/)

    // 実行
    await marketsPage.searchMarkets('trump')

    // 検証
    const marketCount = await marketsPage.getMarketCount()
    expect(marketCount).toBeGreaterThan(0)

    // 最初の結果に検索語が含まれていることを確認
    const firstMarket = marketsPage.marketCards.first()
    await expect(firstMarket).toContainText(/trump/i)

    // 検証のためのスクリーンショットを撮る
    await page.screenshot({ path: 'artifacts/search-results.png' })
  })

  test('should handle no results gracefully', async ({ page }) => {
    // 実行
    await marketsPage.searchMarkets('xyznonexistentmarket123')

    // 検証
    await expect(page.locator('[data-testid="no-results"]')).toBeVisible()
    const marketCount = await marketsPage.getMarketCount()
    expect(marketCount).toBe(0)
  })

  test('should clear search results', async ({ page }) => {
    // 準備 - 最初に検索を実行
    await marketsPage.searchMarkets('trump')
    await expect(marketsPage.marketCards.first()).toBeVisible()

    // 実行 - 検索をクリア
    await marketsPage.searchInput.clear()
    await page.waitForLoadState('networkidle')

    // 検証 - すべてのマーケットが再び表示される
    const marketCount = await marketsPage.getMarketCount()
    expect(marketCount).toBeGreaterThan(10) // すべてのマーケットを表示するべき
  })
})

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [
    ['html', { outputFolder: 'playwright-report' }],
    ['junit', { outputFile: 'playwright-results.xml' }],
    ['json', { outputFile: 'playwright-results.json' }]
  ],
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    actionTimeout: 10000,
    navigationTimeout: 30000,
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'mobile-chrome',
      use: { ...devices['Pixel 5'] },
    },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
    timeout: 120000,
  },
})

# テストを複数回実行して安定性をチェック
npx playwright test tests/markets/search.spec.ts --repeat-each=10

# リトライ付きで特定のテストを実行
npx playwright test tests/markets/search.spec.ts --retries=3

// 隔離のために不安定なテストをマーク
test('flaky: market search with complex query', async ({ page }) => {
  test.fixme(true, 'Test is flaky - Issue #123')

  // テストコードはここに...
})

// または条件付きスキップを使用
test('market search with complex query', async ({ page }) => {
  test.skip(process.env.CI, 'Test is flaky in CI - Issue #123')

  // テストコードはここに...
})

// FAIL: 不安定: 要素が準備完了であると仮定しない
await page.click('[data-testid="button"]')

// PASS: 安定: 要素が準備完了になるのを待つ
await page.locator('[data-testid="button"]').click() // 組み込みの自動待機

// FAIL: 不安定: 任意のタイムアウト
await page.waitForTimeout(5000)

// PASS: 安定: 特定の条件を待つ
await page.waitForResponse(resp => resp.url().includes('/api/markets'))

// FAIL: 不安定: アニメーション中にクリック
await page.click('[data-testid="menu-item"]')

// PASS: 安定: アニメーションが完了するのを待つ
await page.locator('[data-testid="menu-item"]').waitFor({ state: 'visible' })
await page.waitForLoadState('networkidle')
await page.click('[data-testid="menu-item"]')

// 重要なポイントでスクリーンショットを撮る
await page.screenshot({ path: 'artifacts/after-login.png' })

// フルページスクリーンショット
await page.screenshot({ path: 'artifacts/full-page.png', fullPage: true })

// 要素スクリーンショット
await page.locator('[data-testid="chart"]').screenshot({
  path: 'artifacts/chart.png'
})

// トレースを開始
await browser.startTracing(page, {
  path: 'artifacts/trace.json',
  screenshots: true,
  snapshots: true,
})

// ... テストアクション ...

// トレースを停止
await browser.stopTracing()

// playwright.config.tsで設定
use: {
  video: 'retain-on-failure', // テストが失敗した場合のみビデオを保存
  videosPath: 'artifacts/videos/'
}

# .github/workflows/e2e.yml
name: E2E Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright browsers
        run: npx playwright install --with-deps

      - name: Run E2E tests
        run: npx playwright test
        env:
          BASE_URL: https://staging.pmx.trade

      - name: Upload artifacts
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-results
          path: playwright-results.xml

# E2Eテストレポート

**日付:** YYYY-MM-DD HH:MM
**期間:** Xm Ys
**ステータス:** PASS: 成功 / FAIL: 失敗

## まとめ

- **総テスト数:** X
- **成功:** Y (Z%)
- **失敗:** A
- **不安定:** B
- **スキップ:** C

## スイート別テスト結果

### Markets - ブラウズと検索
- PASS: user can browse markets (2.3s)
- PASS: semantic search returns relevant results (1.8s)
- PASS: search handles no results (1.2s)
- FAIL: search with special characters (0.9s)

### Wallet - 接続
- PASS: user can connect MetaMask (3.1s)
- WARNING:  user can connect Phantom (2.8s) - 不安定
- PASS: user can disconnect wallet (1.5s)

### Trading - コアフロー
- PASS: user can place buy order (5.2s)
- FAIL: user can place sell order (4.8s)
- PASS: insufficient balance shows error (1.9s)

## 失敗したテスト

### 1. search with special characters
**ファイル:** `tests/e2e/markets/search.spec.ts:45`
**エラー:** Expected element to be visible, but was not found
**スクリーンショット:** artifacts/search-special-chars-failed.png
**トレース:** artifacts/trace-123.zip

**再現手順:**
1. /marketsに移動
2. 特殊文字を含む検索クエリを入力: "trump & biden"
3. 結果を確認

**推奨修正:** 検索クエリの特殊文字をエスケープ

---

### 2. user can place sell order
**ファイル:** `tests/e2e/trading/sell.spec.ts:28`
**エラー:** Timeout waiting for API response /api/trade
**ビデオ:** artifacts/videos/sell-order-failed.webm

**考えられる原因:**
- ブロックチェーンネットワークが遅い
- ガス不足
- トランザクションがリバート

**推奨修正:** タイムアウトを増やすか、ブロックチェーンログを確認

## アーティファクト

- HTMLレポート: playwright-report/index.html
- スクリーンショット: artifacts/*.png (12ファイル)
- ビデオ: artifacts/videos/*.webm (2ファイル)
- トレース: artifacts/*.zip (2ファイル)
- JUnit XML: playwright-results.xml

## 次のステップ

- [ ] 2つの失敗したテストを修正
- [ ] 1つの不安定なテストを調査
- [ ] すべて緑であればレビューしてマージ