Files
VoxVera/e2e/README.md
T
thePR0M3TH3ANandClaude Opus 4.8 c5b2c20fc9 Add cross-browser e2e tests, field-limit cheat sheet, and docs
Verification:
- Add Playwright harness (e2e/) covering Chromium, Firefox, and WebKit plus
  Android/iOS mobile emulations. Smoke tests assert: default flyer renders
  with no JS/console errors, @media print hides app chrome and keeps the
  flyer, anonymous npub generation (WebCrypto), legacy /nostr/ redirect
  preserves query+hash, and event-lookup URLs show the loading state instead
  of the default flyer. All six projects pass.
- package.json/playwright.config.js wire up the projects and a managed static
  server; .gitignore excludes node_modules and Playwright output.

Docs:
- docs/flyer-field-limits.md: per-script character cheat sheet for each flyer
  field (single-line caps + multi-line guidance), measured by rendering each
  script at print size.
- README: add a Features section matching the shipping client and a
  cross-browser verification section; link the cheat sheet.
- AGENTS.md: document the e2e suite and the one-time WebKit Linux dep.

Co-Authored-By: Claude Opus 4.8 <[email protected]>
2026-06-09 15:29:49 -04:00

2.3 KiB

Cross-browser end-to-end tests

Playwright smoke tests that exercise the static client on every major browser engine and on mobile emulations, so a change that works in Chrome can be confirmed to work in Firefox and Safari (WebKit) too.

Coverage

Projects are defined in ../playwright.config.js:

Project Engine Notes
chromium-desktop Chromium Chrome / Brave / Edge
firefox-desktop Gecko Firefox
webkit-desktop WebKit Safari on macOS
chrome-android Chromium Pixel 5 emulation (touch, mobile UA)
safari-ios WebKit iPhone 13 emulation — proxy for iOS Safari
firefox-mobileviewport Gecko Mobile viewport only (Playwright Firefox has no touch/isMobile emulation)

WebKit is the engine behind Safari and every iOS browser, so the WebKit projects are our stand-in for the Apple ecosystem without a Mac in the loop. They are not a perfect substitute for real Safari/iOS (notably print dialog behavior and clipboard gesture rules), so a real-device pass is still worth doing before a release.

The specs in flyer.spec.js check the genuinely engine-sensitive surfaces:

  • default flyer renders with no uncaught JS / console errors
  • @media print hides the app chrome and keeps the flyer (a print-media screenshot of the sheet is attached per engine for visual diffing)
  • anonymous key generation works (the WebCrypto path)
  • the legacy /nostr/ redirect preserves the query string and #hash
  • an event-lookup URL shows the localized loading state, never the default flyer

Running

npm install
npx playwright install            # download Chromium, Firefox, WebKit
npm run test:e2e                  # all projects
npx playwright test --project=firefox-desktop   # one engine
npm run report                    # open the HTML report (with print screenshots)

Playwright starts and stops the static server itself (python3 -m http.server), so you do not need a server running first.

Linux: WebKit system dependency

On a fresh Linux box WebKit needs extra system libraries. If the WebKit projects fail to launch, install them once:

sudo npx playwright install-deps   # or: sudo apt-get install -y libavif16

The Chromium and Firefox projects run without this step.