# Pricing Page Testing Guide

**Last Updated:** 2026-04-02

## Overview

This guide provides comprehensive testing instructions for the new pricing page (`v2/pages/static_pricing_new.php`).

## Quick Start

### Local Testing

1. **Environment:** Use the project Docker stack (or your usual server) on port **8003**. Do **not** run `php -S localhost:8003` — it conflicts with Docker (see `.cursor/rules/global.mdc`).

2. **Access the page**:

   - Canonical: `http://localhost:8003/preise` → `static_pricing_new.php`
   - Direct PHP path (if needed): `http://localhost:8003/v2/pages/static_pricing_new.php`
   - Legacy only: `http://localhost:8003/v2/pages/static_pricing.php` (not canonical `/preise`)

3. **Run automated checks**:
   ```bash
   node scripts/validate-pricing-page.js
   ```

## Automated Validation

### Pre-Deployment Checks

Run the validation script to check for common issues:

```bash
node scripts/validate-pricing-page.js
```

This checks:

- ✅ File existence
- ✅ No console statements in production code
- ✅ Minified files exist
- ✅ Schema markup validity
- ✅ Image optimization
- ✅ Accessibility attributes

## Visual Testing

### Desktop Browsers

Test on the following browsers at 1920x1080, 1366x768, and 1280x720:

#### Chrome (Latest)

- [ ] Page loads correctly
- [ ] All sections visible
- [ ] Pricing toggle works
- [ ] Modals open/close
- [ ] Animations smooth
- [ ] No console errors
- [ ] Images load correctly

#### Firefox (Latest)

- [ ] Page loads correctly
- [ ] All sections visible
- [ ] Pricing toggle works
- [ ] Modals open/close
- [ ] Animations smooth
- [ ] No console errors
- [ ] Images load correctly

#### Safari (Latest)

- [ ] Page loads correctly
- [ ] All sections visible
- [ ] Pricing toggle works
- [ ] Modals open/close
- [ ] Animations smooth
- [ ] No console errors
- [ ] Images load correctly

#### Edge (Latest)

- [ ] Page loads correctly
- [ ] All sections visible
- [ ] Pricing toggle works
- [ ] Modals open/close
- [ ] Animations smooth
- [ ] No console errors
- [ ] Images load correctly

### Mobile Devices

#### iOS Safari

Test on iPhone (various models):

- [ ] Page loads correctly
- [ ] Responsive layout works
- [ ] Touch interactions work
- [ ] Pricing toggle works
- [ ] Modals open/close
- [ ] Forms are usable
- [ ] Text is readable

#### Android Chrome

Test on Android devices:

- [ ] Page loads correctly
- [ ] Responsive layout works
- [ ] Touch interactions work
- [ ] Pricing toggle works
- [ ] Modals open/close
- [ ] Forms are usable
- [ ] Text is readable

### Responsive Breakpoints

Test at these viewport widths:

- [ ] 320px (Mobile small)
- [ ] 375px (Mobile standard)
- [ ] 768px (Tablet)
- [ ] 1024px (Tablet landscape)
- [ ] 1280px (Desktop)
- [ ] 1920px (Desktop large)

For each breakpoint, verify:

- [ ] Layout doesn't break
- [ ] Text is readable
- [ ] Buttons are tappable (min 44x44px)
- [ ] Images scale correctly
- [ ] Navigation works
- [ ] Forms are usable

## Performance Testing

### PageSpeed Insights

1. **Access PageSpeed Insights**: https://pagespeed.web.dev/
2. **Test URL**: `https://www.ordio.com/preise` (after deployment)
3. **Target Scores**:
   - Mobile: > 90
   - Desktop: > 90

#### Key Metrics to Check

**LCP (Largest Contentful Paint)**

- Target: < 2.5s
- Check: Hero image or main content loads quickly

**FID (First Input Delay)**

- Target: < 100ms
- Check: Pricing toggle responds immediately

**CLS (Cumulative Layout Shift)**

- Target: < 0.1
- Check: No layout shifts during page load

**FCP (First Contentful Paint)**

- Target: < 1.8s
- Check: First content appears quickly

**TTI (Time to Interactive)**

- Target: < 3.8s
- Check: Page becomes interactive quickly

### Chrome DevTools Performance

1. Open Chrome DevTools (F12)
2. Go to Performance tab
3. Click Record
4. Reload page
5. Stop recording after page loads
6. Check:
   - [ ] No long tasks (> 50ms)
   - [ ] No layout thrashing
   - [ ] Images load efficiently
   - [ ] JavaScript execution time < 1s

### Network Analysis

1. Open Chrome DevTools (F12)
2. Go to Network tab
3. Reload page
4. Check:
   - [ ] Total page size < 2MB
   - [ ] CSS files minified
   - [ ] JavaScript files minified
   - [ ] Images optimized (WebP where possible)
   - [ ] No 404 errors
   - [ ] All resources load successfully

## Accessibility Testing

### Automated Tools

#### WAVE (Web Accessibility Evaluation Tool)

1. Install WAVE browser extension
2. Navigate to pricing page
3. Click WAVE icon
4. Check for:
   - [ ] No errors (red icons)
   - [ ] Minimal warnings (yellow icons)
   - [ ] Proper heading structure
   - [ ] Alt text on images
   - [ ] Form labels present

#### axe DevTools

1. Install axe DevTools extension
2. Navigate to pricing page
3. Open DevTools → axe DevTools tab
4. Click "Scan"
5. Review violations:
   - [ ] No critical violations
   - [ ] Minimal moderate violations
   - [ ] Fix all violations

#### Lighthouse Accessibility Audit

1. Open Chrome DevTools (F12)
2. Go to Lighthouse tab
3. Select "Accessibility"
4. Click "Generate report"
5. Target: Score > 90

### Manual Testing

#### Keyboard Navigation

1. Tab through the page
2. Verify:
   - [ ] All interactive elements are focusable
   - [ ] Focus indicators are visible
   - [ ] Tab order is logical
   - [ ] Can activate all buttons/links
   - [ ] Can close modals with Escape
   - [ ] Can navigate pricing toggle with arrow keys

#### Screen Reader Testing

**NVDA (Windows)**

1. Install NVDA
2. Navigate to pricing page
3. Use screen reader to:
   - [ ] Read page title
   - [ ] Navigate headings (H key)
   - [ ] Navigate links (L key)
   - [ ] Navigate buttons (B key)
   - [ ] Navigate forms (F key)
   - [ ] Verify all content is announced

**VoiceOver (macOS/iOS)**

1. Enable VoiceOver (Cmd+F5)
2. Navigate to pricing page
3. Use VoiceOver to:
   - [ ] Read page title
   - [ ] Navigate headings
   - [ ] Navigate links
   - [ ] Navigate buttons
   - [ ] Navigate forms
   - [ ] Verify all content is announced

#### Color Contrast

1. Use WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
2. Check:
   - [ ] Text on background meets WCAG AA (4.5:1)
   - [ ] Large text meets WCAG AA (3:1)
   - [ ] Interactive elements have sufficient contrast
   - [ ] Focus indicators are visible

## Functional Testing

### Pricing Toggle

1. **Initial State**:

   - [ ] Defaults to yearly (or respects URL parameter)
   - [ ] Correct prices displayed
   - [ ] Active button highlighted

2. **Toggle to Monthly**:

   - [ ] Click monthly button
   - [ ] Prices update with animation
   - [ ] URL updates to `?p=monthly`
   - [ ] Analytics event fires

3. **Toggle to Yearly**:

   - [ ] Click yearly button
   - [ ] Prices update with animation
   - [ ] URL updates to `?p=yearly`
   - [ ] Analytics event fires

4. **URL Parameter**:
   - [ ] `?p=monthly` shows monthly prices
   - [ ] `?p=yearly` shows yearly prices
   - [ ] Invalid parameter defaults to yearly

### Enterprise Modal

1. **Open Modal**:

   - [ ] Click "Anfrage stellen" button
   - [ ] Modal opens with animation
   - [ ] Body scroll locked
   - [ ] Message field pre-filled

2. **Close Modal**:

   - [ ] Click X button
   - [ ] Click overlay
   - [ ] Press Escape key
   - [ ] Body scroll restored
   - [ ] Form resets

3. **Form Submission**:
   - [ ] Fill all required fields
   - [ ] Submit form
   - [ ] Loading state shows
   - [ ] Success message displays
   - [ ] Modal closes
   - [ ] UTM data included

### Add-ons Modals

For each add-on:

- [ ] Modal opens correctly
- [ ] Modal closes correctly
- [ ] Form submission works
- [ ] UTM tracking included

### Feature Comparison Table

- [ ] Table displays correctly
- [ ] Sticky header works on scroll
- [ ] Collapsible sections expand/collapse
- [ ] Mobile experience is usable
- [ ] All features visible

### FAQ Section

- [ ] Accordion items expand/collapse
- [ ] Keyboard navigation works
- [ ] Screen reader announces state
- [ ] Animations smooth

## Browser-Specific Issues

### Known Issues to Watch For

#### Safari

- [ ] CSS backdrop-filter works
- [ ] Sticky positioning works
- [ ] Form validation works

#### Firefox

- [ ] CSS animations smooth
- [ ] Modal backdrop blur works
- [ ] Form styling consistent

#### Edge

- [ ] All features work
- [ ] No layout issues
- [ ] Performance acceptable

## Testing Checklist Summary

### Pre-Deployment

- [ ] All automated checks pass
- [ ] No console errors
- [ ] All files minified
- [ ] Images optimized
- [ ] Schema markup valid

### Visual Testing

- [ ] Tested on 4+ browsers
- [ ] Tested on mobile devices
- [ ] Tested at all breakpoints
- [ ] No layout issues

### Performance Testing

- [ ] PageSpeed score > 90
- [ ] LCP < 2.5s
- [ ] FID < 100ms
- [ ] CLS < 0.1

### Accessibility Testing

- [ ] WAVE audit passed
- [ ] axe DevTools passed
- [ ] Lighthouse score > 90
- [ ] Keyboard navigation works
- [ ] Screen reader tested
- [ ] Color contrast verified

### Functional Testing

- [ ] Pricing toggle works
- [ ] All modals work
- [ ] Forms submit correctly
- [ ] Analytics tracking works
- [ ] UTM tracking works

## Post-Deployment Monitoring

After deployment, monitor:

- [ ] Analytics for pricing toggle usage
- [ ] Form submission rates
- [ ] JavaScript errors (Google Analytics)
- [ ] Page load times
- [ ] User feedback

## Reporting Issues

When reporting issues, include:

1. Browser and version
2. Device/OS
3. Viewport size
4. Steps to reproduce
5. Expected vs actual behavior
6. Screenshots/videos
7. Console errors (if any)