概要
GitHubのPull Request作成時に、Markdownの手順書に従ってClaude CodeとPlaywrightが自動でアプリを操作し、スクショ付きHTMLレポートを生成・通知するCI/CDフローの構築手法。
詳細内容
この記事では、エンジニアの動作確認作業を効率化するため、Claude CodeとPlaywrightをGitHub Actionsに統合し、PR作成時に動作確認レポートを自動生成する仕組みを解説しています。
### 主な特徴と構成
1. **日本語手順書の自動解釈**: `docs/operation_check.md`に記載した日本語の操作手順を、Claude Codeのスキル（SKILL.md）が読み取り、Playwrightのコマンドに変換して実行します。
2. **プライバシーに配慮したレポート生成**: スクリーンショットをBase64エンコードしてHTMLに直接埋め込み、GitHub Artifactとして保存することで、外部の画像ホスティングを使わずに安全な証跡管理を実現しています。
3. **GitHub Actionsへの最適化**: 非対話モード（`-p`フラグ）での実行、ツールの自動承認（`--allowedTools`）、日本語フォントのインストール、Streamlitのバックグラウンド起動とヘルスチェック待機など、CI環境で安定動作させるための具体的な Tips が紹介されています。
この仕組みを導入することで、開発者は手順書をコミットするだけで、複雑なUI操作を伴う動作確認とエビデンス作成をAIに任せることが可能になります。