ListenLayer Static HTML Test Site - Phase 1
Comprehensive documentation of all test scenarios, coverage, and expected behaviors
| Page | PRD Ref | Scenario | Expected Behavior | Future Tracking Validation |
|---|---|---|---|---|
| 302-redirect.html | FR-1.1 | HTTP 302 temporary redirect after form submission | Form submits ā Cloud Function returns 302 ā browser navigates to thank-you page | Verify tracking captures form data before redirect |
| 303-redirect.html | FR-1.1 | HTTP 303 See Other redirect | Form submits ā Cloud Function returns 303 ā method changes to GET | Verify tracking captures form data before method change |
| 307-redirect.html | FR-1.1 | HTTP 307 temporary redirect (preserves method) | Form submits ā Cloud Function returns 307 ā POST method preserved | Verify tracking handles method preservation |
| 308-redirect.html | FR-1.1 | HTTP 308 permanent redirect | Form submits ā Cloud Function returns 308 ā browser caches redirect | Verify tracking persists across cached redirects |
| delayed-redirect.html | FR-1.2 | 3-second delayed server redirect | Form submits ā Cloud Function waits 3s ā returns 302 | Verify tracking completes before redirect (timeout test) |
| chain-redirect.html | FR-1.3 | Multi-hop redirect chain (3 hops) | Form ā Processing ā Intermediate ā Final destination | Verify tracking persists through redirect chains |
| js-window-location.html | FR-1.4 | JavaScript redirect using window.location | Form submits ā AJAX response ā window.location = "/thank-you" | Verify sendBeacon() or fetch keepalive fires before navigation |
| js-location-href.html | FR-1.4 | JavaScript redirect using location.href | Form submits ā AJAX response ā location.href assignment | Verify tracking completes before navigation |
| js-location-replace.html | FR-1.4 | JavaScript redirect using location.replace() | Form submits ā location.replace() ā no history entry | Verify tracking fires before replace() executes |
| js-location-assign.html | FR-1.4 | JavaScript redirect using location.assign() | Form submits ā location.assign() ā adds history entry | Verify tracking completes before assign() |
| js-immediate.html | FR-1.5 | Immediate JavaScript redirect (no delay) | Form submits ā instant redirect (race condition test) | Verify sendBeacon() wins race against immediate navigation |
| js-delayed.html | FR-1.5 | Delayed JavaScript redirect (3 seconds) | Form submits ā "Processing..." ā redirect after 3s | Verify tracking completes during delay window |
| js-conditional.html | FR-1.6 | Conditional redirect based on AJAX response | Form submits ā JSON response determines destination | Verify tracking captures actual destination URL |
| meta-refresh.html | FR-1.7 | Meta refresh tag redirect | Form submits ā server returns HTML with <meta refresh> | Verify tracking fires before meta refresh navigation |
| meta-refresh-only.html | FR-1.7 | Meta refresh as sole redirect mechanism | No JavaScript fallback, meta tag only | Verify tracking works without JS |
| hybrid-server-js.html | FR-1.8 | Hybrid: Server redirect with JavaScript fallback | Try server redirect first, JS fallback if needed | Verify tracking fires once (no duplicates) |
| hybrid-ajax-server.html | FR-1.8 | Hybrid: AJAX submission with server redirect response | AJAX POST ā server returns redirect instruction | Verify tracking captures both AJAX and redirect |
| hybrid-processing-page.html | FR-1.9 | Real processing page pattern (common in payment flows) | Form ā processing.html ā final destination | Verify tracking persists through processing page |
| hybrid-processing-simulated.html | FR-1.9 | Simulated processing page (shows spinner, then redirects) | Loading UI ā setTimeout ā redirect | Verify tracking completes during loading state |
| hybrid-meta-js.html | FR-1.10 | Dual redirect: Meta refresh + JavaScript | Both meta tag and JS redirect present (race condition) | Verify tracking fires once despite dual mechanisms |
| processing.html | FR-1.11 | Shared processing intermediate page | Displays "Processing..." then redirects to destination | Verify tracking tracks intermediate page visit |
| server-validation.html | FR-2.1 | Server-side validation error handling | Form submits ā Cloud Function returns error JSON | Verify tracking captures error state and messages |
| client-validation.html | FR-2.2 | Client-side validation before submission | Form validates ā shows errors ā prevents submission | Verify tracking captures validation failures |
| error-page.html | FR-2.3 | Error destination page | Displayed when form submission fails | Verify error page visit is tracked |
| retry.html | FR-2.4 | Retry after error pattern | User can retry failed submission | Verify tracking captures retry attempts |
| thank-you.html | FR-3.1 | Standard thank you page | Successful form submission destination | Verify conversion tracking fires on this page |
| thank-you-offer.html | FR-3.2 | Thank you page with offer/upsell | Shows special offer after submission | Verify offer view is tracked separately |
| thank-you-download.html | FR-3.3 | Thank you page with automatic download | Triggers file download after submission | Verify download event is tracked |
| Page | PRD Ref | Scenario | Expected Behavior | Future Tracking Validation |
|---|---|---|---|---|
| beacon-validator.html | FR-4.1 | Validate sendBeacon() fires before navigation | Phase 2: Will test beacon arrival at server | Log beacon requests server-side, verify 100% delivery rate |
| keepalive-validator.html | FR-4.2 | Validate fetch keepalive completes during redirect | Phase 2: Will test keepalive persistence | Verify fetch completes even after page unload |
| persistence-validator.html | FR-4.3 | Validate sessionStorage persists across redirects | Phase 2: Will test session persistence | Verify form data survives redirect chains |
| Page | PRD Ref | Scenario | Expected Behavior | Future Tracking Validation |
|---|---|---|---|---|
| hubspot-form.html | FR-5.1 | Visual mock of HubSpot form | Mimics HubSpot form styling and behavior | Replace with real HubSpot embed when credentials available |
| marketo-form.html | FR-5.2 | Visual mock of Marketo form | Mimics Marketo form patterns | Replace with real Marketo form when available |
| pardot-form.html | FR-5.3 | Visual mock of Pardot form | Mimics Pardot (Salesforce) form handler | Replace with real Pardot form when available |
| mailchimp-form.html | FR-5.4 | Visual mock of Mailchimp form | Mimics Mailchimp embedded form | Replace with real Mailchimp embed when available |
| google-forms.html | FR-5.5 | Visual mock of Google Forms | Mimics Google Forms appearance | Can use real Google Form (public, no auth required) |
| typeform.html | FR-5.6 | Visual mock of Typeform | Mimics Typeform conversational interface | Replace with real Typeform embed when available |
| gravity-forms.html | FR-5.7 | Visual mock of Gravity Forms (WordPress) | Mimics Gravity Forms patterns | Requires WordPress instance for real form |
| contact-form-7.html | FR-5.8 | Visual mock of Contact Form 7 (WordPress) | Mimics CF7 default styling | Requires WordPress instance for real form |
| activecampaign-form.html | FR-5.9 | Visual mock of ActiveCampaign form | Mimics ActiveCampaign embedded form | Replace with real ActiveCampaign form when available |
| calendly.html | FR-5.10 | Visual mock of Calendly scheduling | Mimics Calendly booking interface | Replace with real Calendly embed when available |
| Page | PRD Ref | Scenario | Expected Behavior | Future Tracking Validation |
|---|---|---|---|---|
| script-async.html | FR-6.1 | Tracking script loaded with async attribute | Script loads without blocking page render | Verify tracking initializes after DOM ready |
| script-defer.html | FR-6.2 | Tracking script loaded with defer attribute | Script executes after DOM parsed | Verify tracking captures early form interactions |
| script-placement.html | FR-6.3 | Script in <head> vs <body> | Tests different script placement patterns | Verify tracking works regardless of placement |
| script-dynamic.html | FR-6.4 | Script injected dynamically via JavaScript | createElement + appendChild pattern | Verify tracking initializes after dynamic injection |
| script-error.html | FR-6.5 | Script load failure with fallback | Primary CDN fails, fallback to secondary | Verify fallback mechanism works |
| script-conflicts.html | FR-6.6 | Multiple tracking scripts on same page | ListenLayer + GTM + GA coexist | Verify no namespace collisions |
| Page | PRD Ref | Scenario | Expected Behavior | Future Tracking Validation |
|---|---|---|---|---|
| network-slow.html | FR-7.1 | Slow network connection (3s delay) | Artificial setTimeout to simulate latency | Verify tracking completes within timeout window |
| network-timeout.html | FR-7.2 | Request timeout with retry logic | AbortController with increasing timeouts (2sā5sā10s) | Verify tracking retries on timeout |
| network-offline.html | FR-7.3 | Offline detection and queue management | navigator.onLine + queue + retry on online event | Verify tracking queues when offline, sends when online |
| network-cors.html | FR-7.4 | CORS error handling with fallback | Attempt cross-origin, fallback to same-origin | Verify tracking handles CORS failures gracefully |
| network-csp.html | FR-7.5 | Content Security Policy compliance | CSP meta tag enforces restrictions | Verify tracking complies with CSP directives |
| network-large-payload.html | FR-7.6 | Large form data payload handling | Real-time size calculation, visual meter (50KB threshold) | Verify tracking handles large payloads (compression/chunking) |
| Page | PRD Ref | Scenario | Expected Behavior | Future Tracking Validation |
|---|---|---|---|---|
| dom-dynamic-form.html | FR-8.1 | Form created dynamically after page load | 3-second countdown, then createElement form | Verify tracking detects and attaches to dynamic forms |
| dom-dynamic-fields.html | FR-8.2 | Fields added/removed dynamically | Buttons to add phone field, remove email field | Verify tracking captures dynamic field changes |
| dom-form-replacement.html | FR-8.3 | Form completely replaced with new version | Remove old form, create new form (v1āv2āv3) | Verify tracking re-attaches to replaced forms |
| dom-shadow-dom.html | FR-8.4 | Form inside Web Component Shadow DOM | Custom element with attachShadow({ mode: 'open' }) | Verify tracking can access Shadow DOM forms |
| dom-iframe.html | FR-8.5 | Form inside same-origin iframe | srcdoc iframe with postMessage communication | Verify tracking detects iframe forms |
| dom-mutation-observer.html | FR-8.6 | MutationObserver pattern demonstration | Logs all DOM changes (adds, removes, attributes) | Verify tracking uses MutationObserver for dynamic detection |
| Page | PRD Ref | Scenario | Expected Behavior | Future Tracking Validation |
|---|---|---|---|---|
| fields-conditional.html | FR-9.1 | Conditional field visibility (business vs individual) | Show/hide fields, dynamic required attributes, hidden fields | Verify tracking captures visible AND hidden fields at submission time |
| fields-file-upload.html | FR-9.2 | File upload inputs (single, multiple, different types) | File metadata extraction (name, size, type) without content | Verify tracking captures file metadata, NEVER file content (privacy) |
| fields-multi-step.html | FR-9.3 | 3-step wizard: Personal ā Contact ā Review | Data persists in JavaScript object, review shows all | Verify tracking captures data from ALL steps, not just final step |
| fields-complex-inputs.html | FR-9.4 | HTML5 input types: color, range, date/time, search, url, tel | Real-time value displays, all 9 HTML5 input types | Verify tracking correctly captures all HTML5 input type values |
| Page | PRD Ref | Scenario | Expected Behavior | Future Tracking Validation |
|---|---|---|---|---|
| custom-form.html | Phase 0 | Single-step contact form | Basic form submission test | Baseline tracking test |
| multi-step-2.html | Phase 0 | 2-step wizard | Contact + Company info | Multi-step tracking |
| multi-step-3.html | Phase 0 | 3-step wizard | Personal + Company + Preferences | Complex multi-step tracking |
| conditional-fields.html | Phase 0 | Conditional field visibility | Show/hide based on selection | Conditional field tracking |
| file-upload.html | Phase 0 | Drag & drop file upload | File upload with preview | File upload tracking |
| payment-mock.html | Phase 0 | Mock credit card fields | Simulated payment form | PCI-compliant tracking (no card data) |
| validation-test.html | Phase 0 | Validation error tracking | Client-side validation | Error tracking |
| hubspot-mock.html | Phase 0 | HubSpot form mock | Visual HubSpot mockup | Platform form tracking |
| marketo-mock.html | Phase 0 | Marketo form mock | Visual Marketo mockup | Platform form tracking |
| link-clicks.html | Phase 0 | Click tracking test | Internal, external, downloads, tel/email | Click event tracking |
| test-matrix.html | AC-INF-4 | This documentation page | Comprehensive test coverage matrix | N/A - documentation only |
Phase 1 (Infrastructure) is complete. The next phase involves:
See NEXT_STEPS.md for detailed Phase 2+ requirements.