PlaywrightとPercyで始めるAI活用Visual Regression Testing入門

PlaywrightとAIベースの差分検知ツールPercyを組み合わせたVisual Regression Testingの実践方法を解説。UIの変更を自動検出し、複数デバイスでの表示確認を効率化する方法をご紹介します。

#E2Eテスト

進地崇裕

2024.12.23

情報システム室の進地＠日比谷です。
E2Eテストにおいて、UIの変更を自動的に検出するVisual Regression Testingは重要な課題の一つです。この記事では、PlaywrightとAIを活用した差分検知ツールPercyを使用した実践的なアプローチをご紹介します。
 Visual Regression Testingの基礎 なぜ必要か？Visual Regression Testingがなぜ必要なのでしょうか？

その主な理由は次の通りです。
機能テストでは検出できないレイアウトの崩れを検出するため
CSSの変更による意図しない影響を検出するため
クロスブラウザでの表示確認の自動化を行うため
 基本的なセットアップ# 新しいプロジェクトの作成
$ mkdir playwright-percy-demo
$ cd playwright-percy-demo
$ npm init -y

# 必要なパッケージのインストール
$ npm install -D @playwright/test
$ npm install -D @percy/cli @percy/playwright

# Playwrightのブラウザをインストール
$ npx playwright install
 package.jsonの設定テストを実行しやすいように、package.jsonにスクリプトを追加します。
{
  "scripts": {
    "test:visual": "percy exec -- playwright test"
  }
}
 Percyの設定Percyは無料プランでも月5,000枚までのスナップショットを利用できます。これは個人での学習や小規模なプロジェクトでの利用に十分な量です。
テストを実行する前に、Percyのトークンを環境変数として設定します。
# Percyトークンの設定
$ export PERCY_TOKEN=<your_percy_token>

# テストの実行
$ npm run test:visual
このコマンドを実行すると、テストが実行され、結果がPercyのダッシュボードに表示されます。
 基本的な実装方法 テストコードの例// tests/blog-visual.spec.ts
import { test } from '@playwright/test';
import percySnapshot from '@percy/playwright';

test.describe('Classmethod Tech Blog Visual Tests', () => {
  test('トップページの表示確認', async ({ page }) => {
    await page.goto('https://dev.classmethod.jp/');
    // ページの読み込みを待機
    await page.waitForLoadState('networkidle');
    await percySnapshot(page, 'Blog Homepage');
  });

  test('レスポンシブデザインの確認', async ({ page }) => {
    await page.goto('https://dev.classmethod.jp/');
    await page.waitForLoadState('networkidle');

    // デスクトップビュー
    await page.setViewportSize({ width: 1280, height: 800 });
    await percySnapshot(page, 'Blog - Desktop View');

    // タブレットビュー
    await page.setViewportSize({ width: 768, height: 1024 });
    await percySnapshot(page, 'Blog - Tablet View');

    // モバイルビュー
    await page.setViewportSize({ width: 375, height: 667 });
    await percySnapshot(page, 'Blog - Mobile View');
  });
});
 差分検出の実践例実際にDevelopersIOを使用して、Percyの差分検出機能を検証しました。
 要素の変更テスト// tests/blog-visual-diff.spec.ts
test('ページ内の要素を変更して比較', async ({ page }) => {
  await page.goto('https://dev.classmethod.jp/');
  await page.waitForLoadState('networkidle');

  // 変更前のスナップショット
  await percySnapshot(page, 'Before Modification');

  // ページ上の要素を一時的に変更
  await page.evaluate(() => {
    const main = document.querySelector('main');
    if (main) main.style.backgroundColor = 'red';

    const title = document.querySelector('title');
    if (title) title.textContent = 'Modified Title';
  });

  // 変更後のスナップショット
  await percySnapshot(page, 'After Modification');
});
 レイアウト変更テストtest('要素の表示状態の変更', async ({ page }) => {
  await page.goto('https://dev.classmethod.jp/');
  await page.waitForLoadState('networkidle');

  // 変更前のスナップショット
  await percySnapshot(page, 'Before Element Change');

  // 特定の要素を非表示に
  await page.evaluate(() => {
    const sidebar = document.querySelector('aside');
    if (sidebar) sidebar.style.display = 'none';
  });

  // 変更後のスナップショット
  await percySnapshot(page, 'After Element Change');
});
 Percyでの実行結果Percyでの実行結果は次のようになりました。
 検出された変更点メインコンテンツエリアの背景色変更を正確に検出しています
サイドバーの非表示化による2.33%の差分を検出しています
レイアウトの変更影響範囲を視覚的に表示しています
 Percyの便利な機能マルチブラウザ対応
Chrome, Firefox, Safari, Edgeでの同時確認が可能です
ビューポート管理
モバイル（375px）
タブレット（768px）
デスクトップ（1280px）
差分の視覚化
変更箇所のハイライト表示
Before/After の比較ビュー
差分量のパーセンテージ表示
 実践的なTipsテスト実行時のポイント
ページの読み込みが完了するまでしっかり待つ
スマホ、タブレット、PCなど、確認したい画面サイズを適切に選ぶ
テスト環境を整えて、安定した結果を得る
こんなときに使うと便利
デザインを変更したときの影響確認
スマホ対応のレイアウトチェック
異なるブラウザでの表示確認
 まとめVisual Regression Testingは、UIの変更を自動的に検出する強力なテストです。Percyを使用することで、以下のことが可能になります。
複数の画面サイズでの表示確認を自動化
意図しないUIの変更を早期に発見
クロスブラウザでの表示一貫性を確保
これらは特に、レイアウトの崩れやスタイルの意図しない変更を検出する上で、非常に効果的なアプローチといえます。