dogfood

Dogfood QA 测试 — camofox-browser

使用 camofox-browser 的反检测浏览器自动化功能，对 Web 应用进行系统化探索性测试。

适用场景

• 测试 Web 应用中的错误、用户体验问题和无障碍问题
• 发布前的 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 标志可将各测试会话彼此隔离