概要
https://qiita.com/hiropon122/items/02241d6468270e427c7d
詳細内容
## Claude Codeでの開発をE2Eスクリーンショットテストで効率化した話
https://qiita.com/hiropon122/items/02241d6468270e427c7d
AIエージェントに画面情報を共有するためPlaywrightのスクリーンショットテストを活用し、開発効率と品質を同時に向上させる手法を提案する。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:5/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 88/100 | **Annex Potential**: 85/100 | **Overall**: 88/100
**Topics**: [[Claude Code, Playwright, AIエージェント, E2Eテスト, ビジュアルリグレッションテスト]]
AIエージェント、特にCLIベースで動作するClaude Codeとペアプログラミングを行う際の最大のボトルネックは、AIがアプリケーションの最新のUI状態を直接「見る」ことができない点にある。筆者はこの課題を解決するため、Playwrightを用いたE2Eスクリーンショットテストを開発ワークフローに組み込み、UI情報をリポジトリ内の画像ファイルとして管理・共有する手法を公開した。
筆者がこの手法を重要視する理由は、AIとの文脈共有（コンテキスト共有）の劇的な効率化と、意図しないデザイン崩れの自動検出を両立できる点にある。通常、エンジニアはAIに変更を依頼するたびに手動で画面を確認し、必要に応じてスクリーンショットを添付する必要がある。しかし、Playwrightの `toHaveScreenshot()` を活用して `docs/screenshots/` 以下に常に最新の画面状態を保存するように構成すれば、Claude Codeはリポジトリ内のファイルを読み取ることで、都度ブラウザを開くことなく現在のUI構造を把握できるようになる。
技術的な深掘りとして、筆者は「ビジュアルリグレッションテストの安定化」に注力している。OSや環境の違いによるフォントレンダリングの微差が「偽陽性（意図しないテスト失敗）」を招く課題に対し、`@fontsource/noto-sans-jp` を利用してフォントをbase64でCSSに直接注入し、`stabilizePage` 関数でフォントのロード完了を待機する実装を提案している。これにより、ローカルとCI環境での差異を最小限に抑え、信頼性の高い比較を可能にしている。
また、実用的なワークフローとして `CLAUDE.md` にスクリーンショットテストの実行ルールを明記する運用を紹介している。AIがコードを変更した直後に、自動または半自動でテストを実行してスナップショットを更新させることで、エンジニアはGitの差分としてUIの変化を確認するだけで済む。これは、Webアプリケーションエンジニアにとって「AIに目を授ける」と同時に「既存機能のデグレを防ぐセーフティネット」を最小限の工数で構築できる、極めて実践的なアプローチである。
著者は、この手法によって画面確認のためにブラウザを開く回数が大幅に減り、AIとのやり取りがスムーズになったと主張している。AIエージェントによる自動開発が進化する中で、人間とAIが共通の「視覚情報」をコードベースの一部として共有するこの手法は、今後の開発スタンダードの一つになり得るポテンシャルを秘めている。