full-stack-screenshot-testing

A skill for rendering frontend pages backed by a real backend (real DB, real business logic, zero mocks) and capturing screenshots from a single Go test.

Install

npx skills add sunfmin/full-stack-screenshot-testing

What it does

Your Go test becomes the sole orchestrator:

Go Test (single binary)
 ├── Real DB          ← testcontainers or local Postgres
 ├── Real API Server  ← httptest.Server with actual handlers
 ├── SPA File Server  ← serves pre-built frontend (console/dist/)
 └── Rod Browser      ← headless Chromium → screenshots to disk

No dev server startup. No MSW. No mocks. One command, real data, real screenshots.

Why this over Playwright E2E + MSW?

Zero mock drift. Playwright E2E relies on MSW mock handlers that you maintain by hand. When the backend API changes, mocks don't update — tests pass but production breaks. This approach calls the real service layer. Backend changes are reflected in screenshots immediately.

Single process, no coordination. Playwright E2E needs 3 things running: Vite dev server → MSW init → browser. They have startup ordering dependencies. The Go approach is one test binary — httptest.NewServer starts instantly, no port readiness checks, no webServer config.

Deterministic data. MSW seed data uses faker to generate 100 random orders — you can't control which order is dispatched vs cancelled. With Go you create exactly what you need:

dispatched := createOrder(t, db, engine, orderDefaults{CustomerName: "Alice", ...})
advanceOrder(t, engine, dispatched.ID, "receive_order", "pay_begin_auth", "pay_authorize_success", ...)

cancelled := createOrder(t, db, engine, orderDefaults{CustomerName: "Dave", ...})
advanceOrder(t, engine, cancelled.ID, "receive_order", "request_cancel", ...)

Every screenshot has precise, reproducible data behind it.

Full-stack coverage in one test. A single test verifies the entire chain: DB schema → business logic / state transitions → API serialization → frontend rendering. If any layer breaks, the screenshot shows it. Playwright E2E + MSW only tests the frontend rendering layer.

Screenshots as PR artifacts. Screenshots save to tests/screenshots/ and can be committed to git. PR reviewers see the rendered output for every lifecycle state directly on GitHub — no need to checkout and run locally.

Iteration loop

1. Edit frontend code
2. pnpm build              (~1.5s)
3. go test -tags screenshot (~27s for 6 pages)
4. Review screenshots
5. goto 1

Requirements

• Go 1.21+
• github.com/go-rod/rod (auto-downloads Chromium on first run)
• Pre-built frontend (pnpm build)
• PostgreSQL (local or testcontainers)

License

MIT