📚

CDP管理コンソール - AI自動テスト導入計画

に公開
Test
tech

概要

CDP管理コンソールプロジェクトにおけるフロントエンドテスト自動化の計画について紹介します。現在、手動テストに多くの時間を費やしているため、Claude CodeとAIツールを活用したテスト生成・保守の効率化を検討しています。

背景

CDP管理コンソールは複雑なフォーム処理とデータ可視化を含む大規模なNext.jsアプリケーションです。現在のテスト課題：

  • 手動テスト時間が多い
  • 複雑なReact Hook FormとZod検証の組み合わせテストが困難
  • SFAデータ選択など動的コンポーネントのテストカバレッジ不足
  • 国際化対応（日中英）でのテスト工数増大

技術背景と課題

プロジェクト技術スタック

  • フロントエンドフレームワーク: Next.js 14 + React Server Components
  • UIコンポーネントライブラリ: Material-UI + Minimal UI Kit
  • 状態管理: Zustand + TanStack Query
  • API層: tRPC
  • フォーム処理: React Hook Form + Zod
  • データ可視化: React Flow + ApexCharts

AI自動化テストの導入計画

対象コンポーネント

  1. SFAデータ選択フォーム: 動的API依存の複雑な入力フィールド
  2. データソース設定: BigQuery、GCS、S3接続設定の検証
  3. ワークフロービルダー: React Flowベースのドラッグ&ドロップ機能
  4. ダッシュボード: ApexChartsによる複数チャート表示

実装アプローチ

  1. Claude Codeでのテスト生成: Zodスキーマから自動テストケース生成
  2. ビジュアルリグレッション: Playwright + AI画像比較
  3. E2Eテスト: ユーザーフローの自動生成と実行

具体的な実装計画

1. スキーマベースのテスト生成

SFAデータ選択コンポーネントを例に、以下のプロセスでテストを自動生成：

# 1. コンポーネントのZodスキーマを抽出
pnpm claude-code extract-schema src/components/sfa-data-selection.tsx

# 2. AIでテストケース生成
pnpm claude-code generate-tests --schema=sfa-data-selection.schema.json

2. ビジュアルリグレッションテスト

PlaywrightとAI画像解析でUIの変更を自動検出：

// スクリーンショットを取ってAIで比較
const { test } = require('@playwright/test');

test('SFAデータ選択フォームの表示', async ({ page }) => {
  await page.goto('/sfa-data-selection');

  // ベースラインと比較
  const screenshot = await page.screenshot();
  const aiResult = await compareWithAI(screenshot, 'baseline-sfa.png');

  expect(aiResult.isSignificantChange).toBe(false);
});

3. E2Eテスト自動化

ユーザーフローをAIで生成して自動テスト：

// Claude Codeでユーザーシナリオを生成
const userFlow = await claude.generateE2EFlow({
  component: 'SFADataSelection',
  userGoal: 'Select SFA data and create workflow',
  steps: [
    'Navigate to data selection page',
    'Select collection from dropdown',
    'Configure filter conditions',
    'Preview selected data',
    'Save configuration'
  ]
});

// 自動生成されたPlaywrightテストを実行
test('SFAデータ選択フロー', userFlow);

4. TestMaintenance

class AdaptiveTestMaintenance {
  async healFlakyTests(testResults: TestResult[]): Promise<HealingReport> {
    // 1. 不安定なテストの識別
    const flakyTests = this.identifyFlakyTests(testResults);

    // 2. AI失敗原因分析
    const failureAnalysis = await Promise.all(
      flakyTests.map((test) => this.analyzeFlakyTest(test)),
    );

    // 3. 自動修復戦略生成
    const healingStrategies =
      await this.generateHealingStrategies(failureAnalysis);

    // 4. 修復適用と検証
    return await this.applyAndValidateHealing(healingStrategies);
  }

  private async analyzeFlakyTest(test: FlakyTest): Promise<FailureAnalysis> {
    const prompt = `
    以下の不安定なテストの失敗パターンを分析してください：

    テスト名: ${test.name}
    失敗率: ${test.failureRate}%
    エラーメッセージ: ${test.errorMessages.join("; ")}
    DOMスナップショット: ${test.domSnapshots}

    可能な原因：
    1. タイミング問題（非同期処理）
    2. DOMセレクターの不安定性
    3. データ依存問題
    4. 環境差異

    具体的な修復提案をお願いします。
    `;

    return await this.aiService.analyzeFailure(prompt);
  }
}

SFAデータ選択コンポーネントの事例

コンポーネントの特徴

  • 動的APIフォーム: コレクション選択後にフィールドが動的生成
  • 複雑な検証: 条件的入力と相互依存
  • 非同期API: tRPCでのデータ取得と更新

生成予定のテスト

// Claude Codeで自動生成されるテストの例
describe('SFADataSelection', () => {
  it('コレクション一覧を表示', async () => {
    const { getByRole } = render(<SFADataSelection />);
    expect(getByRole('combobox')).toBeInTheDocument();
  });

  it('コレクション選択時にフィールドを動的更新', async () => {
    // AIがコンポーネントの動作を解析して自動生成
  });

  it('無効なデータでエラー表示', async () => {
    // Zodスキーマからエッジケースを自動生成
  });
});

ビジュアルテスト

# Playwrightでスクリーンショットを自動比較
pnpm playwright test --update-snapshots
pnpm playwright test --reporter=html

技術的課題と解決方案

AI生成コードの信頼性

課題:
AI生成のテストケースにロジックエラーや不完全なアサーションが存在する可能性

解決方案:

class AICodeValidator {
  async validateGeneratedTest(testCode: string): Promise<ValidationResult> {
    // 1. 静的コード解析
    const syntaxValidation = this.validateSyntax(testCode);

    // 2. ロジック整合性チェック
    const logicValidation = await this.validateLogic(testCode);

    // 3. ベストプラクティス適合性チェック
    const practiceValidation = this.validateBestPractices(testCode);

    return this.synthesizeValidation([
      syntaxValidation,
      logicValidation,
      practiceValidation,
    ]);
  }
}

ビジュアルテストのノイズ問題

課題:
アニメーション、フォントレンダリング差異などの要因による誤報

解決方案:

class NoiseReductionFilter {
  filterVisualNoise(diff: VisualDiff): FilteredDiff {
    return {
      ...diff,
      changes: diff.changes
        .filter((change) => !this.isAnimationNoise(change))
        .filter((change) => !this.isFontRenderingDiff(change))
        .filter((change) => this.isSemanticChange(change)),
    };
  }

  private isSemanticChange(change: VisualChange): boolean {
    // MLモデルを使用して変化が意味的意義を持つかを判定
    return this.semanticClassifier.predict(change.features) > 0.8;
  }
}

テスト環境の一貫性

課題:
異なる環境でのAIテスト結果の一貫性保証

解決方案:

class EnvironmentNormalizer {
  async normalizeTestEnvironment(): Promise<void> {
    // 1. ブラウザ環境標準化
    await this.standardizeBrowserConfig();

    // 2. ビューポートサイズ固定化
    await this.setFixedViewport();

    // 3. フォント読み込み同期
    await this.waitForFontsLoad();

    // 4. アニメーション無効化
    await this.disableAnimations();
  }
}

ベストプラクティスまとめ

AIツール選択戦略

  1. コード生成: Claude Code（複雑ロジック理解能力が強い）
  2. ビジュアル解析: GPT-4V + Custom CV Model（精度バランス）
  3. データ生成: GPT-3.5-Turbo（コスト効果最適）
  4. 文書生成: Claude-3 Sonnet（技術文書品質が高い）

チーム協力モード

  • AI+人工ハイブリッドレビュー: 重要テストケースの人工再確認
  • 段階的信頼構築: シンプルシナリオから始めて、徐々にAI自主範囲を拡大
  • 継続学習ループ: 定期的なAIテスト効果分析、プロンプトエンジニアリング最適化

将来展望

  1. マルチモーダルテスト: テキスト、画像、動画を組み合わせた包括的テスト
  2. 予測的テスト: コード変更に基づく潜在的問題領域予測
  3. 自然言語テスト: 要求仕様書から直接テストケース生成
  4. リアルタイムテスト最適化: 実行時動的テスト戦略調整

結論

CDPプロジェクトでAIテスト自動化を段階的に導入することで、テスト作成の効率化と品質向上を期待しています。但し、これはあくまで一つの可能性であり、実際の効果は限定的なパイロットで検証していく必要があります。

Discussion