dogfood

ドッグフード QA テスト — camofox-browser

camofox-browser の検出回避ブラウザー自動化を使用した、ウェブアプリケーションの体系的な探索的テストです。

使用する場面

• ウェブアプリケーションのバグ、UX の問題、アクセシビリティの問題をテストする場合
• リリース前の QA 検証
• 新機能の探索的テスト
• Firefox/Camoufox エンジンでのクロスブラウザー検証

前提条件

• camofox-browser サーバーがポート 9377 で実行されていること
• 対象アプリケーションの URL にアクセスできること

ワークフロー

フェーズ 1：セッションを初期化する

# Create a dedicated test session
camofox open "about:blank" --user dogfood-qa

# Start trace recording for evidence capture
camofox trace start --user dogfood-qa --screenshots --snapshots

フェーズ 2：移動して状況を把握する

# Navigate to target application
camofox navigate "https://target-app.com" --user dogfood-qa

# Take initial snapshot to understand page structure
camofox snapshot --user dogfood-qa

# Capture annotated screenshot for visual baseline
camofox annotate --user dogfood-qa

フェーズ 3：体系的に探索する

3.1 ハッピーパスのテスト

主要なユーザーフローに沿ってテストします。

# Interact with elements using refs from snapshot
camofox click e5 --user dogfood-qa
camofox type e3 "test input" --user dogfood-qa
camofox press Enter --user dogfood-qa

# Wait for navigation/loading
camofox wait networkidle --user dogfood-qa

# Capture state after each action
camofox snapshot --user dogfood-qa

3.2 エッジケースのテスト

# Test empty inputs
camofox type e3 "" --user dogfood-qa
camofox press Enter --user dogfood-qa

# Test long strings
camofox type e3 "aaaa...very long string..." --user dogfood-qa
camofox press Enter --user dogfood-qa

# Test special characters
camofox type e3 "<script>alert('xss')</script>" --user dogfood-qa
camofox press Enter --user dogfood-qa

3.3 エラーの発見

# Check for console errors after interactions
camofox errors --user dogfood-qa

# Check console output for warnings
camofox console --user dogfood-qa --type warning

# Monitor all console messages
camofox console --user dogfood-qa --limit 50

3.4 状態とナビゲーションのテスト

# Test back/forward navigation
camofox go-back --user dogfood-qa
camofox go-forward --user dogfood-qa

# Save session state for later comparison
camofox session save dogfood-qa-state --user dogfood-qa

# Test page reload
camofox navigate "https://target-app.com" --user dogfood-qa

フェーズ 4：問題を記録する

バグが見つかった場合：

# 1. Capture visual evidence
camofox annotate --user dogfood-qa

# 2. Capture page errors
camofox errors --user dogfood-qa

# 3. Capture console logs
camofox console --user dogfood-qa

# 4. Mark trace chunk for this specific issue
camofox trace chunk-start --user dogfood-qa
# ... reproduce the bug ...
camofox trace chunk-stop --user dogfood-qa

# 5. Take snapshot for element state
camofox snapshot --user dogfood-qa

フェーズ 5：終了する

# Stop trace recording
camofox trace stop --user dogfood-qa
# → Trace ZIP saved to ~/.camofox/traces/
# → View at https://trace.playwright.dev

# Final console/error summary
camofox errors --user dogfood-qa
camofox console --user dogfood-qa --type error

# Close session
camofox close --user dogfood-qa

問題の報告

調査結果の分類には問題の分類体系を使用します。 各問題の記録にはレポートテンプレートを使用します。

標準的なブラウザーテストとの主な違い

機能	標準	camofox-browser
検出	ボットとして簡単に検出される	検出回避（C++ による偽装）
ブラウザー	Chrome/Chromium	Firefox/Camoufox
証拠	スクリーンショットのみ	トレース（スクリーンショット + DOM + ネットワーク）
コンソール	手動で DevTools を使用	console / errors コマンド
要素参照	CSS セレクター	アクセシビリティツリーの参照（eN）

ヒント

• trace chunk-start/stop を使うと、長時間のセッション内で特定のバグの再現箇所を切り分けられます
• errors をこまめに確認してください。多くのバグは、視覚的な症状が現れる前にコンソールエラーを表示します
• 視覚的な証拠には annotate を使用してください。すべてのインタラクティブ要素に番号が付けられます
• トレース ZIP には再現に必要なデータがすべて含まれています。trace.playwright.dev 経由で共有してください
• --user フラグを使うと、テストセッションを互いに分離できます