Playwrightを使ったE2Eテストの実践。VRT（Visual Regression Testing）、認証モック、リトライ機構など、実務で使える自動テスト技術を詳しく解説します。
E2Eテストの「検疫タグ」運用を形骸化させない設計
E2Eの検疫タグ運用は、隔離した瞬間より隔離し続ける間の設計が重要です。追跡Issueの定数化や実測値ベースの剥奪判定で、隔離の形骸化を防ぐ方法を解説します。
ローカルE2Eを65s→15-18sに短縮した話：Supabase migrationの環境差吸収とハッシュキャッシュ
Supabase CLIのバンドルDockerと本番の storage.prefixes 差でマイグレーションが壊れた問題を to_regclass() で吸収し、さらに マイグレーションハッシュキャッシュ + DBリセットとauthモックの並列化で npm run e2e を 65s → 15-18s（-72%）に短縮した実装記録。
「npm run e2e」一発で完結するローカル E2E 環境を構築する
npm run e2e 一発でローカルE2E環境を完結させる構築方法を解説します。Cloudflare Workers + Supabase + Playwright構成で、Auth認証モック・環境ファイルの安全なクリーンアップ・状態解決フォールバックを自己完結スクリプトにまとめる実装パターンです。
複数イベントが同時発火する通知/マイルストーンを優先度+排他で統合する設計
学習アプリやSaaSで複数の通知・マイルストーンが同時発火するケースに対し、優先度ソート・排他ルール・上限件数の3軸で統合する設計パターンを解説します。TypeScript実装例とPlaywrightでのrace-free E2Eテスト手法、prefers-reduced-motion対応まで網羅。
Playwright toHaveScreenshotの.png拡張子問題を解決
Playwrightの`toHaveScreenshot`で出る「Screenshot name "..." must have '.png' extension」の原因と解決方法を解説。`.png`拡張子の指定方法や`snapshotPathTemplate`の設定例も紹介します。