Marketing-quality proof that every [&] Protocol product works through a real browser. Sibling to e2e-dashboard/ (which is the internal diagnostic/QA artifact).
cd /home/travis/ProjectAmp2/e2e-playwright
npm install # first time only
npx playwright install chromium # first time only
./run.sh # full run: boots SPA dev servers, tests all 4 tiers, generates showcase
./run.sh --skip-spa # skip SPA tier (no local Vite)
./run.sh --only marketing-desktop # run one projectOutput:
out/<ISO-timestamp>/showcase.html — the investor-facing artifact. Self-contained (relative image/video refs), dark marketing polish. Hero stats + 4 tier sections with embedded videos.
out/<ISO-timestamp>/results.json — structured card data for programmatic consumers.
out/<ISO-timestamp>/media/<tier>/<card>/{video.webm,screenshot.png} — curated media per card.
out/latest → most recent run.
playwright-report/ — Playwright's native HTML report (with full trace viewer).
| Tier | What it proves | Targets |
|---|---|---|
| A · marketing | Static marketing sites render correctly in fresh browser contexts with scroll-triggered lazy-load | 11 portfolio sites × desktop 1440×900 + iPhone 14 = 22 tests |
| B · phoenix | Production Phoenix LiveView apps respond to real user interaction | fleetprompt / prism-eval / specprompt (6 tests) |
| C · mcp | Every deployed MCP endpoint returns its real tool list over the Streamable HTTP handshake | 10 Fly.io MCP endpoints |
| D · spa | Local SPAs hydrate and render | BendScript + WebHost.Systems (4 tests) |
| E · user-stories | End-to-end user journeys that transitively exercise dozens of unit tests per story. Includes the dark-factory loop that spans all 6 MCP products in a single video. | 4 stories (fleetprompt discover · specprompt validate · graphonomous learn · dark-factory loop) |
Total: 46 tests, ~37 videos, ~40 screenshots per run.
Each user-story spec has a header comment listing which test/** unit tests it transitively covers — source of truth for coverage claims.
MCP handshake runs Node-side via `page.request` — not browser fetch. Verified: the Fly MCP servers set access-control-allow-origin: * but NOT access-control-expose-headers: mcp-session-id, so browser JS can't read the session ID. See lib/mcp-handshake.ts.
No `waitForLoadState('networkidle')` on Phoenix LiveView pages. LiveSocket never idles.
`page.evaluate` scroll loop for marketing lazy-load (not page.mouse.wheel, which is flaky).
iPhone 14 preset forced to chromium — the preset defaults to webkit; we only install chromium.
Single fixture server (port 7788) serves both the MCP inspector page and marketing sites, reducing the number of background processes.
fixtures/inspector.html + fixtures/inspector.js — rendering-only MCP inspector page. The test injects the already-resolved handshake data; the fixture doesn't make any network calls. This is the proof-by-screenshot that investors see.
Node.js ≥ 18
@playwright/test ^1.48 (single dev dep)
Chromium browser binary (via npx playwright install chromium)
For SPA tier: bendscript.com and WebHost.Systems/apps/web must have their deps installed (npm install in each)
Open out/latest/showcase.html — red border = failure
Click the embedded video to see what Playwright saw
Open playwright-report/index.html for the full trace viewer + console log + network tab
Rerun one test: npx playwright test --grep "marketing: bendscript.com"
Auth-gated WebHost.Systems flows (Supabase auth against local supabase start)
Deploy to Fly.io / Cloudflare Pages
Lighthouse / SEO / a11y scoring
Firefox + WebKit cross-browser projects
Pixel-diff regression across runs