68 lines
1.5 KiB
Markdown
68 lines
1.5 KiB
Markdown
# Phase 5: Visual Analysis
|
|
|
|
**Purpose**: Use LLM vision capabilities to analyze screenshots and identify issues
|
|
|
|
## Steps
|
|
|
|
### 1. Batch screenshot analysis
|
|
|
|
Read all captured screenshots and ask LLM to identify:
|
|
- UI bugs (broken layouts, overlapping elements, cut-off text)
|
|
- Accessibility issues (low contrast, missing labels, improper heading hierarchy)
|
|
- Responsive problems (elements not scaling, overflow issues)
|
|
- Missing or misaligned elements
|
|
- Unexpected visual artifacts
|
|
|
|
### 2. Categorize findings
|
|
|
|
- **Critical**: App is broken/unusable (crashes, white screen, no content)
|
|
- **High**: Major UI bugs affecting core functionality
|
|
- **Medium**: Visual inconsistencies that impact UX
|
|
- **Low**: Minor alignment or styling issues
|
|
|
|
### 3. Generate issue descriptions
|
|
|
|
For each issue:
|
|
- Natural language description
|
|
- Screenshot reference with highlighted problem area
|
|
- Affected viewport/browser if relevant
|
|
- User impact assessment
|
|
|
|
## Output
|
|
|
|
Structured list of visual issues with severity ratings:
|
|
|
|
```markdown
|
|
## Visual Issues Found
|
|
|
|
### Critical (1)
|
|
- White screen on mobile viewport - App fails to render
|
|
|
|
### High (2)
|
|
- Button text cut off at 375px width
|
|
- Form labels overlap input fields
|
|
|
|
### Medium (3)
|
|
- Header alignment inconsistent
|
|
- ...
|
|
```
|
|
|
|
## Performance
|
|
|
|
~5-10 seconds per screenshot for LLM analysis
|
|
|
|
## Common Issues
|
|
|
|
**Analysis fails**
|
|
- Retry analysis
|
|
- Skip corrupted images
|
|
- Validate PNG format
|
|
|
|
**Too many false positives**
|
|
- Adjust analysis prompts
|
|
- Focus on critical issues first
|
|
|
|
## Transition
|
|
|
|
Proceed to Phase 6 (Regression Detection)
|