[sgedda]

Overview

Adds a comprehensive E2E tutorial page to the Mockifyer website at /e2e-tutorial. This page documents the complete multi-service end-to-end test stack with WanderWeird Travel (Expo web + Express API) and the Mockifyer dashboard, demonstrating features like client lanes, field overrides, status overrides, network tracing, and more.

Changes

• New page: /e2e-tutorial with React + Tailwind UI matching existing site design
• SEO & metadata: Configured page title, description, Open Graph tags
• Sitemap: Added to sitemap.xml with priority 0.8
• LLM context: Added to both llms.txt and llms-full.txt
• Navigation: Added to main navigation menu
• E2E tests: 12 Playwright tests validate all content sections and navigation
• Video recordings: 9 side-by-side MP4 clips (app + dashboard) embedded in walkthrough sections 5.1–5.9, recorded with E2E_PRESENTATION=1 for clarity. Each video has a poster image, duration caption, and fallback download link. Total size: ~17 MB of video assets added to the repo.

How it works

The tutorial page provides:

1. Architecture overview: Stack diagram showing Expo web, Express API, Mockifyer dashboard, and external services

2. Setup instructions: Commands to run all four services (dashboards, API gateway, Expo web)

3. Nine walkthrough scenarios with embedded video demonstrations:

   • 5.1: Mock editor body edit (46s)
   • 5.2: Field overrides (54s)
   • 5.3: Status override 503 (40s)
   • 5.4: Client lanes (55s)
   • 5.5: Header scenario picker with strict lanes (49s)
   • 5.6: Network view tracing (1m 9s)
   • 5.7: From-scratch selective mocking (4m 26s)
   • 5.8: Tracing walkthrough (4m 23s)
   • 5.9: Delay and status overrides (3m 7s)

4. Callout: Links to PR test(e2e): dashboard GUI tests with side-by-side app + dashboard videos #487 for branch build and trace features

5. Key benefits: Highlights no fixture stale-ness, realistic paths, and scenario isolation

All videos use native <video controls preload="none" playsInline> with poster images—no external dependencies or autoplay.

Testing

cd mockifyer-web
npm run build:frontend
npx playwright test e2e/e2e-tutorial.spec.ts

All 12 tests pass:

• Main heading and overview
• Branch note callout (PR test(e2e): dashboard GUI tests with side-by-side app + dashboard videos #487)
• Disclosure alert
• All major sections
• Stack components table
• Code blocks
• Nine walkthrough scenarios
• Key temperatures
• Conclusion with benefits
• Limits section
• Video embeds for all nine scenarios
• Navigation accessibility

Screenshots

Full-page screenshots (light and dark themes) showing the embedded videos are available in /opt/cursor/artifacts/tutorial-page-videos/.

Repository size impact

This PR adds ~17 MB of video and poster image files to the repository. These files are served as static assets via Express (which supports HTTP range requests for video seeking) and are essential for demonstrating the E2E workflow.

Alternative: If preferred, the videos could be hosted externally (e.g., on a CDN or YouTube) and embedded via iframe or external links. This would reduce the repository size at the cost of an external dependency for the documentation.

Notes

• No grok-bot-vm references anywhere (verified in all files)
• Neutral terminal prompts throughout (dev@wanderweird)
• Express static file serving automatically supports HTTP range requests, so video seeking works correctly in production on Railway
• Videos recorded with E2E_PRESENTATION=1 hold moments where values change (presentation pacing note added to page)
• PR test(e2e): dashboard GUI tests with side-by-side app + dashboard videos #487 callout preserved as requested

  

---

Note

Low Risk
Marketing/docs-only frontend changes plus Playwright coverage; no auth, API, or runtime Mockifyer behavior changes beyond new static routes and assets.

^{Reviewed by Cursor Bugbot for commit 7541746. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: E2E locators match repeated page text
  • Added .first() to six getByText locators that match multiple elements (branch name, service names, and temperature values) to prevent Playwright strict mode failures.

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit c673e4c. Configure here.}