# Browser Testing Checklist for Blog Posts

**Last Updated:** 2026-01-15

## Purpose

Visual inspection checklist for verifying content flow, responsiveness, and functionality across all Tier 1 blog posts.

## Pre-Testing Setup

### Local Environment

1. Start local server (use router so /insights/ URLs work):
   ```bash
   php -S localhost:8003 router.php
   ```

2. Access posts via pretty URLs or direct:
   ```
   http://localhost:8003/insights/{category}/{slug}/
   http://localhost:8003/v2/pages/blog/post.php?category={category}&slug={slug}
   ```

### Browser Tools

- Chrome DevTools (mobile emulation)
- Firefox Responsive Design Mode
- Safari Responsive Design Mode

## Visual Inspection Checklist

### Content Flow

- [ ] Introduction appears first
- [ ] Core definition appears early (within first 20% visually)
- [ ] Content progresses logically (simple → complex)
- [ ] Examples follow definitions
- [ ] Advanced topics come after basics
- [ ] Smooth transitions between sections
- [ ] Conclusion appears at end

### Definition Placement

- [ ] Main definition visible above fold (desktop)
- [ ] Definition appears early in scroll (mobile)
- [ ] Definition is clearly formatted (heading + paragraph)
- [ ] Definition is easy to find

### FAQ Section

- [ ] FAQs render correctly via component
- [ ] No duplicate FAQ sections in content
- [ ] FAQ accordion works (expand/collapse)
- [ ] FAQ schema markup present (check source)
- [ ] FAQ count matches JSON (10-15 questions)

### Non-Text Elements

- [ ] Calculators load and function correctly
- [ ] Videos/embeds display properly
- [ ] Images load with correct alt text
- [ ] Tables render correctly
- [ ] Interactive elements work

### Mobile Responsiveness

- [ ] Content readable on mobile (320px width)
- [ ] Text size appropriate (min 16px)
- [ ] Images scale correctly
- [ ] Calculators usable on mobile
- [ ] FAQ accordion works on touch
- [ ] No horizontal scrolling
- [ ] CTAs accessible on mobile

### Desktop Experience

- [ ] Content width appropriate (max-width)
- [ ] Text readable (line length 50-75 chars)
- [ ] Images display at correct size
- [ ] Calculators fully functional
- [ ] FAQ section clearly visible

## Testing Procedure

### For Each Post

1. **Load post** in browser
2. **Desktop view** (1920x1080):
   - Check content flow visually
   - Verify definition placement
   - Test calculators/embeds
   - Verify FAQ rendering
3. **Mobile view** (375x667):
   - Check responsive layout
   - Verify touch interactions
   - Test mobile usability
4. **Tablet view** (768x1024):
   - Check intermediate breakpoints
   - Verify layout adaptation

## Common Issues to Check

### Content Flow Issues

- Definition appears after examples
- FAQ sections in content (duplicate)
- Illogical content order
- Missing transitions

### Technical Issues

- Calculators not loading
- Videos not playing
- Images broken
- FAQ component errors
- Schema markup missing

### Responsive Issues

- Text too small on mobile
- Images overflow container
- Calculators unusable on mobile
- FAQ accordion broken on touch
- Horizontal scrolling

## Testing Log Template

```
Post: {category}/{slug}
Date: {date}
Tester: {name}

Desktop (1920x1080):
- Content flow: [PASS/FAIL]
- Definition placement: [PASS/FAIL]
- Calculators: [PASS/FAIL]
- FAQ rendering: [PASS/FAIL]

Mobile (375x667):
- Responsive layout: [PASS/FAIL]
- Touch interactions: [PASS/FAIL]
- Readability: [PASS/FAIL]

Issues Found:
- [List issues]

Fixed:
- [List fixes]
```

## Automated Testing

### Browser Console Checks

```javascript
// Check FAQ schema
document.querySelectorAll('[itemtype*="FAQPage"]').length

// Check calculator elements
document.querySelectorAll('[x-data*="calculator"]').length

// Check images with alt text
document.querySelectorAll('img:not([alt])').length

// Check internal links
document.querySelectorAll('a[href^="/insights"]').length
```

## Related Documentation

- `docs/content/blog/CONTENT_FLOW_GUIDELINES.md` - Content flow rules
- `docs/content/blog/TIER1_CONTENT_FLOW_REVIEW_SUMMARY.md` - Review summary