| name | browser-check |
| description | `playwright-cli` を使ってブラウザ動作確認を標準手順で実施する。UI変更、回帰確認、E2E前後の手動確認、フォーム送信や CRUD フローの検証で使う。 |
ブラウザ動作確認
playwright-cli を使い、「表示される」だけでなく「操作が通る」まで確認する。
手順
- 対象アプリのポートを読む。
- frontend:
apps/frontend/vite.config.ts の server.port
- backend API:
apps/backend/.env の API_PORT
- admin frontend や Expo Web を確認する場合は、それぞれの
.env と起動コマンドも確認する
- 対象 URL を
playwright-cli で開く。
playwright-cli open http://localhost:<port>
- 初期状態を確認する。
playwright-cli snapshot
playwright-cli console error
playwright-cli network
- 実際の操作フローを検証する。
- 作成: 入力して送信し、結果が表示されること
- 編集: 既存データを変えて保存し、反映されること
- 削除: 確認 UI を経て一覧から消えること
- 空状態だけで終わらせず、既存データがある状態でも確認すること
- UI変更時はモバイル幅も確認する。
playwright-cli resize 375 812 が使える環境ならそれで切り替える
- 使えない場合は
run-code か CLI のセッションオプションで viewport を切り替える
- ヘッダ位置、モーダル、フォーム送信ボタン、スクロール末尾を重点確認する
- 結果を記録する。
- 成功画面のスクリーンショット
- コンソールエラーの有無
- API リクエストの成否
- 実施した操作と結果
注意事項
- 要素操作の前に毎回
playwright-cli snapshot を取り、最新の要素参照を使う
- worktree 環境ではハードコードしたポートを使わず、必ず対象 worktree の設定値を読む
- 確認ダイアログや 2 段階削除 UI も通す
- 自動化済み E2E があっても、今回の変更に直接関係するフローはブラウザで一度通す
- 複雑な操作や記録が必要な場合は
.codex/skills/playwright-cli/SKILL.md のコマンドを使う