# Comparison Pages Testing Protocol


**Last Updated:** 2025-11-20

Complete testing procedure for new comparison pages including local/production steps, validation tools, and performance testing methods.

## Overview

This protocol ensures all comparison pages meet quality standards before and after deployment. Follow these steps systematically for each new or updated comparison page.

## Pre-Testing Setup

### Local Environment

1. **Start local server:**

   ```bash
   cd /path/to/landingpage
   php -S localhost:8003 -t .
   ```

2. **Verify server running:**

   - Visit `http://localhost:8003`
   - Check for PHP errors

3. **Prepare test page:**
   - Ensure page file exists: `v2/pages/compare_{competitor}.php`
   - Verify image assets present
   - Check data files updated

### Testing Tools

**Required Tools:**

- Chrome DevTools (Lighthouse, Console, Network)
- Google Rich Results Test
- Browser extensions: axe DevTools, WAVE
- Mobile device or responsive design mode

**Optional Tools:**

- PageSpeed Insights
- WebPageTest
- JSONLint
- Color Contrast Checker

## Local Testing Procedure

### Phase 1: Visual Inspection

#### 1.1 Page Load Test

**Steps:**

1. Navigate to `http://localhost:8003/v2/pages/compare_{competitor}.php`
2. Verify page loads (HTTP 200)
3. Check for PHP errors in page source
4. Verify no blank page or fatal errors

**Expected Result:**

- Page loads completely
- No PHP errors visible
- Content displays immediately

**Common Issues:**

- PHP syntax errors → Check PHP logs
- Missing includes → Verify file paths
- Database errors → Check data file syntax

#### 1.2 Section Rendering Test

**Test Each Section:**

1. **Header**

   - [ ] Navbar displays correctly
   - [ ] Logo visible
   - [ ] Navigation links work
   - [ ] Mobile menu works (if applicable)

2. **Hero Section**

   - [ ] Competitor logo displays
   - [ ] Heading text correct
   - [ ] Description text present
   - [ ] CTA buttons visible and styled
   - [ ] Layout responsive

3. **Company Logos Section**

   - [ ] Logos scroll smoothly
   - [ ] Animation works
   - [ ] No layout shifts

4. **Comparison Section**

   - [ ] Section header displays ("Vergleich" badge, heading)
   - [ ] Comparison grid renders
   - [ ] Ordio column displays all sections
   - [ ] Competitor column displays all sections
   - [ ] Columns aligned (equal heights)

5. **Ordio Verteiler Section**

   - [ ] Feature cards display (4 desktop, carousel mobile)
   - [ ] Testimonial displays
   - [ ] Layout responsive

6. **In bester Gesellschaft Section**

   - [ ] Customer stories display (3 cards)
   - [ ] CTA buttons present
   - [ ] Layout responsive

7. **Comparison Carousel**

   - [ ] Carousel displays
   - [ ] Current competitor excluded
   - [ ] Cards display correctly
   - [ ] Navigation arrows visible (desktop)

8. **FAQ Section**

   - [ ] All FAQ items display
   - [ ] Accordion works (expand/collapse)
   - [ ] Content readable

9. **Footer**
   - [ ] Footer displays correctly
   - [ ] Links work
   - [ ] Layout correct

**Expected Result:**

- All sections render correctly
- No broken layouts
- Content readable

**Common Issues:**

- Missing CSS → Check CSS include
- Broken layout → Check Tailwind classes
- Missing content → Verify includes present

#### 1.3 Image Loading Test

**Steps:**

1. Open Chrome DevTools → Network tab
2. Reload page
3. Filter by "Img"
4. Check all images load (status 200)
5. Verify correct image variants loaded

**Test Images:**

- [ ] Hero logo: `{competitor}-vergleich-logo-160w.webp` or `320w.webp`
- [ ] Comparison column logos
- [ ] Carousel logos
- [ ] Company logos section
- [ ] All images have alt attributes

**Expected Result:**

- All images load successfully
- Appropriate variants loaded for viewport
- No 404 errors
- Images display correctly

**Common Issues:**

- 404 errors → Check file paths, verify files exist
- Wrong variants → Check srcset and sizes attributes
- Broken images → Verify WebP format, check file integrity

### Phase 2: Functional Testing

#### 2.1 Interactive Elements Test

**Test Each Interactive Element:**

1. **CTA Buttons**

   - [ ] "Kostenlos testen" opens modal
   - [ ] "Pläne ansehen" links to /preise
   - [ ] Buttons styled correctly
   - [ ] Hover states work

2. **FAQ Accordion**

   - [ ] Click expands FAQ item
   - [ ] Click again collapses
   - [ ] Animation smooth
   - [ ] Multiple items can be open
   - [ ] Arrow rotates correctly

3. **Expandable Details**

   - [ ] Click expands section
   - [ ] Click again collapses
   - [ ] Animation smooth
   - [ ] Height synchronization works

4. **Comparison Carousel**

   - [ ] Left arrow navigates backward
   - [ ] Right arrow navigates forward
   - [ ] Pagination dots work
   - [ ] Auto-rotation works (6s interval)
   - [ ] Auto-rotation stops on interaction
   - [ ] Cards link to correct pages

5. **Mobile Carousel** (if applicable)
   - [ ] Swipe works
   - [ ] Navigation buttons work
   - [ ] Auto-rotation works

**Expected Result:**

- All interactions work smoothly
- No JavaScript errors
- Animations performant

**Common Issues:**

- Alpine.js not loaded → Check head.php include
- JavaScript errors → Check console, verify Alpine.js version
- Animations janky → Check CSS transitions, verify GPU acceleration

#### 2.2 Link Testing

**Test All Links:**

1. **Internal Links**

   - [ ] CTA buttons link correctly
   - [ ] Carousel cards link correctly
   - [ ] Footer links work
   - [ ] Navigation links work

2. **External Links** (if any)
   - [ ] Open in new tab (`target="_blank"`)
   - [ ] Use `rel="noopener"`
   - [ ] Links work correctly

**Expected Result:**

- All links functional
- Correct destinations
- No broken links

**Common Issues:**

- 404 errors → Check URL paths
- Wrong destinations → Verify link URLs
- Links not opening → Check target attributes

#### 2.3 Form Testing (if applicable)

**Test Lead Capture Form:**

- [ ] Form displays correctly
- [ ] All fields present
- [ ] Validation works
- [ ] Error messages display
- [ ] Success state works
- [ ] Submission works

**Expected Result:**

- Form functional
- Validation works
- Submission successful

### Phase 3: Responsive Design Testing

#### 3.1 Mobile Testing (375px)

**Test on Mobile Viewport:**

1. **Open Chrome DevTools**
2. **Toggle device toolbar** (Cmd/Ctrl + Shift + M)
3. **Select device:** iPhone SE (375px) or custom 375px
4. **Test each section:**

- [ ] Layout stacks vertically
- [ ] Text readable (no horizontal scroll)
- [ ] Images load appropriate sizes
- [ ] Carousel shows 1 card
- [ ] Touch targets adequate (44x44px minimum)
- [ ] Navigation works
- [ ] Forms usable
- [ ] No layout issues

**Expected Result:**

- Mobile layout works correctly
- Content readable
- Interactions work

**Common Issues:**

- Horizontal scroll → Check max-width constraints
- Text too small → Verify responsive typography
- Touch targets too small → Check CSS touch target sizing

#### 3.2 Tablet Testing (768px)

**Test on Tablet Viewport:**

- [ ] Layout adapts appropriately
- [ ] Carousel shows 2 cards
- [ ] Text readable
- [ ] Images appropriate sizes
- [ ] No layout issues
- [ ] Navigation works

**Expected Result:**

- Tablet layout works correctly
- Content readable
- Layout balanced

#### 3.3 Desktop Testing (1280px)

**Test on Desktop Viewport:**

- [ ] Full layout displays
- [ ] Carousel shows 4 cards
- [ ] Content centered appropriately
- [ ] No overflow issues
- [ ] Hover states work
- [ ] All features accessible

**Expected Result:**

- Desktop layout optimal
- Content well-organized
- Features accessible

#### 3.4 Large Desktop Testing (1920px)

**Test on Large Desktop:**

- [ ] Content remains centered
- [ ] Max-width constraints work
- [ ] No excessive whitespace
- [ ] Layout maintains proportions

**Expected Result:**

- Layout scales appropriately
- Content readable
- No layout issues

### Phase 4: Performance Testing

#### 4.1 Lighthouse Audit

**Steps:**

1. Open Chrome DevTools
2. Go to Lighthouse tab
3. Select "Performance", "Accessibility", "Best Practices", "SEO"
4. Select "Desktop" or "Mobile"
5. Click "Generate report"

**Performance Targets:**

- [ ] **Performance Score** > 90
- [ ] **LCP (Largest Contentful Paint)** < 2.5s
- [ ] **FID (First Input Delay)** < 100ms
- [ ] **CLS (Cumulative Layout Shift)** < 0.1
- [ ] **FCP (First Contentful Paint)** < 1.8s
- [ ] **TTI (Time to Interactive)** < 3.8s
- [ ] **Total Blocking Time** < 200ms
- [ ] **Speed Index** < 3.4s

**Accessibility Targets:**

- [ ] **Accessibility Score** > 90
- [ ] All images have alt attributes
- [ ] Color contrast sufficient
- [ ] ARIA labels present
- [ ] Keyboard navigation works

**Best Practices Targets:**

- [ ] **Best Practices Score** > 90
- [ ] HTTPS enabled
- [ ] No console errors
- [ ] No deprecated APIs

**SEO Targets:**

- [ ] **SEO Score** > 90
- [ ] Meta tags present
- [ ] Heading hierarchy correct
- [ ] Links crawlable

**Expected Result:**

- All scores meet targets
- No critical issues
- Performance optimized

**Common Issues:**

- Low LCP → Preload hero logo, optimize images
- High CLS → Add explicit image dimensions
- Low accessibility → Add alt attributes, improve contrast

#### 4.2 Network Analysis

**Steps:**

1. Open Chrome DevTools → Network tab
2. Reload page
3. Check resource loading:

- [ ] Images load efficiently
- [ ] CSS loads non-blocking
- [ ] JavaScript loads deferred/async
- [ ] No render-blocking resources
- [ ] Total page size reasonable

**Expected Result:**

- Resources load efficiently
- No render-blocking issues
- Page size optimized

#### 4.3 Core Web Vitals

**Measure Core Web Vitals:**

1. **LCP (Largest Contentful Paint)**

   - Target: < 2.5s
   - Measure: Time to render hero logo
   - Optimize: Preload logo, optimize image

2. **FID (First Input Delay)**

   - Target: < 100ms
   - Measure: Time to interactive
   - Optimize: Defer JavaScript, minimize main thread work

3. **CLS (Cumulative Layout Shift)**
   - Target: < 0.1
   - Measure: Layout stability
   - Optimize: Add explicit image dimensions, avoid dynamic content above fold

**Expected Result:**

- All Core Web Vitals meet targets
- Page feels fast and stable

### Phase 5: Schema Validation

#### 5.1 JSON Syntax Validation

**Steps:**

1. View page source
2. Copy JSON-LD script content
3. Paste into JSONLint: https://jsonlint.com/
4. Validate syntax

**Check:**

- [ ] Valid JSON syntax
- [ ] No trailing commas
- [ ] Proper quote escaping
- [ ] Valid structure

**Expected Result:**

- Valid JSON
- No syntax errors

#### 5.2 Google Rich Results Test

**Steps:**

1. Copy page URL or JSON-LD
2. Go to: https://search.google.com/test/rich-results
3. Paste URL or code
4. Click "Test URL" or "Test Code"
5. Review results

**Check:**

- [ ] No errors
- [ ] No warnings (or acceptable warnings)
- [ ] All schemas detected:
  - [ ] WebPage
  - [ ] Article
  - [ ] Table
  - [ ] Product (Ordio)
  - [ ] Product (Competitor)
  - [ ] SoftwareApplication
  - [ ] BreadcrumbList
  - [ ] FAQPage

**Expected Result:**

- All schemas validate
- No critical errors
- Rich results eligible

**Common Issues:**

- Missing required fields → Add to schema
- Invalid URLs → Fix URL format
- Invalid dates → Use ISO 8601 format

### Phase 6: Accessibility Testing

#### 6.1 axe DevTools Test

**Steps:**

1. Install axe DevTools extension
2. Open page
3. Open DevTools → axe DevTools tab
4. Click "Analyze"
5. Review violations

**Check:**

- [ ] No critical violations
- [ ] No serious violations (or acceptable)
- [ ] All images have alt attributes
- [ ] Color contrast sufficient
- [ ] ARIA labels present
- [ ] Keyboard navigation works

**Expected Result:**

- No critical accessibility issues
- Page accessible to all users

#### 6.2 Keyboard Navigation Test

**Steps:**

1. Tab through page
2. Verify focus states visible
3. Test all interactive elements
4. Verify logical tab order

**Check:**

- [ ] All interactive elements keyboard accessible
- [ ] Focus states visible
- [ ] Tab order logical
- [ ] Skip links work (if present)
- [ ] Forms keyboard navigable

**Expected Result:**

- Full keyboard navigation works
- Focus states clear
- Logical tab order

#### 6.3 Screen Reader Test

**Steps:**

1. Enable screen reader (VoiceOver/NVDA)
2. Navigate through page
3. Verify content readable
4. Check heading hierarchy
5. Verify form labels

**Check:**

- [ ] Content readable
- [ ] Heading hierarchy correct
- [ ] Images described
- [ ] Links descriptive
- [ ] Forms labeled

**Expected Result:**

- Screen reader friendly
- Content understandable
- Navigation logical

#### 6.4 Color Contrast Test

**Steps:**

1. Use color contrast checker: https://webaim.org/resources/contrastchecker/
2. Test text colors against backgrounds
3. Verify WCAG AA compliance

**Check:**

- [ ] Text contrast ≥ 4.5:1 (normal text)
- [ ] Text contrast ≥ 3:1 (large text)
- [ ] Interactive elements contrast sufficient

**Expected Result:**

- All text meets WCAG AA standards
- Colors accessible

### Phase 7: Cross-Browser Testing

#### 7.1 Chrome/Edge Testing

**Steps:**

1. Open page in Chrome
2. Test all features
3. Check console for errors
4. Verify performance

**Check:**

- [ ] Page renders correctly
- [ ] All features work
- [ ] Performance acceptable
- [ ] No console errors

#### 7.2 Firefox Testing

**Steps:**

1. Open page in Firefox
2. Test all features
3. Check console for errors
4. Verify CSS displays correctly

**Check:**

- [ ] Page renders correctly
- [ ] CSS displays correctly
- [ ] JavaScript works
- [ ] No console errors

#### 7.3 Safari Testing

**Steps:**

1. Open page in Safari
2. Test all features
3. Check console for errors
4. Verify CSS displays correctly

**Check:**

- [ ] Page renders correctly
- [ ] CSS displays correctly
- [ ] JavaScript works
- [ ] Touch interactions work (mobile)

#### 7.4 Mobile Browser Testing

**Test on Actual Devices:**

- [ ] iOS Safari
- [ ] Chrome Mobile (Android)
- [ ] Touch interactions work
- [ ] Responsive design works
- [ ] Performance acceptable

**Expected Result:**

- Works across all browsers
- Consistent experience
- No browser-specific issues

## Production Testing Procedure

### Phase 8: Pre-Deployment Checks

#### 8.1 Final Local Validation

Before deploying, verify:

- [ ] All local tests passed
- [ ] Schema validates
- [ ] Performance targets met
- [ ] No console errors
- [ ] Content reviewed
- [ ] Images optimized
- [ ] Links tested

#### 8.2 Deployment Checklist

- [ ] Files committed to git
- [ ] Branch merged (if applicable)
- [ ] Deployment process initiated
- [ ] Deployment successful

### Phase 9: Production Validation

#### 9.1 Post-Deployment Testing

**Steps:**

1. Navigate to production URL: `https://www.ordio.com/alternativen/{competitor}-vergleich`
2. Verify page loads
3. Run through quick validation checklist

**Check:**

- [ ] Page loads correctly
- [ ] All images load
- [ ] Schema validates (Google Rich Results Test)
- [ ] Performance acceptable
- [ ] No console errors
- [ ] Mobile experience works

#### 9.2 Production Performance Test

**Steps:**

1. Run PageSpeed Insights on production URL
2. Compare with local results
3. Verify performance metrics

**Check:**

- [ ] Performance score > 90
- [ ] Core Web Vitals meet targets
- [ ] No regression from local

#### 9.3 Production Schema Test

**Steps:**

1. Test schema on production URL
2. Verify all schemas validate
3. Check for production-specific issues

**Check:**

- [ ] All schemas validate
- [ ] URLs correct (production domain)
- [ ] No errors

#### 9.4 Google Search Console

**Steps:**

1. Submit URL to Google Search Console
2. Monitor for errors
3. Check indexing status

**Check:**

- [ ] URL submitted
- [ ] No crawl errors
- [ ] Indexing successful (after time)

## Testing Documentation

### Test Results Template

Document test results:

```
Page: compare_{competitor}.php
Date: YYYY-MM-DD
Tester: [Name]

Local Testing:
- Visual: ✅ Pass / ❌ Fail
- Functional: ✅ Pass / ❌ Fail
- Responsive: ✅ Pass / ❌ Fail
- Performance: ✅ Pass / ❌ Fail (Score: XX)
- Schema: ✅ Pass / ❌ Fail
- Accessibility: ✅ Pass / ❌ Fail

Production Testing:
- Load: ✅ Pass / ❌ Fail
- Performance: ✅ Pass / ❌ Fail (Score: XX)
- Schema: ✅ Pass / ❌ Fail

Issues Found:
- [List any issues]

Resolved:
- [List resolved issues]
```

### Issue Tracking

**Document Issues:**

1. **Issue Description**
2. **Steps to Reproduce**
3. **Expected Behavior**
4. **Actual Behavior**
5. **Browser/Device**
6. **Screenshots** (if applicable)
7. **Priority** (Critical/High/Medium/Low)
8. **Status** (Open/In Progress/Resolved)

## Continuous Testing

### Regular Testing Schedule

**New Pages:**

- Full test suite before publishing
- Production validation after deployment

**Updated Pages:**

- Focused testing on changed sections
- Regression testing for related areas

**Quarterly Review:**

- Full test suite on sample pages
- Performance audit
- Accessibility audit
- Schema validation

### Automated Testing Opportunities

**Potential Automation:**

1. **Schema Validation**

   - Script to extract and validate JSON-LD
   - Check required fields
   - Validate URLs

2. **Link Checking**

   - Verify all links functional
   - Check for broken links
   - Validate external links

3. **Image Validation**

   - Check all variants exist
   - Verify image dimensions
   - Check file sizes

4. **Performance Monitoring**
   - Automated Lighthouse audits
   - Core Web Vitals tracking
   - Performance regression detection

## Testing Best Practices

1. **Test Early and Often**

   - Test during development
   - Don't wait until end

2. **Test on Real Devices**

   - Use actual mobile devices when possible
   - Test on different browsers

3. **Document Issues**

   - Keep track of issues found
   - Document resolutions

4. **Regression Testing**

   - Test related pages when making changes
   - Verify no unintended side effects

5. **Performance Budget**

   - Set performance budgets
   - Monitor for regressions

6. **Accessibility First**
   - Test accessibility early
   - Fix issues before launch

## Troubleshooting Common Test Failures

### Performance Issues

**LCP Too High:**

- Preload hero logo
- Optimize images
- Reduce render-blocking resources

**CLS Too High:**

- Add explicit image dimensions
- Avoid dynamic content above fold
- Preload fonts

**Low Performance Score:**

- Optimize images
- Defer non-critical CSS/JS
- Minimize third-party scripts

### Schema Issues

**Validation Errors:**

- Check JSON syntax
- Verify required fields
- Fix invalid URLs
- Use correct date formats

### Accessibility Issues

**Missing Alt Attributes:**

- Add descriptive alt text
- Use empty alt for decorative images

**Color Contrast:**

- Adjust colors to meet WCAG AA
- Test with contrast checker

**Keyboard Navigation:**

- Ensure all interactive elements keyboard accessible
- Add focus states
- Fix tab order

## Test Completion Criteria

Page is ready for production when:

1. ✅ All visual tests pass
2. ✅ All functional tests pass
3. ✅ Responsive design works on all viewports
4. ✅ Performance score > 90
5. ✅ Schema validates (no errors)
6. ✅ Accessibility score > 90
7. ✅ No console errors
8. ✅ Cross-browser testing passed
9. ✅ Production validation passed
10. ✅ Content reviewed and approved