Playwright + Cloudflare PagesによるE2Eおよび視覚的回帰テストの完全自動化

UIレイアウトの予期せぬ崩れやバグを防ぐため、Playwright を活用したE2Eおよび視覚的回帰（Visual Regression）テストが不可欠です。

Cloudflare PagesのPreview URLとGitHub Actionsを連携させることで、PR単位での品質検証を完全に自動化できます。

ポイント

• Playwright: 自動待機機能とTrace Viewerを備えた高速E2Eフレームワーク。
• Cloudflare Preview URL: 本番と同等のエッジ環境でテストを実行。
• toHaveScreenshot(): ピクセル単位のUI視覚的回帰テストを標準サポート。

1. Playwrightテスト例 (e2e/visual.spec.ts)

import { test, expect } from '@playwright/test';

test('Top Page Snapshot Test', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage-baseline.png');
});