E2E & Visual Testing (Playwright)
Relevant source files
The following files were used as context for generating this wiki page:
End-to-End (E2E) and visual testing in the mdeapp project are implemented using Playwright to ensure the stability of the AI-first, map-centric discovery platform. The testing suite covers critical user journeys, including chat interactions, map layouts, and responsive shell behavior across desktop and mobile viewports. It specifically targets the integration between the Next.js frontend, CopilotKit AI chat shell, and various backend APIs.
Sources: README.md:1-5, e2e/README.md:1-5
Testing Infrastructure and Configuration
The project utilizes Playwright (@playwright/test) for its E2E suite. Tests are organized into vertical-specific runs to optimize CI/CD performance and avoid global failures for unrelated features.
Viewport Specifications
Standardized viewports are defined to ensure consistency across responsive design tests:
| Viewport Type | Width | Height |
|---|---|---|
DESKTOP_VIEWPORT | 1280px | 900px |
MOBILE_VIEWPORT | 390px | 844px |
Sources: e2e/helpers/screen-evidence.ts:40-41, e2e/screens/SCREEN-001-home-chrome.spec.ts:20-47
Execution Commands
The package.json defines several granular test scripts for different environments and focuses:
| Script | Command / Target | Purpose |
|---|---|---|
test:e2e | playwright test | Runs the full suite. |
test:e2e:screens | e2e/screens --project=chromium --workers=1 | Isolated UI component testing. |
test:e2e:prod-synthetic | e2e/prod-synthetic-smoke.spec.ts | Smoke tests against production URLs. |
test:e2e:copilot-budget | copilotkit-request-budget.spec.ts | Validates API request efficiency. |
Sources: package.json:44-65, e2e/README.md:7-15
Evidence Collection and Diagnostics
A core feature of the E2E suite is the "Screen Evidence" system, which captures snapshots and monitors console health during test execution.
Screenshot Capture
The system automatically generates a directory structure under tmp/screenshots/SCREEN-###/ to store visual evidence of test runs.
This flow ensures that every visual regression check has a corresponding file for manual verification if needed.
Sources: e2e/helpers/screen-evidence.ts:6-30
Console Hygiene
Tests are wrapped with console watchers to catch runtime errors that might not trigger a functional test failure.
watchCriticalConsoleErrors(page): Initializes a listener forpageerrorevents.assertConsoleClean(errors): Throws an error if any critical console logs were detected during the run.
Sources: e2e/helpers/screen-evidence.ts:32-41, e2e/screens/SCREEN-013-itinerary.spec.ts:28-32
Core Test Verticals
1. Shell and Layout (Desktop vs Mobile)
Tests verify the visibility and accessibility of the "Mindtrip" 3-panel shell.
- Desktop: Ensures the Navigation Rail, Center Chat Panel, and Map Panel are all visible and correctly sized without horizontal overflow.
- Mobile: Verifies that the Desktop Rail is hidden, the Hamburger menu (
nav-drawer-trigger) is visible, and the Floating Action Button (FAB) for the map sheet correctly opens the map overlay.
Sources: e2e/screens/SCREEN-018-mobile-shell.spec.ts:18-45, e2e/screens/SCREEN-001-home-chrome.spec.ts:22-38
2. CopilotKit Mobile Composer
Specific tests target the AI chat input (Composer) to ensure mobile usability and compliance with WCAG 2.5.5.
| Feature | Requirement | Source File |
|---|---|---|
| Font Size | ≥ 16px to prevent iOS auto-zoom | MOB-CK-001-mobile-composer.spec.ts:33 |
| Touch Target | ≥ 44x44px for send button | MOB-CK-001-mobile-composer.spec.ts:47 |
| Auto-grow | Textarea expands with multi-line input | MOB-CK-001-mobile-composer.spec.ts:88 |
| Keyboard | enterKeyHint="send" and inputMode="text" | MOB-CK-001-mobile-composer.spec.ts:80 |
Sources: e2e/screens/MOB-CK-001-mobile-composer.spec.ts:18-100
3. Workflow Progress and Grounding
E2E tests track the state of backend-driven workflows, such as rental searches or café grounding.
Tests like SCREEN-004 specifically wait for the workflow-progress-strip to transition through "idle", "running", and "complete" phases.
Sources: e2e/screens/SCREEN-004-workflow-strip.spec.ts:28-65
Synthetic Smoke Testing (Production)
The system includes a production smoke suite (e2e/prod-synthetic-smoke.spec.ts) designed to run against live environments using a 4-query matrix:
- Rentals: "1BR apartment in Laureles..."
- Events: "salsa events this weekend..."
- Restaurants: "suggest restaurants..."
- Cafes: "good specialty coffee..."
This suite monitors API request "budgets" by tracking the number of POST requests sent to /api/copilotkit, alerting developers if a "POST storm" occurs (e.g., >8 requests for a single restaurant query).
Sources: e2e/prod-synthetic-smoke.spec.ts:15-115, e2e/README.md:18-25
Conclusion
The Playwright testing framework in mdeapp provides a robust safety net for a complex AI application. By combining functional E2E tests, responsive layout verification, and automated visual evidence collection, the project maintains high UI/UX standards while managing the inherent non-determinism of AI-driven interfaces.