# TF-03 — SFAE Dev Toolbar | | | |---|---| | **Feature** | Dev toolbar injected into `02-sfae-source.html` for local development | | **Test Page** | [`test-pages/02-sfae-source.html`](../test-pages/02-sfae-source.html) | | **Live URL** | https://sfae-forms.jjlo.app/test-pages/02-sfae-source.html | | **Status** | ✅ Ready | | **Last Verified** | 2026-05-24 | --- ## What We're Testing Page 2 has a sticky dev toolbar at the top (not part of the original Pardot source) that provides: 1. Navigation back to Page 1 2. An expandable URL params editor panel 3. An "Apply & Reload" mechanism This toolbar must not interfere with the actual Pardot form below it. --- ## Test Steps ### 1. Toolbar Visibility - [ ] Open `02-sfae-source.html` - [ ] Dark sticky bar visible at top - [ ] Shows "DEV · Page 2 — SFAE Source (Local)" - [ ] Link "← Page 1: iFrame Embed" is clickable and navigates correctly - [ ] Toolbar remains sticky when scrolling down through the long form ### 2. URL Params Panel - [ ] Click the **"⚙ Dev URL Params"** toggle - [ ] Panel expands to show a grid of labeled inputs - [ ] All 12 parameters listed with correct labels (see TF-02 for param list) - [ ] Inputs are editable (click into any field, type, value changes) ### 3. On-Load Pre-fill - [ ] Load the page with no query string → inputs show default/empty values - [ ] Load the page with `?Language=EN&country=DE` in the URL - [ ] `Language` input shows `EN`, `country` input shows `DE` (correctly parsed from URL) - [ ] Other inputs show defaults ### 4. Apply & Reload - [ ] Change 2–3 param values - [ ] Click **"Apply & Reload with params"** - [ ] Page reloads - [ ] URL bar shows the new query string - [ ] Inputs are pre-filled from the new URL (round-trip works) ### 5. No Interference with Pardot Form - [ ] Scroll past the toolbar - [ ] `#pardot-form` renders below the toolbar - [ ] Form fields are accessible (not covered by sticky toolbar) - [ ] No z-index conflicts between toolbar and form dropdowns/modals ### 6. Console Errors - [ ] Open DevTools → Console - [ ] Load page → 0 errors from toolbar JS (`applyDevParams`) - [ ] Reload after applying params → 0 errors --- ## Pass Criteria Toolbar is visible, sticky, non-interfering. Params panel reads from URL on load, writes to URL on apply. No console errors. ## Code Reference | Element | Location in 02-sfae-source.html | |---|---| | Toolbar HTML | Injected after `` tag, ~line 5 | | Param inputs | `

` block | | `applyDevParams()` function | `