Skip to content

Add Playwright e2e smoke and /api/subscribe verify check#63

Merged
lwwmanning merged 1 commit intomainfrom
claude/playwright-e2e
May 4, 2026
Merged

Add Playwright e2e smoke and /api/subscribe verify check#63
lwwmanning merged 1 commit intomainfrom
claude/playwright-e2e

Conversation

@lwwmanning
Copy link
Copy Markdown
Contributor

Summary

Adds a Playwright browser smoke suite (Chromium desktop + WebKit-iPhone-13 mobile) plus a new /api/subscribe assertion in scripts/verify.ts. Together they cover the rendering and behavioral surface that HTTP-only and Lighthouse audits can't see.

Playwright surface (tests/smoke.spec.ts, 8 tests × 2 projects):

  • home — hero copy text visible (overlay), <title> matches, <canvas> attaches to the DOM after hydration (skipped automatically when the browser doesn't support WebGL — headless WebKit on Linux often doesn't, Chromium has SwiftShader fallback so it runs there).
  • blog index — links to a published post (seed slug discovered at beforeAll from the rendered /blog HTML; entire describe skipped if no published posts).
  • blog post<h1> visible, and figure[data-rehype-pretty-code-figure] with [data-line] children (asserts the rehype plugin actually tokenized the code block, not a fallback <pre>).
  • mobile layout — runs at iPhone-13 viewport in the mobile project and at 375×812 in the desktop project; asserts scrollWidth ≤ clientWidth on / and /blog/<seed> (no horizontal-scroll regressions).

Verify check (scripts/verify.ts → checkSubscribe()):

  • POSTs to /api/subscribe with a synthetic email; asserts the route returns 503 { error: "Subscription service is not configured" } when RESEND_API_KEY is unset.
  • Catches a regression where someone moves new Resend(...) from inside the request handler to module scope, or removes the env-gate. Both would change the failure mode (build-time crash or 5xx at runtime).
  • Skips gracefully when RESEND_API_KEY is set in the verify shell, rather than calling the real Resend API.

CI integration (.github/workflows/ci.yml):

  • Reorders the existing chain so the dev server stays alive through Playwright, with the audit + Playwright steps slotted between Verify endpoints and Stop server (always).
  • Caches Playwright browsers (~250 MB) keyed on the @playwright/test version pinned in package.json — invalidates on bumps, hits otherwise. Even on a cache hit, system deps (apt) install separately (~10s vs ~3min for the full install).
  • On test failure, uploads playwright-report/ as an artifact (7-day retention) so trace files are recoverable.

Other

  • package.json — adds test:e2e and test:e2e:install scripts (mirroring the existing lighthouse and verify script style).
  • .gitignore — adds /playwright-report/, /playwright/.cache/, /test-results/.

Local verification

$ bun run verify
  ok    /api/subscribe   503 with error="Subscription service is not configured"
  …
  Total: 16 passed, 0 failed

$ bun run test:e2e --project=desktop
  ✓ home › hero copy is visible
  ✓ home › title is correct
  ✓ home › WebGL hero canvas mounts after hydration
  ✓ blog index › links to a published post
  ✓ blog post › post heading renders
  ✓ blog post › rehype-pretty-code syntax highlighting is rendered
  ✓ mobile layout › home has no horizontal scroll
  ✓ mobile layout › blog post page has no horizontal scroll
  8 passed (1.6s)

Test plan

  • CI green (Lint, build, verify job runs the full chain end-to-end, including Playwright on both desktop and mobile projects)
  • On first PR run the Playwright cache is a miss (~3min for browser install); subsequent runs hit the cache (~10s for system deps only)
  • WebGL canvas test runs on desktop (Chromium) and skips on mobile (iPhone 13 / WebKit) without failing the suite
  • If a future regression introduces a horizontal-scroll bug on mobile, the suite catches it on / or /blog/<slug>
  • Deliberately moving new Resend(...) to module scope locally fails the verify suite at the new /api/subscribe step (or fails the build, depending on the move)

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Will Manning <will@willmanning.io>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 4, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
vortex Ready Ready Preview, Comment May 4, 2026 7:41pm

Request Review

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 4, 2026

🔦 Lighthouse audit

URL Perf A11y Best practices SEO Report
/ 🟢 100 🟢 100 🟢 96 🟢 100 report
/blog 🟢 100 🟢 100 🟢 96 🟢 100 report
/blog/btrblocks-compressor 🟢 100 🟢 96 🟢 96 🟢 100 report

Run 25339516475 · 2026-05-04 19:42 UTC

@lwwmanning lwwmanning merged commit c8cc13b into main May 4, 2026
6 checks passed
@lwwmanning lwwmanning deleted the claude/playwright-e2e branch May 4, 2026 19:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant