How Evidence Is Collected (Screenshots, Logs, DOM)
Rihario automatically captures evidence when issues are detected: screenshots show what the page looked like, logs show what errors occurred, and DOM snapshots show the HTML structure. This evidence helps you understand what went wrong and verify findings.
Types of Evidence
1. Screenshots
Screenshots capture the visual state of the page:
- Full-page screenshots - Entire page, scrolled content included
- Viewport screenshots - What's visible in the browser viewport
- Element screenshots - Specific elements (buttons, forms, etc.)
- Before/after screenshots - State before and after actions
2. Console Logs
Console logs capture JavaScript errors and warnings:
- Error messages - JavaScript exceptions
- Warning messages - Non-fatal warnings
- Stack traces - Where errors occurred in code
- Timestamps - When errors occurred
3. Network Logs
Network logs capture HTTP request/response details:
- Request details - URL, method, headers, body
- Response details - Status code, headers, body
- Failed requests - Network errors, timeouts
- Timing information - Request duration, latency
4. DOM Snapshots
DOM snapshots capture the HTML structure:
- HTML structure - Current DOM state
- Element attributes - IDs, classes, data attributes
- Text content - Visible text in elements
- Structure at time of issue - What HTML looked like when problem occurred
When Evidence Is Collected
On Issue Detection
Evidence is automatically captured when:
- Console error detected - Screenshot + console logs
- Network error detected - Screenshot + network logs
- UI issue detected - Screenshot + DOM snapshot
- Step fails - Screenshot + all available logs
At Key Moments
Evidence is also captured at:
- Page loads - Initial page state
- Form submissions - Before and after submission
- Navigation events - When navigating to new pages
- User-specified moments - If you requested specific screenshots
How Evidence Is Organized
By Step
Each step in the log includes:
- Screenshot of page state
- Relevant logs for that step
- DOM snapshot if needed
By Issue
Each issue includes:
- Screenshot showing the problem
- Evidence relevant to that issue
- Step where issue occurred
- All related logs
Using Evidence
Verify Issues
Use evidence to verify reported issues are real:
- Look at screenshots to see visual problems
- Read console logs to understand JavaScript errors
- Check network logs to see failed requests
- Inspect DOM snapshots to understand structure
Debug Problems
Evidence helps you debug:
- Console logs show where code broke
- Network logs show what API calls failed
- Screenshots show visual state when problem occurred
- DOM snapshots show HTML structure issues
Generate Fix Prompts
Evidence is used to generate fix prompts:
- Console errors → Fix prompts with error details
- Network errors → Fix prompts with request details
- UI issues → Fix prompts with screenshot analysis
Evidence Limitations
- Screenshots are static - Don't show animations or interactions
- Logs are snapshots - Only capture what was logged at that moment
- DOM snapshots don't include scripts - Only HTML structure, not JavaScript state
- Not everything is captured - Some evidence might be missed