Playwright × 生成AI でVRTのバグ報告を自然言語化してみたら実用的だった話

async function runVisualTest(useV2 = false): Promise<void> {
  const browser = await chromium.launch({ headless: true });
  
  try {
    const context = await browser.newContext();
    const page = await context.newPage();
    const configs = useV2 ? V2_TEST_CONFIGS : TEST_CONFIGS;

    for (const config of configs) {
      // ベースライン画像の撮影（初回のみ）
      const baselinePath = `baseline/${config.pageId}.png`;
      const baselineExists = existsSync(baselinePath);

      if (!baselineExists) {
        await captureScreenshot(page, {
          pageId: config.pageId,
          url: config.baselineUrl,
          viewport: config.viewport,
          fullPage: config.fullPage ?? false,
        }, 'baseline');
      }

      // 現在の状態を撮影
      await captureScreenshot(page, {
        pageId: config.pageId,
        url: config.currentUrl,
        viewport: config.viewport,
        fullPage: config.fullPage ?? false,
      }, 'screenshots');

      // 生成AIで差分分析
      const findings = await judgeVisualDiff(config.pageId);
      await saveReport(config.pageId, findings);
    }
  } finally {
    await browser.close();
  }
}

// OpenAI実装
export class OpenAIProvider implements VisionProvider {
  private client: OpenAI;

  constructor(apiKey: string) {
    this.client = new OpenAI({ apiKey });
  }

  async analyzeDiff(baseline: string, current: string): Promise<{ findings: DiffFinding[] }> {
    const messages = [
      {
        role: 'system' as const,
        content: SYSTEM_PROMPT,
      },
      {
        role: 'user' as const,
        content: [
          { type: 'text' as const, text: USER_PROMPT },
          { type: 'image_url' as const, image_url: { url: `data:image/png;base64,${baseline}` } },
          { type: 'image_url' as const, image_url: { url: `data:image/png;base64,${current}` } },
        ],
      },
    ];

    const response = await this.client.chat.completions.create({
      model: 'gpt-4.1-mini',
      temperature: 0,
      max_tokens: 1024,
      messages,
      response_format: { type: 'json_object' },
    });

    const content = response.choices[0].message?.content ?? '';
    const findings = this.parseResponse(content);

    return { findings };
  }

  private parseResponse(content: string): DiffFinding[] {
    try {
      const parsed = JSON.parse(content);

      if (parsed !== null && typeof parsed === 'object' && 'findings' in parsed) {
        const findings = parsed.findings;
        if (Array.isArray(findings)) {
          return findings;
        }
      }

      if (Array.isArray(parsed)) {
        return parsed;
      }

      if (parsed !== null && typeof parsed === 'object' && 'results' in parsed) {
        const results = parsed.results;
        if (Array.isArray(results)) {
          return results;
        }
      }

      return [];
    } catch (error) {
      console.error('JSON parse error:', error);
      console.error('Raw content:', content);
      return [];
    }
  }
}

const SYSTEM_PROMPT = `あなたは厳密なビジュアルリグレッションテストボットです。
<baseline>と<current>の画像を比較し、以下の基準で判定してください：

1. ERROR（エラー）として判定すべきもの：
   - ブランドカラーの変更（企業のアイデンティティに関わる色の変化）
   - レイアウトの崩壊（要素の重なり、グリッドの破壊、配置の大幅なずれ）
   - ローディング状態が続いている（回転するスピナー、ローディングオーバーレイ、プログレスバー、スケルトンスクリーンなど、ページ全体または一部にローディング表示が残っている）
   - 画像の読み込み失敗（壊れた画像アイコン、404エラー、空白の画像エリア）
   - 重要なUIコンポーネントの消失（ボタン、フォーム、ナビゲーション）
   - エラーメッセージの表示

2. WARN（警告）として判定すべきもの：
   - テキスト文言の変更（誤字脱字、翻訳の変更を含む）
   - セクション内の画像コンテンツの変更（異なる写真やイラスト）
   - 軽微な位置ずれ（5px以上20px未満）
   - フォントサイズやスタイルの変更
   - 背景色の軽微な変更（ブランドカラー以外）
   - アイコンの変更

3. 無視すべきもの：
   - 2px未満のアンチエイリアスノイズ
   - 画像圧縮による軽微な色差
   - タイムスタンプ、日付、動的な数値
   - アニメーションの途中状態
   - 広告やサードパーティコンテンツ

結果は以下のJSON配列形式で返してください：
[{
  "severity": "ERROR" または "WARN",
  "reason": "問題の説明（日本語）",
  "bbox": [x, y, width, height] // 問題箇所の座標（オプション）
}]

差分がない場合は空配列 [] を返してください。`;

const USER_PROMPT = `以下の2つの画像を比較してください。1枚目がbaseline（期待される正しい状態）、2枚目がcurrent（現在の状態）です。

上記の2つの画像を詳細に比較し、差分をJSON配列で返してください。特に以下の点に注意してください：

1. ページ全体に半透明のオーバーレイやローディングスピナーが表示されていないか
2. ブランドカラー（ヘッダー、ボタン、リンクなど）が変更されていないか
3. レイアウトが崩れていないか（要素の重なり、位置ずれ）
4. 画像が正しく表示されているか

差分がない場合は空配列[]を返してください。`;

const messages: any[] = [
  { role: 'system', content: SYSTEM_PROMPT },
  {
    role: 'user',
    content: [
      { type: 'text', text: USER_PROMPT },
      { type: 'image_url', image_url: { url: `data:image/png;base64,${baseline}` } },
      { type: 'image_url', image_url: { url: `data:image/png;base64,${current}` } },
    ],
  },
];

[STATS] 分析結果:
[ERROR] [ERROR] ページ全体に赤みがかった半透明のオーバーレイが表示されており、中央にローディングスピナーが存在するため、ローディング状態が続いている。
   位置: x=0, y=0, w=360, h=1130
[ERROR] [ERROR] ブランドカラーが青から赤に変更されている。ヘッダーのロゴ、ナビゲーションメニュー、ボタンの文字色、価格表示、フッターのリンク色などが赤色に変わっている。
   位置: x=0, y=0, w=360, h=1130
[ERROR] [ERROR] レイアウトが崩れている。製品カードの重なりや位置ずれが発生し、特に2つ目の製品カードが左に大きくずれて重なっている。
   位置: x=0, y=300, w=360, h=300

[STATS] 分析結果:
[ERROR] [ERROR] ページ全体のブランドカラーが広範囲に変更されています。（ヘッダーのナビゲーションリンク色、ヒーローセクションの背景色とテキスト色、ヒーローセクションのボタン色、製品ラインナップ見出し色、各製品カードの価格表示色、フッターのテキスト色などが、青/白基調からピンク基調へ変更されています。）
   位置: x=0, y=0, w=1000, h=1050
[ERROR] [ERROR] ヒーローセクションの「無料相談を申し込む」ボタン内にローディングスピナー（赤い回転アイコン）が残った状態になっています。
   位置: x=350, y=290, w=300, h=50
[ERROR] [ERROR] 製品カードのレイアウトが崩壊し、「Analytics Pro」カードと「Security Suite」カードが重なっています。
   位置: x=50, y=490, w=900, h=200
[WARN] [WARN] 「Analytics Pro」セクションのアイコンが変更されています。（[STATS] → [CHART]）
   位置: x=120, y=510, w=100, h=40
[WARN] [WARN] 「Security Suite」セクションのアイコンが変更されています。（[LOCK] → [SECURE]）
   位置: x=500, y=510, w=100, h=40

=== Gemini 2.0 Flash ===
[STATS] 分析結果:
[ERROR] [ERROR] ブランドカラーの変更（背景色が青からピンクに変更）
   位置: x=0, y=0, w=1280, h=600
[WARN] [WARN] 製品ラインナップの画像が変更
   位置: x=70, y=450, w=400, h=280
[WARN] [WARN] 製品ラインナップの画像が変更
   位置: x=480, y=450, w=330, h=280
   
=== Gemini 1.5 Pro ===
[STATS] 分析結果:
[ERROR] [ERROR] レイアウトの崩壊（STATSとLOCKのセクションの内容が入れ替わっている）
   位置: x=0, y=450, w=400, h=300
[WARN] [WARN] テキスト文言の変更（Security Suiteの説明テキスト）
   位置: x=100, y=550, w=300, h=50
[WARN] [WARN] セクション内の画像コンテンツの変更（STATSセクションのアイコン）
   位置: x=50, y=500, w=50, h=50

=== GPT-4o mini ===
[STATS] 分析結果:
[ERROR] [ERROR] ブランドカラーが変更されています（青からピンクに変わっています）。
   位置: x=undefined, y=undefined, w=undefined, h=undefined
[ERROR] [ERROR] ローディングスピナーが表示されています。
   位置: x=undefined, y=undefined, w=undefined, h=undefined
[WARN] [WARN] テキスト文言が変更されています（[STATS]が[CHART]に変わっています）。
   位置: x=undefined, y=undefined, w=undefined, h=undefined
   
=== Claude 3 Haiku ===
[STATS] 分析結果:
[OK] 差分なし - テスト合格！

[STATS] 分析結果:
[ERROR] [ERROR] ブランドカラーが変更されている。具体的には「IVRとAIで」の文字色と「今すぐ無料で試してみる」ボタンの背景色が黄色からピンクに変わっている。
   位置: x=300, y=250, w=200, h=100
[ERROR] [ERROR] レイアウトの崩れ。2枚目の画像で「今すぐ無料で試してみる」ボタンのテキストが中央揃えでなくなり、ボタンの高さも変わっている。また、右下のタブのテキストが「XXXXX XXXXX」となり、表示が崩れている。
   位置: x=300, y=350, w=200, h=50
[ERROR] [ERROR] ロゴやアイコンは表示されているが、企業ロゴの下の説明テキストが消失している。
   位置: x=0, y=600, w=1200, h=50

[STATS] 分析結果:
[ERROR] [ERROR] ブランドカラーの変更。ヘッダーの背景色が緑からピンクに変更されている。
   位置: x=0, y=0, w=360, h=80
[ERROR] [ERROR] ボタンの色が黄色からピンクに変更されている。
   位置: x=20, y=150, w=320, h=50
[ERROR] [ERROR] レイアウトの崩れ。要素の配置が大幅に異なり、画面全体の構成が変わっている。
   位置: x=0, y=80, w=360, h=640