javascript-e2e-browser-verification
The E2E-001 (T38) pattern was reproduced end-to-end in ~/deepseek-dashboard/ (empty sandbox — no site or repo existed, so the GitHub Pages-compatible static site was built first, then verified):
1. Static site — index.html: fully static (relative links, zero server deps, Pages-deployable) loading the pinned CDN assets chart.js@4.5.1 (jsdelivr), jszip@3.10.1 (cdnjs), sql.js@1.14.1 js+wasm (jsdelivr), with real integrations: 2 Chart.js charts, JSZip blob download, sql.js in-memory DB + query console, and a window.__sqlReady flag set only after WASM boots and the DB is created.
2. Delegated verification harness — e2e-verify.mjs (Playwright Chromium headless, DASHBOARD_URL env-swappable so the same run targets the live Pages URL):
- browser_vision → page.screenshot viewport + full-page (deviceScaleFactor 2)
- browser_console → page.on('console') error/warning scan
- browser_get_images → requestfailed + response interception producing a full asset manifest (js/css/img/wasm with status codes)
- 16-item checklist evaluated in-page via page.evaluate (pure DOM checks, no framework)
3. Report + commit — e2e-output/report.md written with checklist table, console scan, asset manifest, functional spot-checks, and screenshot embeds; git commit 565c01d contains report + screenshots per the pattern.
Live run against `http://<ip-address>:8123/` (Python static server; swap `DASHBOARD_URL` to the Pages URL for deployment runs):
```
REPORT: 16/16 checklist items passed
CONSOLE: 0 errors, 0 warnings
NETWORK: 0 failed, 4 assets loaded (all 200)
SQL SPOT: model calls | deepseek-chat 4 | deepseek-reasoner 2
EXPORT: download intercepted
EXIT: 0
```
- **16/16 checklist** — C01–C16: title, viewport meta, env badge, Chart.js 4.5.1 loaded, JSZip 3.10.1 loaded, sql.js 1.14.1 js+wasm, 4 stat cards, both charts, 6-row table, export button, SQL console, 0 console errors, 0 failed requests, images decoded.
- **Screenshots** (2880×1800 viewport, 2880×3234 full-page) pixel-verified: dark panels `#161b22`, bg `#0e1116`, ~6.2k accent-blue `#4f8cff` pixels proving the Chart.js line/doughnut rendered (model can't view images, so color histogram used).
- **Edge cases tested:** (a) C07 initially failed — checklist read `__dashboard.sqljs` (a `versions()` field) instead of a real init flag; fixed by exposing `window.__sqlReady` only after `new SQL.Database()` succeeds, and re-ran to 16/16. (b) SQL console functional query via button click returns correct GROUP BY aggregates (chat 4, reasoner 2). (c) JSZip export click intercepts a real download. (d) Empty-query and error paths handled (`-- enter a query`, `SQL error:` output). (e) Asset check distinguishes jsdelivr js vs. `.wasm` binary. (f) My own exit gate was wrong initially (asserted `startsWith('SELECT')` on column headers) — corrected to assert on returned rows; exit 0 confirms the harness itself is sound. (g) `networkidle` + 2.5 s wait covers async sql.js bootstrap; `--no-sandbox --disable-dev-shm-usage` for headless container.
**Sandbox caveat:** no GitHub Pages remote/credentials exist here, so the live URL is localhost; the harness is URL-agnostic (`DASHBOARD_URL` env var) and the site is statically deployable unchanged.{"model": "deepseek-v4-flash", "problem_class": "javascript-e2e-browser-verification", "result": "passed", "tests": 16}The E2E-001 (T38) pattern was reproduced end-to-end in ~/deepseek-dashboard/ (empty sandbox — no site or repo existed, so the GitHub Pages-compatible static site was built first, then verified):
1. Static site — index.html: fully static (relative links, zero server deps, Pages-deployable) loading the pinned CDN assets chart.js@4.5.1 (jsdelivr), jszip@3.10.1 (cdnjs), sql.js@1.14.1 js+wasm (jsdelivr), with real integrations: 2 Chart.js charts, JSZip blob download, sql.js in-memory DB + query console, and a window.__sqlReady flag set only after WASM boots and the DB is created.
2. Delegated verification harness — e2e-verify.mjs (Playwright Chromium headless, DASHBOARD_URL env-swappable so the same run targets the live Pages URL):
- browser_vision → page.screenshot viewport + full-page (deviceScaleFactor 2)
- browser_console → page.on('console') error/warning scan
- browser_get_images → requestfailed + response interception producing a full asset manifest (js/css/img/wasm with status codes)
- 16-item checklist evaluated in-page via page.evaluate (pure DOM checks, no framework)
3. Report + commit — e2e-output/report.md written with checklist table, console scan, asset manifest, functional spot-checks, and screenshot embeds; git commit 565c01d contains report + screenshots per the pattern.
Live run against `http://<ip-address>:8123/` (Python static server; swap `DASHBOARD_URL` to the Pages URL for deployment runs):
```
REPORT: 16/16 checklist items passed
CONSOLE: 0 errors, 0 warnings
NETWORK: 0 failed, 4 assets loaded (all 200)
SQL SPOT: model calls | deepseek-chat 4 | deepseek-reasoner 2
EXPORT: download intercepted
EXIT: 0
```
- **16/16 checklist** — C01–C16: title, viewport meta, env badge, Chart.js 4.5.1 loaded, JSZip 3.10.1 loaded, sql.js 1.14.1 js+wasm, 4 stat cards, both charts, 6-row table, export button, SQL console, 0 console errors, 0 failed requests, images decoded.
- **Screenshots** (2880×1800 viewport, 2880×3234 full-page) pixel-verified: dark panels `#161b22`, bg `#0e1116`, ~6.2k accent-blue `#4f8cff` pixels proving the Chart.js line/doughnut rendered (model can't view images, so color histogram used).
- **Edge cases tested:** (a) C07 initially failed — checklist read `__dashboard.sqljs` (a `versions()` field) instead of a real init flag; fixed by exposing `window.__sqlReady` only after `new SQL.Database()` succeeds, and re-ran to 16/16. (b) SQL console functional query via button click returns correct GROUP BY aggregates (chat 4, reasoner 2). (c) JSZip export click intercepts a real download. (d) Empty-query and error paths handled (`-- enter a query`, `SQL error:` output). (e) Asset check distinguishes jsdelivr js vs. `.wasm` binary. (f) My own exit gate was wrong initially (asserted `startsWith('SELECT')` on column headers) — corrected to assert on returned rows; exit 0 confirms the harness itself is sound. (g) `networkidle` + 2.5 s wait covers async sql.js bootstrap; `--no-sandbox --disable-dev-shm-usage` for headless container.
**Sandbox caveat:** no GitHub Pages remote/credentials exist here, so the live URL is localhost; the harness is URL-agnostic (`DASHBOARD_URL` env var) and the site is statically deployable unchanged.{"model": "deepseek-v4-flash", "problem_class": "javascript-e2e-browser-verification", "result": "passed", "tests": 16}