How to Do Visual Testing with AI
Visual testing checks if your app looks correct - no broken layouts, overlapping elements, or visual regressions. Rihario automatically detects visual issues during exploration. You don't need to write visual test scripts or maintain baseline images.
How It Works
When you run an exploration, the AI automatically:
- Captures screenshots - Takes screenshots at key moments during exploration
- Analyzes layouts - Detects broken CSS, overlapping elements, misaligned components
- Compares visually - Compares current state to what it expects to see
- Flags issues - Reports visual problems with evidence
No baseline images to maintain. No visual diff configuration. The AI understands what "looks broken" means and flags it automatically.
What Visual Issues Are Detected
Layout Problems
- Elements overlapping when they shouldn't
- Content cut off or overflowing containers
- Misaligned components
- Broken grid layouts
- Responsive design issues
CSS Issues
- Missing styles (elements appear unstyled)
- Broken media queries
- Incorrect z-index stacking
- Font loading failures
- Color contrast problems (accessibility)
Component Issues
- Buttons that look disabled but aren't
- Forms with broken validation styling
- Navigation menus not displaying correctly
- Modal dialogs not appearing
- Tooltips or popovers mispositioned
Content Issues
- Missing images (broken image placeholders)
- Text truncation issues
- Content not loading
- Placeholder text not replaced
How to Enable Visual Testing
Automatic Detection
Visual testing is automatically enabled for all explorations. You don't need to configure anything. The AI detects visual issues as part of normal exploration.
Focus Mode (Optional)
When creating an exploration, you can add instructions to focus on visual aspects:
- "Check if the layout looks broken"
- "Verify the design is consistent"
- "Check for visual regressions"
- "Make sure nothing overlaps"
Visual Test Add-Ons
For deeper visual analysis, you can purchase visual test add-ons that provide:
- More detailed visual comparisons
- Cross-browser visual checks
- Multiple viewport testing
- Enhanced visual regression detection
See Pricing & Plans for details.
Understanding Visual Test Results
When visual issues are found, you'll see:
- Issue description - What's wrong (e.g., "Elements overlapping")
- Screenshot evidence - Visual proof of the problem
- Location - Which page and step
- Severity - High, Medium, or Low
Limitations
AI-powered visual testing has limitations:
- Not pixel-perfect - Won't catch 1px alignment differences
- Subjective issues - Design preferences aren't detected (e.g., "this looks ugly")
- Dynamic content - May flag issues with dynamic/timed content as problems
- False positives - Sometimes flags non-issues (always verify)
- Not exhaustive - Checks what it sees, not every possible viewport/state
Visual testing is best for catching obvious problems - things that clearly look broken, not subtle design tweaks.
Best Practices
- Test after design changes - Run visual checks after CSS or layout updates
- Check multiple viewports - Test on different screen sizes if possible
- Verify findings - Always manually check if reported issues are real problems
- Use for regressions - Great for catching "did my changes break the layout?"
- Don't rely on it exclusively - Still do manual visual review for design quality
Comparison to Traditional Visual Testing
| Aspect | Traditional Tools | Rihario |
|---|---|---|
| Setup | Create baseline images, configure diff thresholds | Automatic, no setup needed |
| Maintenance | Update baselines when design changes | AI adapts automatically |
| Precision | Pixel-perfect comparisons | Detects obvious issues |
| Use Case | Pixel-perfect regression testing | Quick visual checks, obvious issues |