# Comparison Pages Testing Guide


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

## Overview

This guide provides comprehensive testing procedures for optimized comparison pages to ensure quality, performance, and functionality.

## Pre-Testing Setup

### 1. Start Local Server

```bash
# Navigate to project directory
cd /Users/hadyelhady/Documents/GitHub/landingpage

# Start PHP development server (if not already running)
php -S localhost:8003
```

### 2. Test Pages

Access optimized templates:
- `http://localhost:8003/v2/pages/compare_template_nodetails.php`
- `http://localhost:8003/v2/pages/compare_template_details.php`

Or test actual comparison pages:
- `http://localhost:8003/v2/pages/compare_7shifts.php`
- `http://localhost:8003/v2/pages/compare_clockin.php`
- `http://localhost:8003/v2/pages/compare_personio.php`

## Functional Testing

### JavaScript Functionality

**Test Checklist:**
- [ ] SVG rotation on scroll works (`id="rotating-element"`)
- [ ] Timer text updates on scroll (`id="time-text"`)
- [ ] Progress circle animates (`id="progress-circle"`)
- [ ] Euro amount updates (`id="euro-amount"`)
- [ ] FAQ arrows animate on toggle
- [ ] Rating bar tooltips appear on hover
- [ ] Tooltips follow cursor movement
- [ ] Keyboard navigation works (Enter/Space on tooltips)
- [ ] No console errors

**Test Steps:**
1. Open browser DevTools (F12)
2. Check Console tab for errors
3. Scroll page to trigger animations
4. Hover over rating bars
5. Click FAQ items to expand/collapse
6. Test keyboard navigation (Tab, Enter, Space)

### Alpine.js Functionality

**Test Checklist:**
- [ ] Height synchronization works (Ordio Details aligns with competitor)
- [ ] Expandable details section opens/closes
- [ ] Height updates correctly on expand/collapse
- [ ] Mobile view works correctly

**Test Steps:**
1. Check that Ordio Details section height matches competitor column
2. Click "Details" button (if using details template)
3. Verify height adjusts smoothly
4. Test on mobile viewport (resize browser)

### Visual Regression Testing

**Test Checklist:**
- [ ] Layout matches original design
- [ ] Images load correctly
- [ ] Logos display properly
- [ ] Star ratings show correctly
- [ ] Comparison grid aligns properly
- [ ] Colors and spacing correct
- [ ] Typography renders correctly

**Test Steps:**
1. Compare optimized page with original (if available)
2. Check all images load (no broken images)
3. Verify logo sizing and positioning
4. Check star rating display
5. Inspect grid alignment
6. Verify responsive breakpoints

## Performance Testing

### Lighthouse Testing

**Run Lighthouse:**
1. Open Chrome DevTools (F12)
2. Go to "Lighthouse" tab
3. Select "Performance" and "Best Practices"
4. Click "Generate report"
5. Review scores and recommendations

**Target Scores:**
- Performance: >90
- Accessibility: >90
- Best Practices: >90
- SEO: >90

**Key Metrics:**
- LCP (Largest Contentful Paint): <2.5s
- FID (First Input Delay): <100ms
- CLS (Cumulative Layout Shift): <0.1
- TTI (Time to Interactive): <3.8s

### PageSpeed Insights

**Test Online:**
1. Go to https://pagespeed.web.dev/
2. Enter page URL
3. Run test for Mobile and Desktop
4. Review recommendations

**Key Metrics:**
- Mobile Performance: >90
- Desktop Performance: >95
- Core Web Vitals: All "Good"

### Network Analysis

**Test Steps:**
1. Open DevTools → Network tab
2. Reload page (Cmd+R / Ctrl+R)
3. Check:
   - Total requests count
   - Total transfer size
   - Load time
   - JavaScript file sizes
   - CSS file sizes

**Expected Results:**
- `comparison-pages.min.js`: ~3.2KB (gzipped: ~1.5KB)
- `comparison-pages.min.css`: Check size
- No duplicate requests
- Proper caching headers

## HTML Validation

### W3C HTML Validator

**Test Steps:**
1. Go to https://validator.w3.org/
2. Enter page URL or upload HTML
3. Review errors and warnings
4. Fix any critical errors

**Acceptable:**
- Warnings about vendor prefixes (normal)
- Warnings about experimental features (if intentional)

**Must Fix:**
- Syntax errors
- Missing required attributes
- Invalid nesting
- Missing closing tags

## Schema Validation

### Google Rich Results Test

**Test Steps:**
1. Go to https://search.google.com/test/rich-results
2. Enter page URL
3. Review schema validation results
4. Check for errors or warnings

**Required Schemas:**
- WebPage
- Article
- FAQPage (if FAQ section present)
- BreadcrumbList
- Organization

**Validation Checklist:**
- [ ] All required fields present
- [ ] URLs are absolute and correct
- [ ] Dates use ISO 8601 format
- [ ] No duplicate schemas
- [ ] All schemas valid

## Cross-Browser Testing

### Browser Compatibility

**Test Browsers:**
- [ ] Chrome (latest)
- [ ] Firefox (latest)
- [ ] Safari (latest)
- [ ] Edge (latest)
- [ ] Mobile Safari (iOS)
- [ ] Chrome Mobile (Android)

**Test Checklist:**
- [ ] Layout renders correctly
- [ ] JavaScript works
- [ ] Animations work
- [ ] Interactive elements function
- [ ] No console errors
- [ ] Performance acceptable

## Responsive Testing

### Device Testing

**Test Viewports:**
- [ ] Mobile (375px × 667px)
- [ ] Tablet (768px × 1024px)
- [ ] Desktop (1920px × 1080px)
- [ ] Large Desktop (2560px × 1440px)

**Test Checklist:**
- [ ] Layout adapts correctly
- [ ] Text is readable
- [ ] Images scale properly
- [ ] Navigation works
- [ ] Touch targets adequate (44×44px minimum)
- [ ] No horizontal scrolling

**Chrome DevTools:**
1. Open DevTools (F12)
2. Click device toggle (Cmd+Shift+M / Ctrl+Shift+M)
3. Test different device presets
4. Check responsive breakpoints

## Text-HTML Ratio Testing

### Measurement

**Using Analysis Script:**
```bash
python3 scripts/analyze-text-html-ratio.py
```

**Expected Results:**
- Text-HTML Ratio: >25% (target)
- HTML Size: <600KB (after optimizations)
- Text Content: >6,000 characters

**Manual Calculation:**
1. View page source
2. Count HTML tags
3. Extract text content
4. Calculate: (text_size / html_size) × 100

## Accessibility Testing

### WCAG Compliance

**Test Checklist:**
- [ ] All images have alt text
- [ ] Headings follow hierarchy (H1 → H2 → H3)
- [ ] Color contrast meets WCAG AA (4.5:1)
- [ ] Focus states visible
- [ ] Keyboard navigation works
- [ ] Screen reader compatible

**Tools:**
- WAVE Browser Extension
- axe DevTools
- Lighthouse Accessibility audit

## Regression Testing

### All Comparison Pages

**Test Strategy:**
1. Test 5-10 random comparison pages
2. Verify no visual regressions
3. Check functionality works
4. Verify performance maintained

**Pages to Test:**
- `compare_7shifts.php`
- `compare_clockin.php`
- `compare_personio.php`
- `compare_aplano.php`
- `compare_planday.php`

**Test Checklist:**
- [ ] Page loads without errors
- [ ] Layout correct
- [ ] JavaScript works
- [ ] Images load
- [ ] Schema valid
- [ ] Performance acceptable

## Automated Testing Scripts

### Run Analysis Scripts

```bash
# HTML contributors analysis
python3 scripts/analyze-html-contributors.py

# Text-HTML ratio analysis
python3 scripts/analyze-text-html-ratio.py

# SVG extraction (if needed)
python3 scripts/extract-svgs-from-templates.py
```

## Common Issues & Solutions

### JavaScript Not Loading

**Symptoms:**
- Animations don't work
- Console errors about undefined functions

**Solutions:**
1. Check script path is correct
2. Verify file exists: `/v2/js/comparison-pages.min.js`
3. Check browser console for 404 errors
4. Verify `defer` attribute present

### SVG Not Displaying

**Symptoms:**
- Missing icons
- Broken images

**Solutions:**
1. Check SVG file paths
2. Verify files exist in `/v2/img/svg/`
3. Check sprite sheet references
4. Verify SVG syntax valid

### Performance Issues

**Symptoms:**
- Slow page load
- High LCP time
- Large file sizes

**Solutions:**
1. Check JavaScript is minified
2. Verify CSS is minified
3. Check image optimization
4. Review network waterfall
5. Enable gzip/brotli compression

### Schema Errors

**Symptoms:**
- Google Rich Results Test shows errors
- Missing structured data

**Solutions:**
1. Validate JSON-LD syntax
2. Check all required fields present
3. Verify URLs are absolute
4. Check date formats (ISO 8601)

## Testing Checklist Summary

### Before Deployment
- [ ] Functional testing complete
- [ ] Visual regression testing complete
- [ ] Performance testing complete (Lighthouse >90)
- [ ] HTML validation passed
- [ ] Schema validation passed
- [ ] Cross-browser testing complete
- [ ] Responsive testing complete
- [ ] Accessibility testing complete
- [ ] Text-HTML ratio measured (>25%)
- [ ] No console errors
- [ ] All images load
- [ ] All links work

### After Deployment
- [ ] Monitor performance metrics
- [ ] Check Google Search Console
- [ ] Verify page loads in production
- [ ] Test all interactive elements
- [ ] Monitor error logs

## Reporting Issues

When reporting issues, include:
1. Browser and version
2. Device/viewport size
3. Steps to reproduce
4. Expected vs actual behavior
5. Console errors (if any)
6. Screenshots (if visual issue)

## Quick Test Commands

```bash
# Start server
php -S localhost:8003

# Run analysis
python3 scripts/analyze-html-contributors.py
python3 scripts/analyze-text-html-ratio.py

# Check file sizes
ls -lh v2/js/comparison-pages.min.js
ls -lh v2/css/comparison-pages.min.css

# Validate HTML (requires w3c-validator)
# Install: pip install w3c-validator
# w3c-validator http://localhost:8003/v2/pages/compare_template_nodetails.php
```