Antigravity Browser Sub-Agent による E2E テスト自動化

# Antigravity のバージョン確認（ターミナルから）
antigravity --version
# 出力例: Antigravity 1.20.3 (stable)

<!-- AGENTS.md -->
# Project Agent Configuration
 
## Browser Sub-Agent
- base_url: http://localhost:3000
- headless: true
- viewport: { width: 1280, height: 720 }
- screenshot_on_failure: true
- max_actions_per_session: 50
 
## Test Artifacts
- Save screenshots to: .agent-artifacts/screenshots/
- Save diffs to: .agent-artifacts/diffs/
- Report format: markdown
 
## Permissions
- Allow: navigate, click, fill, screenshot, scroll
- Require confirmation: file_download, form_submit_external

# .gitignore
.agent-artifacts/screenshots/
.agent-artifacts/diffs/
.agent-artifacts/cache/

<!-- e2e/auth-flow.agent.md -->
# Authentication Flow E2E Test
 
## Objective
ユーザーの登録・ログイン・ログアウトフローが正常に動作することを確認する。
 
## Test Cases
 
### TC-001: 新規ユーザー登録
1. http://localhost:3000/register にアクセス
2. メールアドレス "test+{timestamp}@example.com" を入力
3. パスワード "SecurePass123!" を入力
4. 「登録する」ボタンをクリック
5. ダッシュボード画面にリダイレクトされることを確認
6. ヘッダーにユーザー名が表示されることを確認
 
### TC-002: ログイン
1. http://localhost:3000/login にアクセス
2. 上記のメールとパスワードでログイン
3. 「ようこそ」メッセージが表示されることを確認
 
### TC-003: ログアウト
1. ヘッダーのアバターをクリック
2. 「ログアウト」を選択
3. ログインページにリダイレクトされることを確認
 
## Pass Criteria
- 各ステップでエラーが表示されない
- リダイレクトが 3 秒以内に完了する
- スクリーンショットに UI 崩れがない

# e2e/checkout-flow.agent.yaml
name: "Checkout Flow E2E"
base_url: "http://localhost:3000"
timeout_seconds: 60
retry_on_failure: 2
 
setup:
  - action: navigate
    url: "/login"
  - action: fill
    selector_hint: "メールアドレス入力欄"
    value: "buyer@example.com"
  - action: fill
    selector_hint: "パスワード入力欄"
    value: "TestPass123!"
  - action: click
    selector_hint: "ログインボタン"
  - action: wait_for
    condition: "URL が /dashboard を含む"
 
tests:
  - name: "商品をカートに追加"
    steps:
      - action: navigate
        url: "/products/premium-widget"
      - action: screenshot
        name: "product-page"
      - action: click
        selector_hint: "カートに追加ボタン"
      - action: assert
        condition: "カートアイコンのバッジが 1 を表示している"
        screenshot: "cart-badge-check"
 
  - name: "チェックアウト完了"
    steps:
      - action: navigate
        url: "/cart"
      - action: click
        selector_hint: "購入手続きへ進むボタン"
      - action: fill
        selector_hint: "クレジットカード番号"
        value: "4242 4242 4242 4242"
      - action: fill
        selector_hint: "有効期限"
        value: "12/28"
      - action: fill
        selector_hint: "CVV"
        value: "123"
      - action: click
        selector_hint: "注文確定ボタン"
      - action: assert
        condition: "注文完了メッセージが表示されている"
        screenshot: "order-complete"
 
teardown:
  - action: navigate
    url: "/account/orders"
  - action: screenshot
    name: "order-history"

<!-- e2e/visual-baseline.agent.md -->
# Visual Baseline Capture
 
## 目的
主要ページのベースラインスクリーンショットを取得する。
 
## キャプチャ対象
- /（ホーム）- デスクトップ・モバイル両方
- /pricing（料金ページ）
- /dashboard（ログイン後）
- /settings（設定ページ）
 
## 保存先
.agent-artifacts/baseline/
 
## 注意事項
- 動的コンテンツ（日時・ランダム要素）はマスクすること
- スクロール可能なページは full-page スクリーンショットで保存

<!-- e2e/generate-report.agent.md -->
# Visual Regression Report Generator
 
## 入力
- ベースライン: .agent-artifacts/baseline/
- 現在のスクリーンショット: .agent-artifacts/current/
- 差分画像: .agent-artifacts/diffs/
 
## 出力
.agent-artifacts/visual-regression-report.md に以下を含めてレポートを生成：
- 変更されたページの一覧
- 各ページの変更率（%）
- 差分画像へのリンク
- Pass/Fail 判定（閾値: 2%）
- 変更の原因分析（レイアウト崩れ？意図的な変更？）

# .github/workflows/e2e-tests.yml
name: E2E Tests with Antigravity Browser Agent
 
on:
  pull_request:
    branches: [main, develop]
  push:
    branches: [main]
 
jobs:
  e2e-test:
    runs-on: ubuntu-latest
    timeout-minutes: 30
 
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "npm"
 
      - name: Install dependencies
        run: npm ci
 
      - name: Build application
        run: npm run build
 
      - name: Start application
        run: npm run start &
        env:
          PORT: 3000
          NODE_ENV: test
 
      - name: Wait for server
        run: npx wait-on http://localhost:3000 --timeout 30000
 
      - name: Install Antigravity CLI
        run: npm install -g @google/antigravity-cli
 
      - name: Run E2E tests via Browser Agent
        run: |
          antigravity agent run \
            --task "e2e/auth-flow.agent.md のすべてのテストを実行して。失敗したら詳細なエラーレポートを生成して" \
            --output .agent-artifacts/ci-report.md \
            --timeout 1200 \
            --headless true
        env:
          GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
          ANTIGRAVITY_TOKEN: ${{ secrets.ANTIGRAVITY_TOKEN }}
 
      - name: Run Visual Regression Tests
        run: |
          antigravity agent run \
            --task "ビジュアルリグレッションチェックを実行して。差分が 2% を超えるページをリストアップして" \
            --output .agent-artifacts/visual-report.md \
            --timeout 600 \
            --headless true
        env:
          GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
          ANTIGRAVITY_TOKEN: ${{ secrets.ANTIGRAVITY_TOKEN }}
 
      - name: Upload test artifacts
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: e2e-artifacts-${{ github.sha }}
          path: .agent-artifacts/
          retention-days: 14
 
      - name: Comment PR with test results
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const report = fs.readFileSync('.agent-artifacts/ci-report.md', 'utf8');
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `## 🤖 E2E Test Results\n\n${report}`
            });

<!-- e2e/parallel-test-orchestration.agent.md -->
# Parallel E2E Test Orchestration
 
## 並列実行計画
Agent Manager を使って以下を同時実行する：
 
### Agent A: 認証フロー
- e2e/auth-flow.agent.md を実行
- ポート: 3000
 
### Agent B: EC フロー
- e2e/checkout-flow.agent.yaml を実行
- ポート: 3001（別インスタンス）
 
### Agent C: ビジュアルリグレッション
- e2e/visual-baseline.agent.md を実行
- ポート: 3002（別インスタンス）
 
## 同期ポイント
全エージェントの完了後に consolidated-report.md を生成する。
いずれかが失敗した場合は全エージェントの実行結果を含めてレポート。

<!-- AGENTS.md に追記 -->
## Browser Sub-Agent
- page_load_timeout: 30000  # デフォルト 10000 から延長
- action_timeout: 15000
- retry_on_timeout: 3

# 曖昧な指定（NG）
- action: click
  selector_hint: "ボタン"
 
# 具体的な指定（OK）
- action: click
  selector_hint: "青い「カートに追加」と書かれたプライマリボタン"
  wait_for_stable: true  # アニメーション完了を待つ

# AGENTS.md でスクリーンショット頻度を制限
## Browser Sub-Agent
- screenshot_frequency: "on_failure_only"  # 失敗時のみ撮影
- max_vision_calls_per_session: 100
- compress_screenshots: true  # 画像圧縮で API コスト削減

## Browser Sub-Agent
- headless: false  # 問題の切り分け時は headed モードで確認
- disable_animations: true  # アニメーションを無効化
- font_rendering: "force-color-profile"

## AGENTS.md
## Browser Sub-Agent
- dom_cache_ttl: 300  # DOM スナップショットを 5 分キャッシュ
- asset_cache: true   # 静的アセットをキャッシュ
- reuse_browser_context: true  # セッション間でコンテキストを再利用